@operato/slot-layout-editor 0.0.0-stage → 10.29.15

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

@@ -0,0 +1 @@
+{"version":3,"file":"ox-property-editor-slot-layout.js","sourceRoot":"","sources":["../../src/ox-property-editor-slot-layout.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;;AAEH,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC1B,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AACjD,OAAO,EAAE,gBAAgB,EAAqB,MAAM,0BAA0B,CAAA;AAE9E,OAAO,4BAA4B,CAAA;AAS5B,IAAM,0BAA0B,GAAhC,MAAM,0BAA2B,SAAQ,gBAAgB;IAAzD;;QACG,aAAQ,GAA4B,EAAE,CAAA;QACtC,gBAAW,GAAY,MAAM,CAAC,MAAM,CAAC,CAAA;IA0C/C,CAAC;IAxCC,cAAc,CAAC,KAAU,EAAE,IAAkB;;QAC3C,uDAAuD;QACvD,IAAI,IAAI,CAAC,WAAW,KAAK,KAAK,EAAE,CAAC;YAC/B,IAAI,CAAC,WAAW,GAAG,KAAK,CAAA;YACxB,IAAI,CAAC,QAAQ,GAAG,MAAA,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,mCAAI,EAAE,CAAA;QAClD,CAAC;QACD,OAAO,IAAI,CAAA;;;iBAGE,KAAK;mBACH,IAAI,CAAC,QAAQ;mCACG,IAAI,CAAC,aAAa;;KAEhD,CAAA;IACH,CAAC;IAED,8EAA8E;IACtE,eAAe,CAAC,IAAkB;;QACxC,MAAM,IAAI,GAAG,MAAC,IAAI,CAAC,QAAkD,0CAAE,OAAO,CAAA;QAC9E,IAAI,OAAO,IAAI,KAAK,UAAU;YAAE,OAAO,SAAS,CAAA;QAChD,IAAI,QAA+B,CAAA;QACnC,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,iBAAiB,EAAE;YACjC,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;YACd,MAAM,EAAE,EAAE,QAAQ,EAAE,CAAC,CAAY,EAAE,EAAE,CAAC,CAAC,QAAQ,GAAG,CAAC,CAAC,EAAE;SACvD,CAAC,CACH,CAAA;QACD,OAAO,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,SAAS,CAAA;IAC9C,CAAC;IAEO,aAAa,CAAC,CAAQ;QAC5B,CAAC,CAAC,eAAe,EAAE,CAAA;QACnB,6EAA6E;QAC7E,iDAAiD;QACjD,MAAM,MAAM,GAAG,IAAI,WAAW,CAAC,sBAAsB,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,EAAE,CAAC,CAAA;QACxI,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,MAAM,CAAC;YAAE,OAAM;QACvC,IAAI,CAAC,KAAK,GAAG,SAAS,CAAA;QACtB,IAAI,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAA;IAC5E,CAAC;CACF,CAAA;AA5CY,0BAA0B;IADtC,aAAa,CAAC,gCAAgC,CAAC;GACnC,0BAA0B,CA4CtC","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n *\n * 속성 패널용 자리 레이아웃 편집기 (편집기 타입 'slot-layout').\n *\n * 기존 속성 편집기 계약을 따른다: 값은 this.value, 바뀌면 change 를 보내고 호스트(속성 패널)가 컴포넌트에 반영한다.\n * 선택 컴포넌트가 필요한 옵션(값의 출처, 기본값, 상태 문구)은 'i-need-selected' 로 선택 목록을 받아\n * 속성 정의의 property.options(selected) 가 만든다. 편집기는 컴포넌트를 직접 바꾸지 않는다.\n *\n * [기본값 사용]은 값을 비우는 편집과 구분해 'property-use-default'(detail.name, 취소 가능) 를 먼저 알린다.\n * 호스트가 그것을 처리하고 preventDefault() 하면 끝이고, 아니면 값을 비우는 change 하나를 보낸다.\n * 그 뒤 보일 기본값은 호스트가 property.options 로 다시 준다.\n *\n * 속성 정의 예:\n *   { type: 'slot-layout', name: 'loadLayout', label: 'load-slots',\n *     property: { options: selected => ({ effective, notes, presets, ... }) } }\n */\n\nimport { html } from 'lit'\nimport { customElement } from 'lit/decorators.js'\nimport { OxPropertyEditor, type PropertySpec } from '@operato/property-editor'\n\nimport './ox-slot-layout-editor.js'\nimport type { SlotLayoutEditorOptions } from './ox-slot-layout-editor.js'\n\nexport interface SlotLayoutPropertyOptions {\n  /** 선택 컴포넌트로 편집기 옵션을 만든다. 값이 바뀔 때마다 다시 부른다 */\n  options?: (selected: unknown[]) => SlotLayoutEditorOptions | undefined\n}\n\n@customElement('ox-property-editor-slot-layout')\nexport class OxPropertyEditorSlotLayout extends OxPropertyEditor {\n  private _options: SlotLayoutEditorOptions = {}\n  private _optionsFor: unknown = Symbol('none')\n\n  editorTemplate(value: any, spec: PropertySpec) {\n    // 값이 바뀌었을 때만 옵션을 다시 만든다 (렌더마다 새 옵션을 주면 편집 중인 값이 초기화된다)\n    if (this._optionsFor !== value) {\n      this._optionsFor = value\n      this._options = this._resolveOptions(spec) ?? {}\n    }\n    return html`\n      <ox-slot-layout-editor\n        id=\"editor\"\n        .value=${value}\n        .options=${this._options}\n        @slot-layout-use-default=${this._onUseDefault}\n      ></ox-slot-layout-editor>\n    `\n  }\n\n  /** 'i-need-selected' 로 선택 목록을 받아 property.options 를 부른다. 받을 호스트가 없으면 옵션 없음 */\n  private _resolveOptions(spec: PropertySpec): SlotLayoutEditorOptions | undefined {\n    const make = (spec.property as SlotLayoutPropertyOptions | undefined)?.options\n    if (typeof make !== 'function') return undefined\n    let selected: unknown[] | undefined\n    this.dispatchEvent(\n      new CustomEvent('i-need-selected', {\n        bubbles: true,\n        composed: true,\n        detail: { callback: (s: unknown[]) => (selected = s) }\n      })\n    )\n    return selected ? make(selected) : undefined\n  }\n\n  private _onUseDefault(e: Event) {\n    e.stopPropagation()\n    // 의도를 먼저 알린다. 호스트가 직접 처리하고 preventDefault() 하면 값 변경을 보내지 않는다 (두 번 저장하지 않도록).\n    // 처리하지 않는 호스트(기존 속성 패널)에는 값을 비우는 change 하나로 알린다.\n    const intent = new CustomEvent('property-use-default', { bubbles: true, composed: true, cancelable: true, detail: { name: this.name } })\n    if (!this.dispatchEvent(intent)) return\n    this.value = undefined\n    this.dispatchEvent(new Event('change', { bubbles: true, composed: true }))\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ox-property-editor-slot-layout': OxPropertyEditorSlotLayout\n  }\n}\n"]}

