@operato/slot-layout-editor 10.29.52 → 10.29.56

package/dist/src/ox-slot-layout-editor.js

@@ -1,25 +1,61 @@
 /**
  * @license Copyright © HatioLab Inc. All rights reserved.
  *
- * 자리 레이아웃 편집기. 홀더의 Tier·Slot 구성을 고치고, 검증하고, 미리 보고, [적용]으로 알린다.
+ * 자리 레이아웃 편집기. 홀더의 Tier·Slot 구성을 고치고, 검증하고, 미리 보고, 호스트에 알린다.
  * Tier 는 홀더가 주는 Anchor 하나에 서고, 그 Anchor 기준 위치·회전과 적재 방식(mount)을 갖는다.
  *
+ * 맨 위 그림은 Anchor 면(호스트가 크기를 주면)과 그 위의 자리, 실린 아이템을 Anchor 기준으로 보인다. 자리를 끌면 Tier 위치가,
+ * 끝 자리의 점을 끌면 간격이 바뀐다. 끄는 동안은 그림만 바뀌고, 놓을 때 한 번 편집이 된다. Esc 는 끌기 전으로 돌린다.
+ *
  * 컴포넌트 상태를 직접 바꾸지 않는다. 호스트에 두 가지만 알린다:
- *   change                   — 적용한 레이아웃 (this.value)
+ *   change                   — 적용한 레이아웃 (this.value). live 호스트에는 맞는 편집마다, 아니면 [적용]으로
  *   slot-layout-use-default  — 개별 설정을 지우고 기본값을 쓰겠다는 의도 (값을 비우는 편집과 다르다)
+ * 맞지 않는 초안은 알리지 않는다: 칸 옆에 문제를 보이고, 장면에는 마지막으로 알린 값이 남는다.
  * 기본값을 쓰게 된 뒤 보일 값은 호스트가 options.effective 로 다시 준다.
  */
 import { __decorate } from "tslib";
 import { css, html, nothing, LitElement, svg } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 import { i18next, localize } from '@operato/i18n';
-import { persistenceIssues, slotSpaceWarnings, validateSlotLayout } from '@hatiolab/things-scene';
-import { addCustomSlot, addressImpact, applyPreset, copyTier, previewTier, removeCustomSlot, removeTier, setTierPattern, updatePattern, updateSlotSpec, updateTier } from './draft.js';
-import { issueText as defaultIssueText, spaceWarningText, t } from './issue-text.js';
+import { persistenceIssues, rotatedFootprint, slotSpaceWarnings, validateSlotLayout } from '@hatiolab/things-scene';
+import { addCustomSlot, addressImpact, anchorFaceSlots, applyPreset, copyTier, fitTierToFace, heldItemStatuses, pitchToPoint, removeCustomSlot, removeTier, setTierPattern, updatePattern, updateSlotSpec, updateTier } from './draft.js';
+import { fitFaceText, fitText, issueField, issueMessage, issueText as defaultIssueText, ISSUE_TEXT, spaceWarningText, t } from './issue-text.js';
 const num = (e) => {
     const n = e.target.valueAsNumber;
     return Number.isFinite(n) ? n : NaN;
 };