package/dist/src/ox-slot-layout-editor.d.ts

@@ -0,0 +1,93 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ *
+ * 자리 레이아웃 편집기. 홀더의 Tier·Slot 구성을 고치고, 검증하고, 미리 보고, [적용]으로 알린다.
+ * Tier 는 홀더가 주는 Anchor 하나에 서고, 그 Anchor 기준 위치·회전과 적재 방식(mount)을 갖는다.
+ *
+ * 컴포넌트 상태를 직접 바꾸지 않는다. 호스트에 두 가지만 알린다:
+ *   change                   — 적용한 레이아웃 (this.value)
+ *   slot-layout-use-default  — 개별 설정을 지우고 기본값을 쓰겠다는 의도 (값을 비우는 편집과 다르다)
+ * 기본값을 쓰게 된 뒤 보일 값은 호스트가 options.effective 로 다시 준다.
+ */
+import { LitElement } from 'lit';
+import { type SlotLayout, type SlotSpaceOptions } from '@hatiolab/things-scene';
+import { type PresetSize, type SlotLayoutPreset } from './draft.js';
+import { type EditorIssue } from './issue-text.js';
+export interface SlotLayoutEditorNote {
+    text: string;
+    level?: 'info' | 'error';
+}
+export interface SlotLayoutEditorOptions<L extends SlotLayout = SlotLayout> {
+    /** 개별 설정이 없을 때 보이는 값 (호스트가 고른 기본값). 편집 시작점이 된다 */
+    effective?: L;
+    /** [기본값 사용]을 보일지. 기본은 개별 설정(value)이 있을 때 */
+    canUseDefault?: boolean;
+    /** 호스트가 주는 프리셋 */
+    presets?: SlotLayoutPreset<L>[];
+    /** 프리셋 크기 초기값 */
+    presetSize?: Partial<PresetSize>;
+    /** 상태 문구 (값의 출처, 단위 상태 등) */
+    notes?: SlotLayoutEditorNote[];
+    /** 홀더가 주는 Anchor. 주면 Tier 는 이 중 하나를 고르고, 없는 Anchor 는 문제로 보인다 */
+    anchors?: {
+        id: string;
+        label?: string;
+    }[];
+    /** Anchor 가 주는 적재면 크기 (Anchor 기준 X·Z). 주면 자리가 면 밖으로 나가는지와 확인 불가를 알린다 */
+    anchorFaces?: SlotSpaceOptions['anchorFaces'];
+    /** 호스트 고유 검증 (경로는 레이아웃 기준) */
+    validate?: (layout: L) => EditorIssue[];
+    /** 문제 문구. undefined 를 돌려주면 기본 문구 */
+    issueText?: (issue: EditorIssue) => string | undefined;
+    /** 레이아웃에 덧붙인 호스트 키를 고치는 구역 (예: 실시간 주소 읽기). edit 로 새 레이아웃을 넘긴다 */
+    renderExtra?: (draft: L, edit: (next: L) => void) => unknown;
+}
+declare const OxSlotLayoutEditor_base: (new (...args: any[]) => LitElement) & typeof LitElement;
+export declare class OxSlotLayoutEditor extends OxSlotLayoutEditor_base {
+    static styles: import("lit").CSSResult;
+    /** 개별 설정. 없으면 undefined */
+    value: SlotLayout | undefined;
+    options: SlotLayoutEditorOptions;
+    draft: SlotLayout | undefined;
+    tier: number;
+    dirty: boolean;
+    presetKey: string;
+    presetSize: Partial<PresetSize>;
+    presetParams: Record<string, number>;
+    willUpdate(changed: Map<string, unknown>): void;
+    /** 편집 중인 값을 버리고 개별 설정(없으면 호스트 기본값)에서 다시 시작한다 */
+    reset(): void;
+    get issues(): EditorIssue[];
+    /** 자리끼리 겹치거나 면 밖으로 나가는 설정 경고. 적용을 막지 않는다. 적재면 크기를 주지 않은 호스트에는 확인 불가를 보이지 않는다 */
+    get warnings(): EditorIssue[];
+    /** 적용하면 뜻이 바뀌는 주소 (지금 적용된 값 기준) */
+    get impact(): import("./draft.js").AddressImpact;
+    private _text;
+    private _edit;
+    private _apply;
+    private _useDefault;
+    render(): import("lit-html").TemplateResult<1>;
+    private _renderPreset;
+    /** 적용 전에 뜻이 바뀌는 주소를 보인다. 놓인 Carrier 는 주소로 다시 읽혀 다른 자리에 그려지거나 예외가 된다 */
+    private _renderImpact;
+    /** 프리셋으로 다시 시작한다. 지금 값에 덧붙은 호스트 키(Tier 밖의 키)는 가져온다 */
+    private _startFrom;
+    private _renderDraft;
+    /** 복사한 Tier 를 골라 둔다. 같은 자리에 겹쳐 생기므로 바로 이어서 배치를 고친다 */
+    private _copyTier;
+    private _renderTier;
+    /** Tier 가 선 Anchor, 적재 방식, Anchor 기준 위치·회전 */
+    private _renderPlacement;
+    /** 받는 타입: 모든 타입(accepts 생략) / 지정 타입만(빈 목록이면 아무것도 받지 않음) */
+    private _acceptsEditor;
+    private _renderSpec;
+    private _renderCustom;
+    /** 위에서 본 자리 배치. 오른쪽이 +X, 위쪽이 −Z */
+    private _renderPreview;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ox-slot-layout-editor': OxSlotLayoutEditor;
+    }
+}
+export {};

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

@@ -0,0 +1,499 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ *
+ * 자리 레이아웃 편집기. 홀더의 Tier·Slot 구성을 고치고, 검증하고, 미리 보고, [적용]으로 알린다.
+ * Tier 는 홀더가 주는 Anchor 하나에 서고, 그 Anchor 기준 위치·회전과 적재 방식(mount)을 갖는다.
+ *
+ * 컴포넌트 상태를 직접 바꾸지 않는다. 호스트에 두 가지만 알린다:
+ *   change                   — 적용한 레이아웃 (this.value)
+ *   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';
+const num = (e) => {
+    const n = e.target.valueAsNumber;
+    return Number.isFinite(n) ? n : NaN;
+};
+let OxSlotLayoutEditor = class OxSlotLayoutEditor extends localize(i18next)(LitElement) {
+    constructor() {
+        super(...arguments);
+        this.options = {};
+        this.tier = 1;
+        this.dirty = false;
+        this.presetKey = '';
+        this.presetSize = {};
+        this.presetParams = {};
+    }
+    willUpdate(changed) {
+        var _a, _b, _c, _d, _e, _f, _g;
+        // 호스트가 렌더마다 새 options 를 넘겨도 편집 중인 값을 잃지 않도록, 값이나 호스트 기본값이 바뀔 때만 다시 시작한다
+        const before = changed.get('options');
+        if (changed.has('value') || (changed.has('options') && (before === null || before === void 0 ? void 0 : before.effective) !== ((_a = this.options) === null || _a === void 0 ? void 0 : _a.effective)))
+            this.reset();
+        else if (changed.has('options') && !((_c = (_b = this.options) === null || _b === void 0 ? void 0 : _b.presets) === null || _c === void 0 ? void 0 : _c.some(p => p.key === this.presetKey)))
+            this.presetKey = (_g = (_f = (_e = (_d = this.options) === null || _d === void 0 ? void 0 : _d.presets) === null || _e === void 0 ? void 0 : _e[0]) === null || _f === void 0 ? void 0 : _f.key) !== null && _g !== void 0 ? _g : '';
+    }
+    /** 편집 중인 값을 버리고 개별 설정(없으면 호스트 기본값)에서 다시 시작한다 */
+    reset() {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
+        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;
+        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 : '';
+    }
+    get issues() {
+        var _a, _b, _c, _d, _e;
+        if (!this.draft)
+            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 : [])];
+        // 저장 불가 검사는 검증을 통과한 값에만 보인다 (같은 문제를 두 번 적지 않는다)
+        return invalid.length ? invalid : persistenceIssues(this.draft);
+    }
+    /** 자리끼리 겹치거나 면 밖으로 나가는 설정 경고. 적용을 막지 않는다. 적재면 크기를 주지 않은 호스트에는 확인 불가를 보이지 않는다 */
+    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');
+    }
+    /** 적용하면 뜻이 바뀌는 주소 (지금 적용된 값 기준) */
+    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: [] };
+    }
+    _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;
+        this.draft = next;
+        this.dirty = true;
+        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;
+    }
+    _apply() {
+        this.value = structuredClone(this.draft);
+        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;
+        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;
+        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()}
+      <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>
+      </div>
+    `;
+    }
+    _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 : [];
+        if (!presets.length)
+            return nothing;
+        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>
+    `;
+        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}>${p.label}</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(p.label, 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>
+    `;
+    }
+    /** 적용 전에 뜻이 바뀌는 주소를 보인다. 놓인 Carrier 는 주소로 다시 읽혀 다른 자리에 그려지거나 예외가 된다 */
+    _renderImpact() {
+        const { moved, gone } = this.impact;
+        if (!moved.length && !gone.length)
+            return nothing;
+        const list = (ids) => (ids.length > 12 ? `${ids.slice(0, 12).join(', ')} … (${ids.length})` : ids.join(', '));
+        return html `<div class="notes" data-impact>
+      ${moved.length ? html `<div class="note">${t('impact-moved', 'Moves: {ids}', { ids: list(moved) })}</div>` : nothing}
+      ${gone.length ? html `<div class="error">${t('impact-gone', 'Removed: {ids}', { ids: list(gone) })}</div>` : nothing}
+    </div>`;
+    }
+    /** 프리셋으로 다시 시작한다. 지금 값에 덧붙은 호스트 키(Tier 밖의 키)는 가져온다 */
+    _startFrom(layout) {
+        var _a;
+        const { tiers: _t, ...extra } = ((_a = this.draft) !== null && _a !== void 0 ? _a : {});
+        this._edit({ ...extra, ...structuredClone(layout) });
+    }
+    _renderDraft(issues) {
+        var _a, _b, _c, _d, _e, _f;
+        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 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>
+        <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}
+    `;
+    }
+    /** 복사한 Tier 를 골라 둔다. 같은 자리에 겹쳐 생기므로 바로 이어서 배치를 고친다 */
+    _copyTier(draft, tierNo) {
+        const next = copyTier(draft, tierNo);
+        this._edit(next);
+        this.tier = next.tiers[next.tiers.length - 1].tierNo;
+    }
+    _renderTier(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>
+    `;
+        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 })))}
+          `
+            : 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 } })))}
+          `
+            : nothing}
+      ${l.pattern === 'CUSTOM' ? this._renderCustom(draft, tierNo) : this._renderSpec(draft, tierNo, l.slot)}
+    `;
+    }
+    /** Tier 가 선 Anchor, 적재 방식, Anchor 기준 위치·회전 */
+    _renderPlacement(draft, tierNo) {
+        var _a, _b, _c, _d, _e, _f;
+        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 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>
+    `;
+        };
+        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>
+    `;
+    }
+    /** 받는 타입: 모든 타입(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
+                .split(',')
+                .map(s => s.trim())
+                .filter(Boolean))}
+            />
+          </div>`
+            : nothing}
+    `;
+    }
+    _renderSpec(draft, tierNo, spec) {
+        var _a, _b;
+        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>
+    `;
+        };
+        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 }))}
+    `;
+    }
+    _renderCustom(draft, tierNo) {
+        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>`;
+        return html `
+      <h4>${t('custom-slots', 'Slots')}</h4>
+      <table>
+        <tr>
+          <th>#</th>
+          <th>X</th>
+          <th>Z</th>
+          <th>${t('w', 'W')}</th>
+          <th>${t('d', 'D')}</th>
+          <th>${t('h', 'H')}</th>
+          <th>${t('stack', 'Stack')}</th>
+          <th>${t('rot', 'Rot')}</th>
+          <th></th>
+        </tr>
+        ${slots.map(s => {
+            var _a, _b, _c, _d, _e, _f, _g;
+            return html `
+            <tr>
+              <td>${s.slotNo}</td>
+              ${cell(s.slotNo, (_a = s.offset) === null || _a === void 0 ? void 0 : _a.x, e => ({ offset: { ...s.offset, x: num(e) } }))}
+              ${cell(s.slotNo, (_b = s.offset) === null || _b === void 0 ? void 0 : _b.z, e => ({ offset: { ...s.offset, z: num(e) } }))}
+              ${cell(s.slotNo, (_c = s.allowed) === null || _c === void 0 ? void 0 : _c.width, e => ({ allowed: { ...s.allowed, width: num(e) } }))}
+              ${cell(s.slotNo, (_d = s.allowed) === null || _d === void 0 ? void 0 : _d.depth, e => ({ allowed: { ...s.allowed, depth: num(e) } }))}
+              ${cell(s.slotNo, (_e = s.allowed) === null || _e === void 0 ? void 0 : _e.height, e => ({ allowed: { ...s.allowed, height: num(e) } }))}
+              ${cell(s.slotNo, (_f = s.stackLimit) !== null && _f !== void 0 ? _f : 1, e => ({ stackLimit: num(e) }))} ${cell(s.slotNo, (_g = s.rotation) !== null && _g !== void 0 ? _g : 0, e => ({ rotation: num(e) || undefined }))}
+              <td><button ?disabled=${slots.length <= 1} @click=${() => this._edit(removeCustomSlot(draft, tierNo, s.slotNo))}>−</button></td>
+            </tr>
+          `;
+        })}
+      </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>
+    `;
+    }
+};
+OxSlotLayoutEditor.styles = css `
+    :host {
+      display: flex;
+      flex-direction: column;
+      gap: 6px;
+      font-size: 12px;
+    }
+    .row {
+      display: grid;
+      grid-template-columns: 40% 1fr;
+      align-items: center;
+      gap: 4px;
+    }
+    .notes {
+      padding: 4px 6px;
+      border-radius: 4px;
+      background: rgba(0, 0, 0, 0.04);
+    }
+    .error {
+      color: #c62828;
+    }
+    .note {
+      color: rgba(0, 0, 0, 0.55);
+    }
+    .chips {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 4px;
+    }
+    .chips button[active] {
+      border-color: var(--md-sys-color-primary, #1976d2);
+      color: var(--md-sys-color-primary, #1976d2);
+      font-weight: bold;
+    }
+    button {
+      font-size: 12px;
+      padding: 2px 8px;
+      border: 1px solid rgba(0, 0, 0, 0.2);
+      border-radius: 4px;
+      background: #fff;
+      cursor: pointer;
+    }
+    button[disabled] {
+      opacity: 0.4;
+      cursor: default;
+    }
+    input,
+    select {
+      font-size: 12px;
+      min-width: 0;
+    }
+    table {
+      border-collapse: collapse;
+      width: 100%;
+    }
+    td,
+    th {
+      border-bottom: 1px solid rgba(0, 0, 0, 0.08);
+      padding: 1px;
+    }
+    td input {
+      width: 100%;
+      box-sizing: border-box;
+    }
+    h4 {
+      margin: 6px 0 2px;
+      font-size: 12px;
+    }
+    svg {
+      width: 100%;
+      height: 160px;
+      background: rgba(0, 0, 0, 0.02);
+      border: 1px solid rgba(0, 0, 0, 0.08);
+    }
+    .actions {
+      display: flex;
+      gap: 4px;
+      justify-content: flex-end;
+    }
+  `;
+__decorate([
+    property({ attribute: false })
+], OxSlotLayoutEditor.prototype, "value", void 0);
+__decorate([
+    property({ attribute: false })
+], OxSlotLayoutEditor.prototype, "options", void 0);
+__decorate([
+    state()
+], OxSlotLayoutEditor.prototype, "draft", void 0);
+__decorate([
+    state()
+], OxSlotLayoutEditor.prototype, "tier", void 0);
+__decorate([
+    state()
+], OxSlotLayoutEditor.prototype, "dirty", void 0);
+__decorate([
+    state()
+], OxSlotLayoutEditor.prototype, "presetKey", void 0);
+__decorate([
+    state()
+], OxSlotLayoutEditor.prototype, "presetSize", void 0);
+__decorate([
+    state()
+], OxSlotLayoutEditor.prototype, "presetParams", void 0);
+OxSlotLayoutEditor = __decorate([
+    customElement('ox-slot-layout-editor')
+], OxSlotLayoutEditor);
+export { OxSlotLayoutEditor };
+//# sourceMappingURL=ox-slot-layout-editor.js.map