+const shown = (v) => (v === undefined || v === null || Number.isNaN(v) ? '' : String(v));
+const snap = (v) => Math.round(v / 10) * 10;
+const ERROR = '#c62828';
+const SLOT = '#1976d2';
+/** 칸 이름 (칸 옆에 오지 못한 문제를 목록에 적을 때) */
+const FIELD_LABEL = {
+    anchor: ['face', 'Face'],
+    mount: ['mount', 'Mount'],
+    'position-x': ['position-x', 'Position X'],
+    'position-y': ['position-y', 'Position Y (height)'],
+    'position-z': ['position-z', 'Position Z'],
+    'tier-rotation': ['tier-rotation', 'Tier rotation (deg)'],
+    pattern: ['pattern', 'Arrangement'],
+    count: ['count', 'Slots'],
+    pitch: ['pitch', 'Pitch'],
+    'pitch-x': ['pitch-x', 'Pitch X'],
+    'pitch-z': ['pitch-z', 'Pitch Z'],
+    axis: ['axis', 'Direction'],
+    origin: ['origin', 'Slot 1 at'],
+    'origin-x': ['origin-x', 'Slot 1 at X'],
+    'origin-z': ['origin-z', 'Slot 1 at Z'],
+    rows: ['rows', 'Rows (Z)'],
+    cols: ['cols', 'Columns (X)'],
+    order: ['order', 'Numbering'],
+    'allowed-width': ['allowed-width', 'Width (X)'],
+    'allowed-depth': ['allowed-depth', 'Depth (Z)'],
+    'allowed-height': ['allowed-height', 'Height'],
+    'stack-limit': ['stack-limit', 'Stack limit'],
+    rotation: ['rotation', 'Slot rotation (deg)'],
+    accepts: ['accepts', 'Accepts']
+};
+const fieldLabel = (field) => (FIELD_LABEL[field] ? t(FIELD_LABEL[field][0], FIELD_LABEL[field][1]) : field);
 let OxSlotLayoutEditor = class OxSlotLayoutEditor extends localize(i18next)(LitElement) {
     constructor() {
         super(...arguments);
@@ -29,6 +65,46 @@ let OxSlotLayoutEditor = class OxSlotLayoutEditor extends localize(i18next)(LitE
         this.presetKey = '';
         this.presetSize = {};
         this.presetParams = {};
+        this._onDragKey = (e) => {
+            if (e.key !== 'Escape' || !this._drag)
+                return;
+            e.preventDefault();
+            e.stopPropagation();
+            this._cancelDrag();
+        };
+        this._onDragMove = (e) => {
+            const d = this._drag;
+            const p = d && this._point(e);
+            if (!d || !p)
+                return;
+            const tier = d.before.tiers.find(x => x.tierNo === d.tierNo);
+            if (d.kind === 'move') {
+                const position = { ...tier.position, x: snap(tier.position.x + p.x - d.from.x), z: snap(tier.position.z + p.z - d.from.z) };
+                this.draft = updateTier(d.before, d.tierNo, { position });
+            }
+            else {
+                const pitch = pitchToPoint(d.before, d.tierNo, p);
+                if (pitch !== null)
+                    this.draft = updatePattern(d.before, d.tierNo, { pitch: Math.max(10, snap(pitch)) });
+            }
+        };
+        /** 놓으면 한 번의 편집. 움직이지 않았으면 아무 일도 없다 */
+        this._onDragEnd = () => {
+            const d = this._endDrag();
+            if (!d)
+                return;
+            if (JSON.stringify(this.draft) === JSON.stringify(d.before)) {
+                this.draft = d.before;
+                return;
+            }
+            this._edit(this.draft);
+        };
+        this._cancelDrag = () => {
+            const d = this._endDrag();
+            if (!d)
+                return;
+            this.draft = d.before;
+        };
     }
     willUpdate(changed) {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
@@ -44,16 +120,19 @@ let OxSlotLayoutEditor = class OxSlotLayoutEditor extends localize(i18next)(LitE
         if (JSON.stringify((_h = before === null || before === void 0 ? void 0 : before.presetSize) !== null && _h !== void 0 ? _h : {}) !== JSON.stringify((_k = (_j = this.options) === null || _j === void 0 ? void 0 : _j.presetSize) !== null && _k !== void 0 ? _k : {}))
             this.presetSize = { ...((_m = (_l = this.options) === null || _l === void 0 ? void 0 : _l.presetSize) !== null && _m !== void 0 ? _m : {}) };
     }
-    /** 편집 중인 값을 버리고 개별 설정(없으면 호스트 기본값)에서 다시 시작한다 */
+    /** 편집 중인 값을 버리고 개별 설정(없으면 호스트 기본값)에서 다시 시작한다. 고른 Tier 는 남아 있으면 그대로 */
     reset() {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
         const start = (_a = this.value) !== null && _a !== void 0 ? _a : (_b = this.options) === null || _b === void 0 ? void 0 : _b.effective;
         this.draft = start ? structuredClone(start) : undefined;
-        this.tier = (_f = (_e = (_d = (_c = this.draft) === null || _c === void 0 ? void 0 : _c.tiers) === null || _d === void 0 ? void 0 : _d[0]) === null || _e === void 0 ? void 0 : _e.tierNo) !== null && _f !== void 0 ? _f : 1;
+        if (!((_d = (_c = this.draft) === null || _c === void 0 ? void 0 : _c.tiers) === null || _d === void 0 ? void 0 : _d.some(x => (x === null || x === void 0 ? void 0 : x.tierNo) === this.tier)))
+            this.tier = (_h = (_g = (_f = (_e = this.draft) === null || _e === void 0 ? void 0 : _e.tiers) === null || _f === void 0 ? void 0 : _f[0]) === null || _g === void 0 ? void 0 : _g.tierNo) !== null && _h !== void 0 ? _h : 1;
         this.dirty = false;
-        this.presetSize = { ...((_h = (_g = this.options) === null || _g === void 0 ? void 0 : _g.presetSize) !== null && _h !== void 0 ? _h : {}) };
-        if (!((_k = (_j = this.options) === null || _j === void 0 ? void 0 : _j.presets) === null || _k === void 0 ? void 0 : _k.some(p => p.key === this.presetKey)))
-            this.presetKey = (_p = (_o = (_m = (_l = this.options) === null || _l === void 0 ? void 0 : _l.presets) === null || _m === void 0 ? void 0 : _m[0]) === null || _o === void 0 ? void 0 : _o.key) !== null && _p !== void 0 ? _p : '';
+        this.fitNote = undefined;
+        this._endDrag();
+        this.presetSize = { ...((_k = (_j = this.options) === null || _j === void 0 ? void 0 : _j.presetSize) !== null && _k !== void 0 ? _k : {}) };
+        if (!((_m = (_l = this.options) === null || _l === void 0 ? void 0 : _l.presets) === null || _m === void 0 ? void 0 : _m.some(p => p.key === this.presetKey)))
+            this.presetKey = (_r = (_q = (_p = (_o = this.options) === null || _o === void 0 ? void 0 : _o.presets) === null || _p === void 0 ? void 0 : _p[0]) === null || _q === void 0 ? void 0 : _q.key) !== null && _r !== void 0 ? _r : '';
     }
     get issues() {
         var _a, _b, _c, _d, _e;
@@ -61,58 +140,95 @@ let OxSlotLayoutEditor = class OxSlotLayoutEditor extends localize(i18next)(LitE
             return [];
         const anchors = (_b = (_a = this.options) === null || _a === void 0 ? void 0 : _a.anchors) === null || _b === void 0 ? void 0 : _b.map(a => a.id);
         const invalid = [...validateSlotLayout(this.draft, { anchors }), ...((_e = (_d = (_c = this.options) === null || _c === void 0 ? void 0 : _c.validate) === null || _d === void 0 ? void 0 : _d.call(_c, this.draft)) !== null && _e !== void 0 ? _e : [])];
+        // 호스트 검증이 같은 문제를 다시 내도 한 번만 적는다
+        const seen = new Set();
+        const unique = invalid.filter(i => !seen.has(`${i.code}@${i.path}`) && !!seen.add(`${i.code}@${i.path}`));
         // 저장 불가 검사는 검증을 통과한 값에만 보인다 (같은 문제를 두 번 적지 않는다)
-        return invalid.length ? invalid : persistenceIssues(this.draft);
+        return unique.length ? unique : persistenceIssues(this.draft);
     }
-    /** 자리끼리 겹치거나 면 밖으로 나가는 설정 경고. 적용을 막지 않는다. 적재면 크기를 주지 않은 호스트에는 확인 불가를 보이지 않는다 */
+    /** 자리끼리 겹치거나 면 밖으로 나가는 설정, 면 크기를 몰라 확인하지 못한 Anchor. 적용을 막지 않는다 */
     get warnings() {
         var _a;
         if (!this.draft || this.issues.length)
             return [];
-        const faces = (_a = this.options) === null || _a === void 0 ? void 0 : _a.anchorFaces;
-        return slotSpaceWarnings(this.draft, { anchorFaces: faces }).filter(w => faces || w.code !== 'ANCHOR_SPACE_UNKNOWN');
+        return slotSpaceWarnings(this.draft, { anchorFaces: (_a = this.options) === null || _a === void 0 ? void 0 : _a.anchorFaces });
     }
     /** 적용하면 뜻이 바뀌는 주소 (지금 적용된 값 기준) */
     get impact() {
         var _a, _b;
         return this.dirty && !this.issues.length ? addressImpact((_a = this.value) !== null && _a !== void 0 ? _a : (_b = this.options) === null || _b === void 0 ? void 0 : _b.effective, this.draft) : { moved: [], gone: [] };
     }
+    _message(issue) {
+        var _a, _b, _c;
+        // 편집기가 아는 코드는 칸 옆에 위치 없이 보인다. 호스트 고유 코드는 호스트 문구
+        if (issue.code in ISSUE_TEXT)
+            return issueMessage(issue);
+        return (_c = (_b = (_a = this.options) === null || _a === void 0 ? void 0 : _a.issueText) === null || _b === void 0 ? void 0 : _b.call(_a, issue)) !== null && _c !== void 0 ? _c : issueMessage(issue);
+    }
     _text(issue) {
         var _a, _b, _c;
         return (_c = (_b = (_a = this.options) === null || _a === void 0 ? void 0 : _a.issueText) === null || _b === void 0 ? void 0 : _b.call(_a, issue)) !== null && _c !== void 0 ? _c : defaultIssueText(issue);
     }
     _edit(next) {
-        var _a, _b;
+        var _a, _b, _c;
         this.draft = next;
         this.dirty = true;
+        this.fitNote = undefined;
         if (!next.tiers.some(x => x.tierNo === this.tier))
             this.tier = (_b = (_a = next.tiers[next.tiers.length - 1]) === null || _a === void 0 ? void 0 : _a.tierNo) !== null && _b !== void 0 ? _b : 1;
+        if (((_c = this.options) === null || _c === void 0 ? void 0 : _c.live) && !this.issues.length)
+            this._apply();
     }
     _apply() {
         this.value = structuredClone(this.draft);
+        this.dirty = false;
         this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
     }
     _useDefault() {
         this.dispatchEvent(new CustomEvent('slot-layout-use-default', { bubbles: true, composed: true }));
     }
     render() {
-        var _a, _b, _c, _d;
+        var _a, _b, _c;
         const issues = this.issues;
-        const canUseDefault = (_b = (_a = this.options) === null || _a === void 0 ? void 0 : _a.canUseDefault) !== null && _b !== void 0 ? _b : this.value !== undefined;
+        const live = !!((_a = this.options) === null || _a === void 0 ? void 0 : _a.live);
+        const canUseDefault = (_c = (_b = this.options) === null || _b === void 0 ? void 0 : _b.canUseDefault) !== null && _c !== void 0 ? _c : this.value !== undefined;
         return html `
-      ${((_d = (_c = this.options) === null || _c === void 0 ? void 0 : _c.notes) === null || _d === void 0 ? void 0 : _d.length)
-            ? html `<div class="notes">
-            ${this.options.notes.map(n => html `<div class=${n.level === 'error' ? 'error' : 'note'}>${n.text}</div>`)}
-          </div>`
-            : nothing}
-      ${this._renderPreset()} ${this.draft ? this._renderDraft(issues) : nothing} ${this._renderImpact()}
+      ${this._renderNotes()} ${this.draft ? this._renderDraft(issues) : nothing} ${this._renderPreset()} ${live ? nothing : this._renderImpact()}
       <div class="actions">
         ${canUseDefault ? html `<button data-action="use-default" @click=${this._useDefault}>${t('use-default', 'Use default')}</button>` : nothing}
-        <button data-action="discard" ?disabled=${!this.dirty} @click=${() => this.reset()}>${t('discard', 'Discard')}</button>
-        <button data-action="apply" ?disabled=${!this.dirty || !this.draft || issues.length > 0} @click=${this._apply}>${t('apply', 'Apply')}</button>
+        ${live
+            ? nothing
+            : html `
+              <button data-action="discard" ?disabled=${!this.dirty} @click=${() => this.reset()}>${t('discard', 'Discard')}</button>
+              <button data-action="apply" ?disabled=${!this.dirty || !this.draft || issues.length > 0} @click=${this._apply}>${t('apply', 'Apply')}</button>
+            `}
       </div>
     `;
     }
+    _renderNotes() {
+        var _a, _b;
+        const notes = (_b = (_a = this.options) === null || _a === void 0 ? void 0 : _a.notes) !== null && _b !== void 0 ? _b : [];
+        if (!notes.length)
+            return nothing;
+        const text = (n) => {
+            var _a;
+            return (_a = n.text) !== null && _a !== void 0 ? _a : (n.code === 'OVERRIDE_INVALID' && n.issue
+                ? t('override-invalid', "This placement's layout does not hold and offers no slots: {text}", { text: this._located(n.issue), interpolation: { escapeValue: false } })
+                : n.issue
+                    ? this._located(n.issue)
+                    : '');
+        };
+        return html `<div class="notes">${notes.map(n => html `<div class=${n.level === 'error' ? 'error' : 'note'}>${text(n)}</div>`)}</div>`;
+    }
+    /** 문제를 Tier·칸 이름과 함께. 칸을 모르면 경로 그대로 */
+    _located(issue) {
+        var _a, _b, _c, _d;
+        const { tierIndex, field } = issueField(issue);
+        const tierNo = tierIndex === undefined ? undefined : (_d = (_c = (_b = (_a = this.draft) === null || _a === void 0 ? void 0 : _a.tiers) === null || _b === void 0 ? void 0 : _b[tierIndex]) === null || _c === void 0 ? void 0 : _c.tierNo) !== null && _d !== void 0 ? _d : tierIndex + 1;
+        if (tierNo === undefined || !field)
+            return this._text(issue);
+        return `${t('tier-n', 'Tier {n}', { n: tierNo })} · ${fieldLabel(field)}: ${this._message(issue)}`;
+    }
     _renderPreset() {
         var _a, _b, _c, _d;
         const presets = (_b = (_a = this.options) === null || _a === void 0 ? void 0 : _a.presets) !== null && _b !== void 0 ? _b : [];
@@ -121,29 +237,29 @@ let OxSlotLayoutEditor = class OxSlotLayoutEditor extends localize(i18next)(LitE
         const preset = (_c = presets.find(p => p.key === this.presetKey)) !== null && _c !== void 0 ? _c : presets[0];
         const built = applyPreset(preset, this.presetSize, this.presetParams);
         const numberRow = (label, value, onChange, key) => html `
-      <div class="row">
-        <label>${label}</label>
-        <input type="number" data-preset=${key} .value=${value === undefined || Number.isNaN(value) ? '' : String(value)} @change=${(e) => onChange(num(e))} />
-      </div>
+      <label class="l">${label}</label>
+      <input type="number" data-preset=${key} .value=${shown(value)} @change=${(e) => onChange(num(e))} />
     `;
         return html `
-      <h4>${t('preset', 'Preset')}</h4>
-      <div class="row">
-        <label>${t('preset-kind', 'Kind')}</label>
-        <select data-preset="kind" @change=${(e) => (this.presetKey = e.target.value)}>
-          ${presets.map(p => html `<option value=${p.key} ?selected=${p.key === preset.key}>${t(`preset.${p.key}`, p.key)}</option>`)}
-        </select>
-      </div>
-      ${numberRow(t('width', 'Width (X)'), this.presetSize.width, n => (this.presetSize = { ...this.presetSize, width: n }), 'width')}
-      ${numberRow(t('depth', 'Depth (Z)'), this.presetSize.depth, n => (this.presetSize = { ...this.presetSize, depth: n }), 'depth')}
-      ${numberRow(t('slot-height', 'Slot height'), this.presetSize.slotHeight, n => (this.presetSize = { ...this.presetSize, slotHeight: n }), 'slotHeight')}
-      ${((_d = preset.params) !== null && _d !== void 0 ? _d : []).map(p => numberRow(t(`preset-param.${p.key}`, p.key), this.presetParams[p.key], n => (this.presetParams = { ...this.presetParams, [p.key]: n }), p.key))}
-      <div class="note">${t('preset-note', 'Pitch and slot size are split evenly as starting values. Confirm them against the real equipment.')}</div>
-      <div class="actions">
-        <button data-action="start-preset" ?disabled=${!built.layout} @click=${() => built.layout && this._startFrom(built.layout)}>
-          ${t('start-from-preset', 'Start from preset')}
-        </button>
-      </div>
+      <details data-section="preset" ?open=${!this.draft}>
+        <summary>${t('preset', 'Start again from a preset')}</summary>
+        <section>
+          <label class="l">${t('preset-kind', 'Kind')}</label>
+          <select data-preset="kind" @change=${(e) => (this.presetKey = e.target.value)}>
+            ${presets.map(p => html `<option value=${p.key} ?selected=${p.key === preset.key}>${t(`preset.${p.key}`, p.key)}</option>`)}
+          </select>
+          ${numberRow(t('width', 'Width (X)'), this.presetSize.width, n => (this.presetSize = { ...this.presetSize, width: n }), 'width')}
+          ${numberRow(t('depth', 'Depth (Z)'), this.presetSize.depth, n => (this.presetSize = { ...this.presetSize, depth: n }), 'depth')}
+          ${numberRow(t('slot-height', 'Slot height'), this.presetSize.slotHeight, n => (this.presetSize = { ...this.presetSize, slotHeight: n }), 'slotHeight')}
+          ${((_d = preset.params) !== null && _d !== void 0 ? _d : []).map(p => numberRow(t(`preset-param.${p.key}`, p.key), this.presetParams[p.key], n => (this.presetParams = { ...this.presetParams, [p.key]: n }), p.key))}
+          <div class="hint">${t('preset-note', 'Pitch and slot size are split evenly as starting values. Confirm them against the real equipment.')}</div>
+        </section>
+        <div class="actions">
+          <button data-action="start-preset" ?disabled=${!built.layout} @click=${() => built.layout && this._startFrom(built.layout)}>
+            ${t('start-from-preset', 'Start from preset')}
+          </button>
+        </div>
+      </details>
     `;
     }
     /** 적용 전에 뜻이 바뀌는 주소를 보인다. 놓인 Carrier 는 주소로 다시 읽혀 다른 자리에 그려지거나 예외가 된다 */
@@ -164,174 +280,432 @@ let OxSlotLayoutEditor = class OxSlotLayoutEditor extends localize(i18next)(LitE
         this._edit({ ...extra, ...structuredClone(layout) });
     }
     _renderDraft(issues) {
-        var _a, _b, _c, _d, _e, _f;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
         const draft = this.draft;
         const tier = (_b = (_a = draft.tiers) === null || _a === void 0 ? void 0 : _a.find(x => x.tierNo === this.tier)) !== null && _b !== void 0 ? _b : (_c = draft.tiers) === null || _c === void 0 ? void 0 : _c[0];
-        const warnings = this.warnings;
-        const issueList = issues.length
-            ? html `<div class="error" data-issues>${issues.map(i => html `<div>· ${this._text(i)}</div>`)}</div>`
-            : warnings.length
-                ? html `<div class="note" data-warnings>${warnings.map(w => html `<div>· ${spaceWarningText(w)}</div>`)}</div>`
-                : nothing;
         // 층이 없는 값(잘못된 저장값)은 편집할 층이 없으므로 문제만 보인다. 프리셋으로 다시 시작한다
         if (!tier)
-            return issueList;
+            return issues.length ? html `<div class="error" data-issues>${issues.map(i => html `<div>· ${this._text(i)}</div>`)}</div>` : nothing;
+        const index = draft.tiers.indexOf(tier);
+        // 고른 Tier 의 문제는 칸 옆에, 나머지(다른 Tier, 칸이 없는 경로)는 목록에
+        const errors = new Map();
+        const listed = [];
+        for (const issue of issues) {
+            const { tierIndex, field } = issueField(issue);
+            if (tierIndex === index && field)
+                errors.set(field, [...((_d = errors.get(field)) !== null && _d !== void 0 ? _d : []), this._message(issue)]);
+            else
+                listed.push(issue);
+        }
         return html `
-      <h4>${t('tiers', 'Tiers')}</h4>
-      <div class="chips">
-        ${draft.tiers.map(x => html `<button data-tier=${x.tierNo} ?active=${x.tierNo === tier.tierNo} @click=${() => (this.tier = x.tierNo)}>${t('tier-n', 'Tier {n}', { n: x.tierNo })}</button>`)}
-      </div>
-      <div class="actions">
-        <button data-action="copy-tier" @click=${() => this._copyTier(draft, tier.tierNo)}>${t('copy-tier', 'Copy tier')}</button>
+      ${this._renderPicture(draft, tier.tierNo)}
+      <div class="tiers">
+        ${draft.tiers.map(x => html `<button data-tier=${x.tierNo} aria-pressed=${x.tierNo === tier.tierNo ? 'true' : 'false'} @click=${() => (this.tier = x.tierNo)}>
+            ${t('tier-n', 'Tier {n}', { n: x.tierNo })}
+          </button>`)}
+        <button class="end" data-action="copy-tier" @click=${() => this._copyTier(draft, tier.tierNo)}>${t('copy-tier', 'Copy tier')}</button>
         <button data-action="remove-tier" ?disabled=${draft.tiers.length <= 1} @click=${() => this._edit(removeTier(draft, tier.tierNo))}>${t('remove-tier', 'Remove tier')}</button>
       </div>
-      ${this._renderTier(draft, tier.tierNo)} ${(_f = (_e = (_d = this.options) === null || _d === void 0 ? void 0 : _d.renderExtra) === null || _e === void 0 ? void 0 : _e.call(_d, draft, next => this._edit(next))) !== null && _f !== void 0 ? _f : nothing}
-      <h4>${t('preview', 'Preview (top view, tier {n}, in the tier)', { n: tier.tierNo })}</h4>
-      ${this._renderPreview(draft, tier.tierNo)} ${issueList}
+      ${listed.length || (issues.length && ((_e = this.options) === null || _e === void 0 ? void 0 : _e.live))
+            ? html `<div class="error" data-issues>
+            ${listed.map(i => html `<div>· ${this._located(i)}</div>`)}
+            ${((_f = this.options) === null || _f === void 0 ? void 0 : _f.live) && issues.length ? html `<div class="note" data-held>${t('held-back', 'Not applied until fixed: the scene keeps the last sound layout.')}</div>` : nothing}
+          </div>`
+            : nothing}
+      ${this._renderTier(draft, tier.tierNo, errors)} ${(_j = (_h = (_g = this.options) === null || _g === void 0 ? void 0 : _g.renderExtra) === null || _h === void 0 ? void 0 : _h.call(_g, draft, next => this._edit(next))) !== null && _j !== void 0 ? _j : nothing}
     `;
     }
     /** 복사한 Tier 를 골라 둔다. 같은 자리에 겹쳐 생기므로 바로 이어서 배치를 고친다 */
     _copyTier(draft, tierNo) {
         const next = copyTier(draft, tierNo);
-        this._edit(next);
         this.tier = next.tiers[next.tiers.length - 1].tierNo;
+        this._edit(next);
+    }
+    // ── 그림 ──────────────────────────────────────────────────────────────────
+    _anchorName(id) {
+        var _a, _b, _c, _d;
+        const a = (_b = (_a = this.options) === null || _a === void 0 ? void 0 : _a.anchors) === null || _b === void 0 ? void 0 : _b.find(x => x.id === id);
+        if (a === null || a === void 0 ? void 0 : a.label)
+            return a.label;
+        if (a === null || a === void 0 ? void 0 : a.part)
+            return `${id} · ${t(`face-${(_c = a.face) !== null && _c !== void 0 ? _c : 'top'}`, `{part} ${(_d = a.face) !== null && _d !== void 0 ? _d : 'top'}`, { part: a.part })}`;
+        return id;
+    }
+    _unit() {
+        var _a;
+        return ((_a = this.options) === null || _a === void 0 ? void 0 : _a.unit) ? html ` <span class="unit">${this.options.unit}</span>` : nothing;
     }
-    _renderTier(draft, tierNo) {
+    /** 고른 Tier 의 Anchor 면 위에서 본 자리 (Anchor 기준). 오른쪽이 +X, 위쪽이 −Z */
+    _renderPicture(draft, tierNo) {
         var _a, _b, _c, _d, _e, _f, _g, _h;
         const tier = draft.tiers.find(x => x.tierNo === tierNo);
-        const l = tier.layout;
-        const patternInput = (k, label, value, parse = num) => html `
-      <div class="row">
-        <label>${label}</label>
-        <input type="number" data-field=${k} .value=${value === undefined || Number.isNaN(value) ? '' : String(value)} @change=${(e) => this._edit(updatePattern(draft, tierNo, { [k]: parse(e) }))} />
-      </div>
-    `;
-        const select = (field, label, value, options, onChange) => html `
-      <div class="row">
-        <label>${label}</label>
-        <select data-field=${field} @change=${(e) => onChange(e.target.value)}>
-          ${options.map(o => html `<option value=${o} ?selected=${o === value}>${o}</option>`)}
-        </select>
-      </div>
-    `;
+        const face = (_b = (_a = this.options) === null || _a === void 0 ? void 0 : _a.anchorFaces) === null || _b === void 0 ? void 0 : _b[tier.anchorId];
+        const slots = anchorFaceSlots(draft, tier.anchorId);
+        const mine = slots.filter(s => s.tier === tierNo);
+        if (!mine.length)
+            return html `<div class="note" data-preview="none">${t('preview-none', 'No slots to show with the current values.')}</div>`;
+        const boxes = slots.map(s => ({ s, fp: rotatedFootprint({ width: s.width, depth: s.depth, height: 0 }, s.rotation) }));
+        const xs = boxes.flatMap(({ s, fp }) => [s.x - fp.width / 2, s.x + fp.width / 2]).concat(face ? [-face.width / 2, face.width / 2] : []);
+        const zs = boxes.flatMap(({ s, fp }) => [s.z - fp.depth / 2, s.z + fp.depth / 2]).concat(face ? [-face.depth / 2, face.depth / 2] : []);
+        const [minX, maxX, minZ, maxZ] = [Math.min(...xs), Math.max(...xs), Math.min(...zs), Math.max(...zs)];
+        const size = Math.max(maxX - minX, maxZ - minZ, 1);
+        const pad = size * 0.06;
+        const viewBox = (_d = (_c = this._drag) === null || _c === void 0 ? void 0 : _c.viewBox) !== null && _d !== void 0 ? _d : `${minX - pad} ${minZ - pad} ${maxX - minX + pad * 2} ${maxZ - minZ + pad * 2}`;
+        const font = size * 0.045;
+        const stroke = size * 0.004;
+        const flagged = new Map();
+        for (const w of this.warnings) {
+            const id = `t${(_e = w.params) === null || _e === void 0 ? void 0 : _e.tier}_s${(_f = w.params) === null || _f === void 0 ? void 0 : _f.slot}`;
+            if (w.code === 'SLOT_OUTSIDE_ANCHOR')
+                flagged.set(id, 'out');
+            else if (w.code === 'SLOT_OVERLAP' && !flagged.has(id))
+                flagged.set(id, 'overlap');
+        }
+        const items = (_h = (_g = this.options) === null || _g === void 0 ? void 0 : _g.items) !== null && _h !== void 0 ? _h : [];
+        const onSlot = (id) => items.filter(i => i.slot === id).map(i => i.id);
+        const tl = tier.layout;
+        const last = tl.pattern === 'ROW' && tl.count >= 2 ? mine.find(s => s.slotNo === tl.count) : undefined;
+        /* 간격 손잡이: 끝 자리 안, 줄과 직각으로 가장자리 쪽에 둔다(글자를 가리지 않게). 간격은 줄 방향 거리로만 정해진다 */
+        const handle = last && (() => {
+            const first = mine.find(s => s.slotNo === 1);
+            const length = Math.hypot(last.x - first.x, last.z - first.z) || 1;
+            const across = { x: -(last.z - first.z) / length, z: (last.x - first.x) / length };
+            const room = Math.min(last.width, last.depth) / 2 - font;
+            return { x: last.x + across.x * room, z: last.z + across.z * room };
+        })();
         return html `
-      ${this._renderPlacement(draft, tierNo)}
-      ${select('pattern', t('pattern', 'Pattern'), l.pattern, ['SINGLE', 'ROW', 'GRID', 'CUSTOM'], v => this._edit(setTierPattern(draft, tierNo, v)))}
-      ${l.pattern === 'ROW'
-            ? html `
-            ${patternInput('count', t('count', 'Slots'), l.count)} ${patternInput('pitch', t('pitch', 'Pitch'), l.pitch)}
-            ${select('axis', t('axis', 'Axis'), l.axis, ['X', 'Z'], v => this._edit(updatePattern(draft, tierNo, { axis: v })))}
-            ${select('origin', t('origin', 'Slot 1 at'), (_a = l.origin) !== null && _a !== void 0 ? _a : 'MIN', ['MIN', 'MAX'], v => this._edit(updatePattern(draft, tierNo, { origin: v })))}
-          `
+      <svg
+        data-preview
+        viewBox=${viewBox}
+        preserveAspectRatio="xMidYMid meet"
+        tabindex="0"
+        @pointermove=${this._onDragMove}
+        @pointerup=${this._onDragEnd}
+        @pointercancel=${this._cancelDrag}
+      >
+        ${face
+            ? svg `<rect data-face x=${-face.width / 2} y=${-face.depth / 2} width=${face.width} height=${face.depth}
+              fill="rgba(0,0,0,0.04)" stroke="rgba(0,0,0,0.45)" stroke-width=${stroke} />`
             : nothing}
-      ${l.pattern === 'GRID'
-            ? html `
-            ${patternInput('rows', t('rows', 'Rows (Z)'), l.rows)} ${patternInput('cols', t('cols', 'Columns (X)'), l.cols)}
-            ${patternInput('pitch', t('pitch-x', 'Pitch X'), (_b = l.pitch) === null || _b === void 0 ? void 0 : _b.x, e => ({ ...l.pitch, x: num(e) }))}
-            ${patternInput('pitch', t('pitch-z', 'Pitch Z'), (_c = l.pitch) === null || _c === void 0 ? void 0 : _c.z, e => ({ ...l.pitch, z: num(e) }))}
-            ${select('order', t('order', 'Numbering'), (_d = l.order) !== null && _d !== void 0 ? _d : 'ROW_MAJOR', ['ROW_MAJOR', 'COL_MAJOR', 'SERPENTINE_ROW', 'SERPENTINE_COL'], v => this._edit(updatePattern(draft, tierNo, { order: v })))}
-            ${select('origin-x', t('origin-x', 'Slot 1 at X'), (_f = (_e = l.origin) === null || _e === void 0 ? void 0 : _e.x) !== null && _f !== void 0 ? _f : 'MIN', ['MIN', 'MAX'], v => this._edit(updatePattern(draft, tierNo, { origin: { z: 'MIN', ...l.origin, x: v } })))}
-            ${select('origin-z', t('origin-z', 'Slot 1 at Z'), (_h = (_g = l.origin) === null || _g === void 0 ? void 0 : _g.z) !== null && _h !== void 0 ? _h : 'MIN', ['MIN', 'MAX'], v => this._edit(updatePattern(draft, tierNo, { origin: { x: 'MIN', ...l.origin, z: v } })))}
-          `
+        ${slots
+            .filter(s => s.tier !== tierNo)
+            .map(s => svg `<g transform="translate(${s.x} ${s.z}) rotate(${-s.rotation})">
+              <rect data-other-slot=${s.id} x=${-s.width / 2} y=${-s.depth / 2} width=${s.width} height=${s.depth}
+                fill="none" stroke="rgba(0,0,0,0.35)" stroke-dasharray="${stroke * 4} ${stroke * 3}" stroke-width=${stroke} />
+            </g>`)}
+        ${mine.map(s => {
+            const flag = flagged.get(s.id);
+            const colour = flag ? ERROR : SLOT;
+            return svg `<g transform="translate(${s.x} ${s.z}) rotate(${-s.rotation})">
+              <rect data-slot=${s.slotNo} data-slot-id=${s.id} data-flag=${flag !== null && flag !== void 0 ? flag : ''} x=${-s.width / 2} y=${-s.depth / 2} width=${s.width} height=${s.depth}
+                fill=${flag ? 'rgba(198,40,40,0.1)' : 'rgba(25,118,210,0.1)'} stroke=${colour} stroke-width=${stroke}
+                stroke-dasharray=${flag ? `${stroke * 4} ${stroke * 3}` : 'none'}
+                @pointerdown=${(e) => this._startDrag(e, 'move', tierNo)} />
+            </g>`;
+        })}
+        ${mine.map(s => {
+            const held = onSlot(s.id);
+            return svg `<text x=${s.x} y=${s.z - (held.length ? font * 0.6 : 0)} font-size=${font} text-anchor="middle" dominant-baseline="central"
+              fill=${flagged.has(s.id) ? '#791f1f' : '#0d47a1'} pointer-events="none">${s.id}</text>
+            ${held.length
+                ? svg `<text data-held-on=${s.id} x=${s.x} y=${s.z + font * 0.7} font-size=${font * 0.85} text-anchor="middle" dominant-baseline="central"
+                  fill="rgba(0,0,0,0.6)" pointer-events="none">${held.length > 2 ? `${held.slice(0, 2).join(', ')} +${held.length - 2}` : held.join(', ')}</text>`
+                : nothing}`;
+        })}
+        ${handle
+            ? svg `<circle data-handle="pitch" cx=${handle.x} cy=${handle.z} r=${font * 0.45} fill=${SLOT} stroke="#fff" stroke-width=${stroke}
+              @pointerdown=${(e) => this._startDrag(e, 'pitch', tierNo)} />`
             : nothing}
-      ${l.pattern === 'CUSTOM' ? this._renderCustom(draft, tierNo) : this._renderSpec(draft, tierNo, l.slot)}
+      </svg>
+      <div class="caption">
+        <span data-face-caption>
+          ${face
+            ? html `${this._anchorName(tier.anchorId)} · ${face.width} × ${face.depth}${this._unit()}`
+            : html `<span class="error">${t('face-unknown', 'Face size unknown: whether slots stay on it is not checked')}</span>`}
+        </span>
+        <span>${t('preview-axes', 'Right = +X, up = −Z')}</span>
+      </div>
+      ${this._renderSpaceWarnings(tier.anchorId, !!face)} ${this._renderItems(draft)}
     `;
     }
-    /** Tier 가 선 Anchor, 적재 방식, Anchor 기준 위치·회전 */
-    _renderPlacement(draft, tierNo) {
-        var _a, _b, _c, _d, _e, _f;
+    /** 면 밖·겹침 경고. 고른 Tier 의 Anchor 면을 모른다는 것은 그림 아래에 이미 적었다 */
+    _renderSpaceWarnings(anchorId, faceKnown) {
+        const warnings = this.warnings.filter(w => { var _a; return !(w.code === 'ANCHOR_SPACE_UNKNOWN' && !faceKnown && ((_a = w.params) === null || _a === void 0 ? void 0 : _a.anchorId) === anchorId); });
+        if (!warnings.length)
+            return nothing;
+        return html `<div class="error" data-warnings>${warnings.map(w => html `<div>· ${spaceWarningText(w)}</div>`)}</div>`;
+    }
+    /**
+     * 실린 아이템이 편집 중인 레이아웃에서 어떻게 되는지. 자리가 없어지면 미배치로 남고(지우거나 옮기지 않는다), 받는 타입·규격은
+     * 공통 판정으로 본다. 치수를 모르는 아이템은 판정하지 않았다고 적는다 — 모양을 자리에 맞춰 그리는 것은 판정이 아니다.
+     */
+    _renderItems(draft) {
+        var _a, _b;
+        const items = (_b = (_a = this.options) === null || _a === void 0 ? void 0 : _a.items) !== null && _b !== void 0 ? _b : [];
+        if (!items.length)
+            return nothing;
+        const statuses = heldItemStatuses(draft, items);
+        const shownItems = statuses.slice(0, 12);
+        return html `<div class="items" data-items>
+      ${shownItems.map(s => {
+            var _a;
+            const line = [];
+            if (!s.placed)
+                line.push(html `<span class="bad">${fitText('SLOT_NOT_FOUND')}</span>`);
+            else {
+                if (s.unregistered)
+                    line.push(html `<span class="warn">${t('unregistered-type', 'Type not registered')}</span>`);
+                for (const r of s.reasons)
+                    line.push(html `<span class=${r === 'SPEC_UNKNOWN' ? 'note' : 'bad'}>${fitText(r)}</span>`);
+                if (s.verdict === 'OK')
+                    line.push(html `<span class="note">OK</span>`);
+            }
+            return html `<div data-item=${s.item.id} data-verdict=${s.placed ? s.verdict : 'UNPLACED'}>
+          <b>${s.item.id}</b> · ${(_a = s.item.slot) !== null && _a !== void 0 ? _a : '—'}${s.item.code ? html ` · ${s.item.code}` : nothing} — ${line.map((x, i) => html `${i ? ', ' : ''}${x}`)}
+        </div>`;
+        })}
+      ${statuses.length > shownItems.length ? html `<div class="note">… (${statuses.length})</div>` : nothing}
+    </div>`;
+    }
+    // ── 끌기 ──────────────────────────────────────────────────────────────────
+    _point(e) {
+        const svgEl = this.renderRoot.querySelector('svg[data-preview]');
+        const m = svgEl === null || svgEl === void 0 ? void 0 : svgEl.getScreenCTM();
+        if (!m)
+            return null;
+        const p = new DOMPoint(e.clientX, e.clientY).matrixTransform(m.inverse());
+        return { x: p.x, z: p.y };
+    }
+    _startDrag(e, kind, tierNo) {
+        var _a;
+        const from = this._point(e);
+        const svgEl = this.renderRoot.querySelector('svg[data-preview]');
+        if (!from || !svgEl || !this.draft)
+            return;
+        e.preventDefault();
+        e.stopPropagation();
+        try {
+            svgEl.setPointerCapture(e.pointerId);
+        }
+        catch (_b) {
+            // 이미 놓인 포인터: 끌기는 svg 안에서만 이어진다
+        }
+        this._drag = { kind, tierNo, from, before: structuredClone(this.draft), viewBox: (_a = svgEl.getAttribute('viewBox')) !== null && _a !== void 0 ? _a : '' };
+        // 끄는 동안의 Esc 는 포커스가 어디 있든 끌기를 거둔다
+        window.addEventListener('keydown', this._onDragKey, true);
+    }
+    _endDrag() {
+        const d = this._drag;
+        this._drag = undefined;
+        window.removeEventListener('keydown', this._onDragKey, true);
+        return d;
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this._endDrag();
+    }
+    // ── 칸 ────────────────────────────────────────────────────────────────────
+    _row(field, label, control, errors) {
+        const messages = errors.get(field);
+        return html `
+      <label class="l">${label}</label>
+      ${control} ${messages ? html `<div class="err" data-error=${field}>${messages.join(' · ')}</div>` : nothing}
+    `;
+    }
+    _num(field, value, onChange, errors, extra = {}) {
+        var _a, _b;
+        return html `<input
+      type="number"
+      data-field=${field}
+      ?invalid=${errors.has(field)}
+      min=${(_a = extra.min) !== null && _a !== void 0 ? _a : nothing}
+      step=${(_b = extra.step) !== null && _b !== void 0 ? _b : nothing}
+      .value=${shown(value)}
+      @change=${(e) => onChange(num(e))}
+    />`;
+    }
+    _seg(field, value, options, onChange, errors) {
+        return html `<div class="seg" role="radiogroup" data-field=${field} ?invalid=${errors.has(field)}>
+      ${options.map(([v, label]) => html `<button type="button" role="radio" data-value=${v} aria-checked=${v === value ? 'true' : 'false'} title=${label} @click=${() => v !== value && onChange(v)}>
+            ${label}
+          </button>`)}
+    </div>`;
+    }
+    _renderTier(draft, tierNo, errors) {
+        var _a, _b, _c, _d, _e;
         const tier = draft.tiers.find(x => x.tierNo === tierNo);
         const anchors = (_a = this.options) === null || _a === void 0 ? void 0 : _a.anchors;
-        const edit = (patch) => this._edit(updateTier(draft, tierNo, patch));
+        const editTier = (patch) => this._edit(updateTier(draft, tierNo, patch));
         const position = (_b = tier.position) !== null && _b !== void 0 ? _b : { x: 0, y: 0, z: 0 };
-        const axis = (k, label) => {
-            var _a;
-            return html `
-      <div class="row">
-        <label>${label}</label>
-        <input type="number" data-field=${`position-${k}`} .value=${String((_a = position[k]) !== null && _a !== void 0 ? _a : '')} @change=${(e) => edit({ position: { ...position, [k]: num(e) } })} />
-      </div>
+        const fine = ['position-x', 'position-y', 'position-z', 'tier-rotation'].some(f => errors.has(f));
+        const u = this._unit();
+        return html `
+      <section data-section="where">
+        <h4>${t('where', 'Where')}</h4>
+        ${this._row('anchor', t('face', 'Face'), (anchors === null || anchors === void 0 ? void 0 : anchors.length)
+            ? html `<select data-field="anchor" ?invalid=${errors.has('anchor')} @change=${(e) => editTier({ anchorId: e.target.value })}>
+                ${anchors.some(a => a.id === tier.anchorId) ? nothing : html `<option value=${(_c = tier.anchorId) !== null && _c !== void 0 ? _c : ''} selected>${(_d = tier.anchorId) !== null && _d !== void 0 ? _d : ''}</option>`}
+                ${anchors.map(a => html `<option value=${a.id} ?selected=${a.id === tier.anchorId}>${this._anchorName(a.id)}</option>`)}
+              </select>`
+            : html `<input data-field="anchor" ?invalid=${errors.has('anchor')} .value=${(_e = tier.anchorId) !== null && _e !== void 0 ? _e : ''} @change=${(e) => editTier({ anchorId: e.target.value.trim() })} />`, errors)}
+        ${this._row('mount', t('mount', 'Mount'), this._seg('mount', tier.mount, [
+            ['ON', t('mount.ON', 'On')],
+            ['IN', t('mount.IN', 'In')],
+            ['HANG', t('mount.HANG', 'Hang')]
+        ], mount => editTier({ mount }), errors), errors)}
+      </section>
+      ${this._renderArrangement(draft, tierNo, errors)} ${this._renderSlot(draft, tierNo, errors)}
+      <details data-section="fine" ?open=${fine}>
+        <summary>${t('fine', 'Position and rotation')}</summary>
+        <section>
+          ${this._row('position-x', html `${t('position-x', 'Position X')}${u}`, this._num('position-x', position.x, n => editTier({ position: { ...position, x: n } }), errors), errors)}
+          ${this._row('position-y', html `${t('position-y', 'Position Y (height)')}${u}`, this._num('position-y', position.y, n => editTier({ position: { ...position, y: n } }), errors), errors)}
+          ${this._row('position-z', html `${t('position-z', 'Position Z')}${u}`, this._num('position-z', position.z, n => editTier({ position: { ...position, z: n } }), errors), errors)}
+          ${this._row('tier-rotation', t('tier-rotation', 'Tier rotation (deg)'), this._num('tier-rotation', tier.rotation, n => editTier({ rotation: n }), errors), errors)}
+        </section>
+      </details>
     `;
+    }
+    /** 자리를 어떻게 늘어놓는가: 패턴, 수, 간격, 방향, 1번 자리. 그리고 [면에 맞춤] */
+    _renderArrangement(draft, tierNo, errors) {
+        var _a, _b, _c, _d, _e, _f, _g;
+        const tier = draft.tiers.find(x => x.tierNo === tierNo);
+        const l = tier.layout;
+        const edit = (patch) => this._edit(updatePattern(draft, tierNo, patch));
+        const u = this._unit();
+        const side = (axis) => axis === 'X'
+            ? [
+                ['MIN', t('side.left', 'Left')],
+                ['MAX', t('side.right', 'Right')]
+            ]
+            : [
+                ['MIN', t('side.top', 'Top')],
+                ['MAX', t('side.bottom', 'Bottom')]
+            ];
+        const fit = () => {
+            var _a, _b;
+            const result = fitTierToFace(draft, tierNo, (_b = (_a = this.options) === null || _a === void 0 ? void 0 : _a.anchorFaces) === null || _b === void 0 ? void 0 : _b[tier.anchorId]);
+            if ('layout' in result)
+                this._edit(result.layout);
+            else
+                this.fitNote = fitFaceText(result.reason);
         };
+        const fitButton = html `<button data-action="fit-face" title=${t('fit-face-tip', 'Centre on the face and spread the slots end to end, once')} @click=${fit}>
+      ${t('fit-face', 'Fit to face')}
+    </button>`;
         return html `
-      <div class="row">
-        <label>${t('anchor', 'Anchor')}</label>
-        ${(anchors === null || anchors === void 0 ? void 0 : anchors.length)
-            ? html `<select data-field="anchor" @change=${(e) => edit({ anchorId: e.target.value })}>
-              ${anchors.some(a => a.id === tier.anchorId) ? nothing : html `<option value=${(_c = tier.anchorId) !== null && _c !== void 0 ? _c : ''} selected>${(_d = tier.anchorId) !== null && _d !== void 0 ? _d : ''}</option>`}
-              ${anchors.map(a => { var _a; return html `<option value=${a.id} ?selected=${a.id === tier.anchorId}>${(_a = a.label) !== null && _a !== void 0 ? _a : a.id}</option>`; })}
-            </select>`
-            : html `<input data-field="anchor" .value=${(_e = tier.anchorId) !== null && _e !== void 0 ? _e : ''} @change=${(e) => edit({ anchorId: e.target.value.trim() })} />`}
-      </div>
-      <div class="row">
-        <label>${t('mount', 'Mount')}</label>
-        <select data-field="mount" @change=${(e) => edit({ mount: e.target.value })}>
-          ${['ON', 'IN', 'HANG'].map(m => html `<option value=${m} ?selected=${m === tier.mount}>${m}</option>`)}
-        </select>
-      </div>
-      ${axis('x', t('position-x', 'Position X'))} ${axis('y', t('position-y', 'Position Y (height)'))} ${axis('z', t('position-z', 'Position Z'))}
-      <div class="row">
-        <label>${t('tier-rotation', 'Tier rotation (deg)')}</label>
-        <input type="number" data-field="tier-rotation" .value=${String((_f = tier.rotation) !== null && _f !== void 0 ? _f : '')} @change=${(e) => edit({ rotation: num(e) })} />
-      </div>
+      <section data-section="arrangement">
+        <h4>${t('arrangement', 'Arrangement')}</h4>
+        ${this._row('pattern', t('pattern', 'Arrangement'), this._seg('pattern', l.pattern, [
+            ['SINGLE', t('pattern.SINGLE', 'One')],
+            ['ROW', t('pattern.ROW', 'Row')],
+            ['GRID', t('pattern.GRID', 'Grid')],
+            ['CUSTOM', t('pattern.CUSTOM', 'Listed')]
+        ], v => this._edit(setTierPattern(draft, tierNo, v)), errors), errors)}
+        ${l.pattern === 'ROW'
+            ? html `
+              ${this._row('count', t('count', 'Slots'), this._num('count', l.count, n => edit({ count: n }), errors, { min: '1', step: '1' }), errors)}
+              ${this._row('pitch', html `${t('pitch', 'Pitch')}${u}`, html `<div class="inline">${this._num('pitch', l.pitch, n => edit({ pitch: n }), errors)} ${fitButton}</div>`, errors)}
+              ${this._row('axis', t('axis', 'Direction'), this._seg('axis', l.axis, [
+                ['X', t('axis.X', 'Across (X)')],
+                ['Z', t('axis.Z', 'Down (Z)')]
+            ], axis => edit({ axis }), errors), errors)}
+              ${this._row('origin', t('origin', 'Slot 1 at'), this._seg('origin', (_a = l.origin) !== null && _a !== void 0 ? _a : 'MIN', side(l.axis), origin => edit({ origin }), errors), errors)}
+            `
+            : nothing}
+        ${l.pattern === 'GRID'
+            ? html `
+              ${this._row('rows', t('rows', 'Rows (Z)'), this._num('rows', l.rows, n => edit({ rows: n }), errors, { min: '1', step: '1' }), errors)}
+              ${this._row('cols', t('cols', 'Columns (X)'), this._num('cols', l.cols, n => edit({ cols: n }), errors, { min: '1', step: '1' }), errors)}
+              ${this._row('pitch-x', html `${t('pitch-x', 'Pitch X')}${u}`, this._num('pitch-x', (_b = l.pitch) === null || _b === void 0 ? void 0 : _b.x, n => edit({ pitch: { ...l.pitch, x: n } }), errors), errors)}
+              ${this._row('pitch-z', html `${t('pitch-z', 'Pitch Z')}${u}`, html `<div class="inline">${this._num('pitch-z', (_c = l.pitch) === null || _c === void 0 ? void 0 : _c.z, n => edit({ pitch: { ...l.pitch, z: n } }), errors)} ${fitButton}</div>`, errors)}
+              ${this._row('order', t('order', 'Numbering'), html `<select data-field="order" @change=${(e) => edit({ order: e.target.value })}>
+                  ${['ROW_MAJOR', 'COL_MAJOR', 'SERPENTINE_ROW', 'SERPENTINE_COL'].map(o => { var _a; return html `<option value=${o} ?selected=${o === ((_a = l.order) !== null && _a !== void 0 ? _a : 'ROW_MAJOR')}>${t(`order.${o}`, o)}</option>`; })}
+                </select>`, errors)}
+              ${this._row('origin-x', t('origin-x', 'Slot 1 at X'), this._seg('origin-x', (_e = (_d = l.origin) === null || _d === void 0 ? void 0 : _d.x) !== null && _e !== void 0 ? _e : 'MIN', side('X'), x => edit({ origin: { z: 'MIN', ...l.origin, x } }), errors), errors)}
+              ${this._row('origin-z', t('origin-z', 'Slot 1 at Z'), this._seg('origin-z', (_g = (_f = l.origin) === null || _f === void 0 ? void 0 : _f.z) !== null && _g !== void 0 ? _g : 'MIN', side('Z'), z => edit({ origin: { x: 'MIN', ...l.origin, z } }), errors), errors)}
+            `
+            : nothing}
+        ${l.pattern === 'SINGLE' ? html `<label class="l"></label><div class="inline">${fitButton}</div>` : nothing}
+        ${this.fitNote ? html `<div class="err" data-fit-note>${this.fitNote}</div>` : nothing}
+      </section>
+      ${l.pattern === 'CUSTOM' ? this._renderCustom(draft, tierNo) : nothing}
     `;
     }
-    /** 받는 타입: 모든 타입(accepts 생략) / 지정 타입만(빈 목록이면 아무것도 받지 않음) */
-    _acceptsEditor(spec, onChange) {
-        var _a;
-        const restricted = Array.isArray(spec.accepts);
-        return html `
-      <div class="row">
-        <label>${t('accepts', 'Accepts')}</label>
-        <select data-field="accepts-mode" @change=${(e) => { var _a; return onChange(e.target.value === 'ALL' ? undefined : (_a = spec.accepts) !== null && _a !== void 0 ? _a : []); }}>
-          <option value="ALL" ?selected=${!restricted}>${t('accepts-all', 'Any type')}</option>
-          <option value="LIST" ?selected=${restricted}>${t('accepts-list', 'Listed types only')}</option>
-        </select>
-      </div>
-      ${restricted
-            ? html `<div class="row">
-            <label>${t('accepts-types', 'Types (comma)')}</label>
-            <input
-              data-field="accepts"
-              .value=${((_a = spec.accepts) !== null && _a !== void 0 ? _a : []).join(', ')}
-              placeholder=${t('accepts-none', 'Empty = accepts nothing')}
-              @change=${(e) => onChange(e.target.value
+    /** 받는 타입: 목록에서 고른 코드(목록에 없는 코드는 그대로 두고 표시), 목록이 없으면 직접 적는다. 필수가 아니면 [모든 타입]도 */
+    _acceptsEditor(spec, onChange, errors) {
+        var _a, _b, _c;
+        const required = !!((_a = this.options) === null || _a === void 0 ? void 0 : _a.acceptsRequired);
+        const restricted = required || Array.isArray(spec.accepts);
+        const types = (_b = this.options) === null || _b === void 0 ? void 0 : _b.itemTypes;
+        const accepts = (_c = spec.accepts) !== null && _c !== void 0 ? _c : [];
+        const mode = required
+            ? nothing
+            : this._row('accepts-mode', t('accepts', 'Accepts'), this._seg('accepts-mode', restricted ? 'LIST' : 'ALL', [
+                ['ALL', t('accepts-all', 'Any type')],
+                ['LIST', t('accepts-list', 'Listed types only')]
+            ], v => { var _a; return onChange(v === 'ALL' ? undefined : ((_a = spec.accepts) !== null && _a !== void 0 ? _a : [])); }, errors), errors);
+        if (!restricted)
+            return mode;
+        const label = required ? t('accepts', 'Accepts') : t('accepts-types', 'Types');
+        const control = types
+            ? html `<div class="chips" data-field="accepts" ?invalid=${errors.has('accepts')}>
+          ${accepts.map(code => {
+                const known = types.find(x => x.code === code);
+                return html `<span class="chip" data-code=${code} ?unregistered=${!known} title=${known ? code : t('unregistered-type', 'Type not registered')}>
+              ${(known === null || known === void 0 ? void 0 : known.name) && known.name !== code ? `${known.name} (${code})` : code}${known ? nothing : ' ⚠'}
+              <button aria-label=${t('remove', 'Remove')} @click=${() => onChange(accepts.filter(c => c !== code))}>×</button>
+            </span>`;
+            })}
+          <select
+            data-field="accepts-add"
+            @change=${(e) => {
+                const select = e.target;
+                const code = select.value;
+                select.value = '';
+                if (code)
+                    onChange([...accepts, code]);
+            }}
+          >
+            <option value="">${t('accepts-add', '+ Add type')}</option>
+            ${types.filter(x => !accepts.includes(x.code)).map(x => html `<option value=${x.code}>${x.name && x.name !== x.code ? `${x.name} (${x.code})` : x.code}</option>`)}
+          </select>
+        </div>`
+            : html `<input
+          data-field="accepts"
+          ?invalid=${errors.has('accepts')}
+          .value=${accepts.join(', ')}
+          placeholder=${t('accepts-none', 'Empty = accepts nothing')}
+          @change=${(e) => onChange(e.target.value
                 .split(',')
                 .map(s => s.trim())
                 .filter(Boolean))}
-            />
-          </div>`
-            : nothing}
-    `;
+        />`;
+        return html `${mode} ${this._row('accepts', label, control, errors)}`;
     }
-    _renderSpec(draft, tierNo, spec) {
-        var _a, _b;
+    /** 자리 하나의 크기·받는 것·쌓기 (이 Tier 의 모든 자리 공통). CUSTOM 은 자리 표에서 */
+    _renderSlot(draft, tierNo, errors) {
+        var _a, _b, _c;
+        const tier = draft.tiers.find(x => x.tierNo === tierNo);
+        if (tier.layout.pattern === 'CUSTOM')
+            return nothing;
+        const spec = tier.layout.slot;
         const edit = (patch) => this._edit(updateSlotSpec(draft, tierNo, patch));
-        const allowed = (k, label) => {
-            var _a, _b;
-            return html `
-      <div class="row">
-        <label>${label}</label>
-        <input type="number" data-field=${`allowed-${k}`} .value=${String((_b = (_a = spec.allowed) === null || _a === void 0 ? void 0 : _a[k]) !== null && _b !== void 0 ? _b : '')} @change=${(e) => edit({ allowed: { ...spec.allowed, [k]: num(e) } })} />
-      </div>
-    `;
-        };
+        const u = this._unit();
+        const allowed = (k, field, label) => { var _a; return this._row(field, html `${label}${u}`, this._num(field, (_a = spec.allowed) === null || _a === void 0 ? void 0 : _a[k], n => edit({ allowed: { ...spec.allowed, [k]: n } }), errors), errors); };
         return html `
-      <h4>${t('slot-spec', 'Slot (same for every slot in this tier)')}</h4>
-      ${allowed('width', t('allowed-width', 'Allowed width'))} ${allowed('depth', t('allowed-depth', 'Allowed depth'))}
-      ${allowed('height', t('allowed-height', 'Allowed height'))}
-      <div class="row">
-        <label>${t('stack-limit', 'Stack limit')}</label>
-        <input type="number" data-field="stack-limit" min="1" step="1" .value=${String((_a = spec.stackLimit) !== null && _a !== void 0 ? _a : 1)} @change=${(e) => edit({ stackLimit: num(e) })} />
-      </div>
-      <div class="row">
-        <label>${t('rotation', 'Rotation (deg)')}</label>
-        <input type="number" data-field="rotation" .value=${String((_b = spec.rotation) !== null && _b !== void 0 ? _b : 0)} @change=${(e) => edit({ rotation: num(e) || undefined })} />
-      </div>
-      ${this._acceptsEditor(spec, accepts => edit({ accepts }))}
+      <section data-section="slot">
+        <h4>${t('slot-spec', 'Each slot')}</h4>
+        ${this._acceptsEditor(spec, accepts => edit({ accepts }), errors)} ${allowed('width', 'allowed-width', t('allowed-width', 'Width (X)'))}
+        ${allowed('depth', 'allowed-depth', t('allowed-depth', 'Depth (Z)'))} ${allowed('height', 'allowed-height', t('allowed-height', 'Height'))}
+        ${((_a = this.options) === null || _a === void 0 ? void 0 : _a.itemTypes) ? html `<div class="hint">${t('drawn-at-slot', 'An item that gives no size is drawn at this size.')}</div>` : nothing}
+        ${this._row('stack-limit', t('stack-limit', 'Stack limit'), this._num('stack-limit', (_b = spec.stackLimit) !== null && _b !== void 0 ? _b : 1, n => edit({ stackLimit: n }), errors, { min: '1', step: '1' }), errors)}
+        ${this._row('rotation', t('rotation', 'Slot rotation (deg)'), this._num('rotation', (_c = spec.rotation) !== null && _c !== void 0 ? _c : 0, n => edit({ rotation: n || undefined }), errors), errors)}
+      </section>
     `;
     }
     _renderCustom(draft, tierNo) {
+        var _a, _b, _c;
         const tier = draft.tiers.find(x => x.tierNo === tierNo);
         const slots = [...tier.layout.slots].sort((a, b) => a.slotNo - b.slotNo);
         const cell = (slotNo, value, patch) => html `<td><input type="number" .value=${String(value !== null && value !== void 0 ? value : '')} @change=${(e) => this._edit(updateSlotSpec(draft, tierNo, patch(e), slotNo))} /></td>`;
@@ -366,30 +740,12 @@ let OxSlotLayoutEditor = class OxSlotLayoutEditor extends localize(i18next)(LitE
         })}
       </table>
       <div class="actions"><button data-action="add-slot" @click=${() => this._edit(addCustomSlot(draft, tierNo))}>${t('add-slot', 'Add slot')}</button></div>
-    `;
-    }
-    /** 위에서 본 자리 배치. 오른쪽이 +X, 위쪽이 −Z */
-    _renderPreview(draft, tierNo) {
-        const slots = previewTier(draft, tierNo);
-        if (!slots.length)
-            return html `<div class="note" data-preview="none">${t('preview-none', 'No slots to show with the current values.')}</div>`;
-        const minX = Math.min(...slots.map(s => s.x - s.width / 2));
-        const maxX = Math.max(...slots.map(s => s.x + s.width / 2));
-        const minZ = Math.min(...slots.map(s => s.z - s.depth / 2));
-        const maxZ = Math.max(...slots.map(s => s.z + s.depth / 2));
-        const w = Math.max(maxX - minX, 1);
-        const h = Math.max(maxZ - minZ, 1);
-        const pad = Math.max(w, h) * 0.08;
-        const font = Math.max(w, h) * 0.07;
-        return html `
-      <svg data-preview viewBox="${minX - pad} ${minZ - pad} ${w + pad * 2} ${h + pad * 2}" preserveAspectRatio="xMidYMid meet">
-        ${slots.map(s => svg `
-            <rect data-slot=${s.slotNo} x=${s.x - s.width / 2} y=${s.z - s.depth / 2} width=${s.width} height=${s.depth}
-              fill="rgba(25,118,210,0.08)" stroke="rgba(25,118,210,0.8)" stroke-width=${Math.max(w, h) * 0.006} />
-            <text x=${s.x} y=${s.z} font-size=${font} text-anchor="middle" dominant-baseline="central" fill="#0d47a1">${s.slotNo}</text>
-          `)}
-      </svg>
-      <div class="note">${t('preview-axes', 'Right = +X, up = −Z')}</div>
+      ${this._acceptsEditor({ allowed: (_b = (_a = slots[0]) === null || _a === void 0 ? void 0 : _a.allowed) !== null && _b !== void 0 ? _b : { width: 1, depth: 1, height: 1 }, accepts: (_c = slots[0]) === null || _c === void 0 ? void 0 : _c.accepts }, accepts => {
+            let next = draft;
+            for (const s of slots)
+                next = updateSlotSpec(next, tierNo, { accepts }, s.slotNo);
+            this._edit(next);
+        }, new Map())}
     `;
     }
 };
@@ -397,14 +753,42 @@ OxSlotLayoutEditor.styles = css `
     :host {
       display: flex;
       flex-direction: column;
-      gap: 6px;
+      gap: 8px;
+      min-width: 0;
       font-size: 12px;
+      color: var(--property-editor-color, inherit);
     }
-    .row {
+    section {
       display: grid;
-      grid-template-columns: 40% 1fr;
+      grid-template-columns: minmax(64px, 34%) minmax(0, 1fr);
+      gap: 4px 6px;
       align-items: center;
-      gap: 4px;
+    }
+    h4,
+    summary {
+      grid-column: 1 / -1;
+      margin: 4px 0 0;
+      font-size: 12px;
+      font-weight: bold;
+    }
+    summary {
+      cursor: pointer;
+    }
+    details > section {
+      margin-top: 4px;
+    }
+    label.l {
+      text-align: right;
+      font: var(--property-editor-label-font, inherit);
+      color: var(--property-editor-label-color, inherit);
+    }
+    .unit {
+      opacity: 0.6;
+    }
+    .err {
+      grid-column: 2;
+      color: #c62828;
+      font-size: 11px;
     }
     .notes {
       padding: 4px 6px;
@@ -414,63 +798,176 @@ OxSlotLayoutEditor.styles = css `
     .error {
       color: #c62828;
     }
-    .note {
+    .note,
+    .hint {
       color: rgba(0, 0, 0, 0.55);
     }
-    .chips {
-      display: flex;
-      flex-wrap: wrap;
-      gap: 4px;
+    .hint {
+      grid-column: 2;
+      font-size: 11px;
     }
-    .chips button[active] {
-      border-color: var(--md-sys-color-primary, #1976d2);
-      color: var(--md-sys-color-primary, #1976d2);
-      font-weight: bold;
+    input,
+    select {
+      box-sizing: border-box;
+      width: 100%;
+      min-width: 0;
+      min-height: var(--property-editor-field-height, 24px);
+      padding: var(--property-editor-field-padding, 1px 4px);
+      border: var(--property-editor-border, 1px solid rgba(0, 0, 0, 0.2));
+      border-radius: var(--property-editor-border-radius, 4px);
+      background-color: var(--property-editor-background, field);
+      color: inherit;
+      font: var(--property-editor-field-font, inherit);
+      outline: none;
+    }
+    input[type='number'] {
+      font-variant-numeric: tabular-nums;
+    }
+    input[invalid],
+    select[invalid],
+    .seg[invalid],
+    .chips[invalid] {
+      border-color: #c62828;
+    }
+    .seg {
+      display: flex;
+      box-sizing: border-box;
+      min-height: var(--property-editor-field-height, 24px);
+      border: var(--property-editor-border, 1px solid rgba(0, 0, 0, 0.2));
+      border-radius: var(--property-editor-border-radius, 4px);
+      background-color: var(--property-editor-background, field);
+      overflow: hidden;
+    }
+    .seg button {
+      flex: 1;
+      min-width: 0;
+      min-height: 0;
+      padding: 0 4px;
+      border: 0;
+      border-left: 1px solid rgba(0, 0, 0, 0.12);
+      border-radius: 0;
+      background: transparent;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+    .seg button:first-child {
+      border-left: 0;
+    }
+    .seg button[aria-checked='true'] {
+      background: var(--md-sys-color-primary, #1976d2);
+      color: var(--md-sys-color-on-primary, #fff);
     }
     button {
-      font-size: 12px;
-      padding: 2px 8px;
-      border: 1px solid rgba(0, 0, 0, 0.2);
-      border-radius: 4px;
-      background: #fff;
+      box-sizing: border-box;
+      min-height: var(--property-editor-field-height, 24px);
+      padding: 0 8px;
+      border: var(--property-editor-border, 1px solid rgba(0, 0, 0, 0.2));
+      border-radius: var(--property-editor-border-radius, 4px);
+      background-color: var(--property-editor-background, field);
+      color: inherit;
+      font: var(--property-editor-field-font, inherit);
       cursor: pointer;
     }
     button[disabled] {
       opacity: 0.4;
       cursor: default;
     }
-    input,
-    select {
-      font-size: 12px;
-      min-width: 0;
+    .tiers,
+    .chips,
+    .actions,
+    .inline {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 4px;
+      align-items: center;
     }
-    table {
-      border-collapse: collapse;
-      width: 100%;
+    .actions {
+      justify-content: flex-end;
     }
-    td,
-    th {
-      border-bottom: 1px solid rgba(0, 0, 0, 0.08);
-      padding: 1px;
+    .tiers button[aria-pressed='true'] {
+      border-color: var(--md-sys-color-primary, #1976d2);
+      color: var(--md-sys-color-primary, #1976d2);
+      font-weight: bold;
     }
-    td input {
-      width: 100%;
+    .tiers .end {
+      margin-left: auto;
+    }
+    .inline > input {
+      flex: 1;
+    }
+    .chips {
       box-sizing: border-box;
+      padding: 2px;
+      border: 1px solid transparent;
+      border-radius: var(--property-editor-border-radius, 4px);
     }
-    h4 {
-      margin: 6px 0 2px;
-      font-size: 12px;
+    .chip {
+      display: inline-flex;
+      align-items: center;
+      gap: 2px;
+      padding: 1px 2px 1px 6px;
+      border-radius: 10px;
+      background: rgba(25, 118, 210, 0.1);
+      color: #0d47a1;
+    }
+    .chip[unregistered] {
+      background: rgba(239, 159, 39, 0.18);
+      color: #633806;
+    }
+    .chip button {
+      min-height: 0;
+      padding: 0 4px;
+      border: 0;
+      background: transparent;
+    }
+    .chips select {
+      flex: 1;
+      min-width: 80px;
+      width: auto;
     }
     svg {
+      display: block;
       width: 100%;
-      height: 160px;
+      height: auto;
+      max-height: 240px;
+      touch-action: none;
       background: rgba(0, 0, 0, 0.02);
       border: 1px solid rgba(0, 0, 0, 0.08);
+      border-radius: 4px;
     }
-    .actions {
+    svg [data-slot] {
+      cursor: move;
+    }
+    svg [data-handle] {
+      cursor: ew-resize;
+    }
+    .caption {
       display: flex;
-      gap: 4px;
-      justify-content: flex-end;
+      justify-content: space-between;
+      gap: 6px;
+      color: rgba(0, 0, 0, 0.55);
+      font-size: 11px;
+    }
+    .items {
+      display: flex;
+      flex-direction: column;
+      gap: 2px;
+    }
+    .items .bad {
+      color: #c62828;
+    }
+    .items .warn {
+      color: #854f0b;
+    }
+    table {
+      border-collapse: collapse;
+      width: 100%;
+    }
+    td,
+    th {
+      border-bottom: 1px solid rgba(0, 0, 0, 0.08);
+      padding: 1px;
     }
   `;
 __decorate([
@@ -497,6 +994,9 @@ __decorate([
 __decorate([
     state()
 ], OxSlotLayoutEditor.prototype, "presetParams", void 0);
+__decorate([
+    state()
+], OxSlotLayoutEditor.prototype, "fitNote", void 0);
 OxSlotLayoutEditor = __decorate([
     customElement('ox-slot-layout-editor')
 ], OxSlotLayoutEditor);