@things-factory/integration-ui 10.0.0-beta.10 → 10.0.0-beta.108

package/dist-client/viewparts/env-var-quick-editor.js

@@ -0,0 +1,435 @@
+import { __decorate, __metadata } from "tslib";
+import '@material/web/button/filled-button.js';
+import '@material/web/button/outlined-button.js';
+import '@material/web/button/text-button.js';
+import '@material/web/icon/icon.js';
+import gql from 'graphql-tag';
+import { LitElement, css, html } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { client } from '@operato/graphql';
+import { notify } from '@operato/layout';
+import { OxPropertyEditor } from '@operato/property-editor';
+import { i18next, localize } from '@operato/i18n';
+/**
+ * Connection / Step 파라미터 화면에서 useDomainAttribute 속성의 EnvVar 를
+ * 한 자리에서 확인·편집·삭제하는 인라인 편집기.
+ *
+ * 동작:
+ *  - 현 도메인에 값이 있으면 update(M) / delete
+ *  - 상속만 있는 경우(또는 없는 경우) "이 도메인에 등록" (create)
+ *  - 부모 값을 덮어쓰면 closest-wins 로 자식 값이 적용됨을 안내
+ *
+ * 저장/삭제 성공 시 `saved` 이벤트 발생.
+ */
+let EnvVarQuickEditor = class EnvVarQuickEditor extends localize(i18next)(LitElement) {
+    constructor() {
+        super(...arguments);
+        /** 표시용 라벨 (속성 이름) */
+        this.propLabel = '';
+        this.editedValue = '';
+        this.busy = false;
+        this._editorEl = null;
+        this._editorChangeBound = null;
+    }
+    static { this.styles = css `
+    :host {
+      display: flex;
+      flex-direction: column;
+      min-width: 460px;
+      max-height: 80vh;
+      padding: 20px 24px;
+      box-sizing: border-box;
+      background: var(--md-sys-color-surface, #fff);
+    }
+
+    h3 {
+      margin: 0 0 4px;
+      font-size: 16px;
+      flex: 0 0 auto;
+    }
+
+    /* 스크롤 가능 본문 — flex column 안에서 actions 위쪽 영역만 흘러내림 */
+    .body {
+      flex: 1 1 auto;
+      overflow: auto;
+      min-height: 0;
+    }
+
+    .key {
+      font-family: var(--md-sys-typescale-body-medium-font-family, monospace);
+      font-size: 12px;
+      color: var(--md-sys-color-on-surface-variant);
+      background: var(--md-sys-color-surface-variant);
+      padding: 4px 8px;
+      border-radius: 6px;
+      display: inline-block;
+      margin-bottom: 16px;
+      word-break: break-all;
+    }
+
+    .status {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      margin-bottom: 14px;
+      font-size: 14px;
+    }
+
+    .status[data-status='local'] {
+      color: var(--md-sys-color-tertiary);
+    }
+    .status[data-status='inherited'] {
+      color: var(--md-sys-color-primary);
+    }
+    .status[data-status='absent'] {
+      color: var(--md-sys-color-error);
+    }
+
+    md-outlined-text-field {
+      width: 100%;
+      margin-bottom: 12px;
+    }
+
+    .actions {
+      display: flex;
+      justify-content: flex-end;
+      gap: 8px;
+      flex: 0 0 auto;
+      padding-top: 12px;
+      margin-top: 4px;
+      border-top: 1px solid var(--md-sys-color-outline-variant, #e0e0e0);
+    }
+
+    .info {
+      font-size: 12px;
+      color: var(--md-sys-color-on-surface-variant);
+      margin-bottom: 12px;
+      line-height: 1.5;
+    }
+
+    .scope {
+      font-size: 12px;
+      line-height: 1.6;
+      padding: 10px 12px;
+      margin-bottom: 14px;
+      border-radius: 8px;
+      background: var(--md-sys-color-surface-container-low, #f5f5f5);
+      border-left: 3px solid var(--md-sys-color-primary, #3457d5);
+    }
+
+    .scope .scope-title {
+      font-weight: 600;
+      color: var(--md-sys-color-on-surface);
+      margin-bottom: 4px;
+      display: flex;
+      align-items: center;
+      gap: 4px;
+    }
+
+    .scope .scope-title md-icon {
+      font-size: 14px;
+      --md-icon-size: 14px;
+    }
+
+    .scope ul {
+      margin: 4px 0 0;
+      padding-left: 18px;
+      color: var(--md-sys-color-on-surface-variant);
+    }
+
+    .scope li {
+      margin-bottom: 2px;
+    }
+
+    .scope code {
+      font-family: var(--md-sys-typescale-body-medium-font-family, monospace);
+      font-size: 11px;
+      background: var(--md-sys-color-surface-variant);
+      padding: 1px 4px;
+      border-radius: 3px;
+    }
+  `; }
+    connectedCallback() {
+        super.connectedCallback();
+        this.editedValue = this.resolution?.value ?? '';
+    }
+    get isSecret() {
+        return this.propSpec?.type === 'secret' || /password|secret|token|key$/i.test(this.propLabel || '');
+    }
+    /**
+     * 저장 시 영향 범위 (scope) 안내 패널 — 운영자 의사결정 보조.
+     * - absent  : 처음 등록. 자손 트리 전체에 inherit.
+     * - local   : 이미 등록됨. 자손이 inherit (자손에 자기 override 있으면 그것 우선).
+     * - inherited: 상위에서 받고있음. 여기 등록 시 이 도메인 + 자손에만 한정 override.
+     */
+    _renderScopePanel(isLocal, isInherited) {
+        if (isLocal) {
+            return html `
+        <div class="scope">
+          <div class="scope-title">
+            <md-icon>info</md-icon>
+            저장 위치 / 영향 범위
+          </div>
+          이 도메인에 이미 등록된 값이 자손 도메인 전체에 inherit 됩니다 (closest-wins).
+          <ul>
+            <li>여기서 값을 바꾸면 → 이 도메인 + 자손 트리 전체에 즉시 반영</li>
+            <li>특정 자손에 자기 override 가 등록되어 있으면 그쪽은 자기 값 우선</li>
+            <li>"이 도메인에서 삭제" → 부모(있다면) 값으로 fallback</li>
+          </ul>
+        </div>
+      `;
+        }
+        if (isInherited) {
+            return html `
+        <div class="scope">
+          <div class="scope-title">
+            <md-icon>inventory</md-icon>
+            저장 위치 / 영향 범위
+          </div>
+          현재 <code>${this.resolution.sourceDomainName || '상위 도메인'}</code> 에서 상속된 값을 사용 중입니다.
+          <ul>
+            <li>여기서 등록하면 → 이 도메인 + 그 자손에만 우선 적용 (다른 형제 도메인은 영향 없음)</li>
+            <li>나머지 다른 자손들은 여전히
+              <code>${this.resolution.sourceDomainName || '상위 도메인'}</code> 의 값을 그대로 사용</li>
+          </ul>
+        </div>
+      `;
+        }
+        return html `
+      <div class="scope">
+        <div class="scope-title">
+          <md-icon>add_circle</md-icon>
+          저장 위치 / 영향 범위
+        </div>
+        이 도메인에 처음 등록합니다.
+        <ul>
+          <li>저장 후 → 이 도메인 + 자손 트리 전체에서 사용</li>
+          <li>특정 자손이 자기 값을 별도 등록하면 그쪽은 자기 값 우선 (closest-wins)</li>
+          <li>잘못된 도메인에 저장하지 않도록 — 현재 컨텍스트 도메인을 한번 확인하세요</li>
+        </ul>
+      </div>
+    `;
+    }
+    get statusLabel() {
+        const s = this.resolution?.status;
+        if (s === 'local')
+            return `✓ ${i18next.t('text.set-on-this-domain') || '이 도메인에 등록됨'}`;
+        if (s === 'inherited')
+            return `🔗 ${i18next.t('text.inherited-from') || '상속'} (${this.resolution.sourceDomainName || '부모 도메인'})`;
+        return `⚠ ${i18next.t('text.not-set') || '미설정'}`;
+    }
+    render() {
+        const isLocal = this.resolution?.status === 'local';
+        const isInherited = this.resolution?.status === 'inherited';
+        return html `
+      <h3>${i18next.t('text.domain-attribute') || '도메인 속성'} · ${this.propLabel || this.key_}</h3>
+
+      <div class="body">
+        <div class="key">${this.key_}</div>
+
+        <div class="status" data-status=${this.resolution?.status || 'absent'}>${this.statusLabel}</div>
+
+        ${this._renderScopePanel(isLocal, isInherited)}
+
+        ${this._renderValueInput()}
+      </div>
+
+      <div class="actions">
+        ${isLocal
+            ? html `<md-text-button @click=${this._delete} ?disabled=${this.busy}>
+              ${i18next.t('button.delete-from-this-domain') || '이 도메인에서 삭제'}
+            </md-text-button>`
+            : ''}
+        <md-outlined-button @click=${this._cancel} ?disabled=${this.busy}>
+          ${i18next.t('button.cancel')}
+        </md-outlined-button>
+        <md-filled-button @click=${this._save} ?disabled=${this.busy || !this.editedValue}>
+          ${isLocal ? i18next.t('button.update') || '갱신' : i18next.t('button.set') || '등록'}
+        </md-filled-button>
+      </div>
+    `;
+    }
+    /**
+     * 입력 control 은 플랫폼의 OxPropertyEditor 레지스트리에서 propSpec.type 에
+     * 등록된 element 를 그대로 사용. parameters builder 가 task params 화면에서
+     * 쓰는 것과 동일한 editor 를 EnvVar 편집기에도 노출 — 일관된 UX, 단일 진실 원천.
+     *
+     * EnvVar 저장 값은 항상 문자열. 비-string 값 (number/boolean/object) 은
+     * 직렬화/역직렬화. select 의 경우 option.value 가 string 이라 자연 동작.
+     */
+    _renderValueInput() {
+        // host 만 lit-html 로 렌더. 실제 editor element 는 updated() 에서 imperative.
+        // secret 은 OxPropertyEditor 의 password editor 가 부족할 수 있어 별도 처리.
+        if (this.isSecret) {
+            return html `
+        <input
+          part="secret-input"
+          type="password"
+          .value=${this.editedValue}
+          @input=${(e) => (this.editedValue = e.target.value)}
+          ?disabled=${this.busy}
+          style="width:100%; padding:8px; box-sizing:border-box;"
+        />
+      `;
+        }
+        return html `<div id="editor-host"></div>`;
+    }
+    updated(changed) {
+        super.updated?.(changed);
+        if (this.isSecret)
+            return;
+        if (changed.has('propSpec') || !this._editorEl) {
+            this._mountEditor();
+        }
+        else if (changed.has('editedValue') && this._editorEl) {
+            // 외부에서 editedValue 변경 시 editor 도 동기화
+            const cur = this._editorEl.value;
+            if (cur !== this.editedValue)
+                this._editorEl.value = this.editedValue;
+        }
+    }
+    _mountEditor() {
+        const host = this.renderRoot.querySelector('#editor-host');
+        if (!host)
+            return;
+        host.replaceChildren();
+        this._cleanupEditorListener();
+        const spec = this.propSpec || {};
+        const type = spec.type || 'string';
+        const elementType = OxPropertyEditor.getEditor(type);
+        if (!elementType) {
+            // 등록 editor 없음 — fallback 으로 단순 text input
+            const fallback = document.createElement('input');
+            fallback.type = 'text';
+            fallback.style.cssText = 'width:100%; padding:8px; box-sizing:border-box;';
+            fallback.value = this.editedValue || '';
+            fallback.addEventListener('input', () => (this.editedValue = fallback.value));
+            host.appendChild(fallback);
+            this._editorEl = fallback;
+            return;
+        }
+        const el = document.createElement(elementType);
+        el.label = spec.label || i18next.t('field.value');
+        el.type = type;
+        el.placeholder = spec.placeholder || '';
+        el.property = spec.property;
+        el.editor = spec.editor;
+        el.value = this.editedValue || (type === 'checkbox' ? false : '');
+        // editor 의 change event 를 받아 editedValue 동기화. EnvVar 는 문자열 저장이라
+        // value 가 boolean/number 면 String() 변환.
+        const onChange = () => {
+            const v = el.value;
+            this.editedValue = v == null ? '' : typeof v === 'string' ? v : String(v);
+        };
+        el.addEventListener('change', onChange);
+        this._editorChangeBound = onChange;
+        host.appendChild(el);
+        this._editorEl = el;
+    }
+    _cleanupEditorListener() {
+        if (this._editorEl && this._editorChangeBound) {
+            this._editorEl.removeEventListener('change', this._editorChangeBound);
+        }
+        this._editorChangeBound = null;
+        this._editorEl = null;
+    }
+    disconnectedCallback() {
+        this._cleanupEditorListener();
+        super.disconnectedCallback();
+    }
+    _cancel() {
+        this.dispatchEvent(new CustomEvent('cancel', { bubbles: true, composed: true }));
+    }
+    async _save() {
+        this.busy = true;
+        try {
+            const isUpdate = this.resolution?.status === 'local' && this.resolution?.envVarId;
+            const patches = isUpdate
+                ? [{ id: this.resolution.envVarId, cuFlag: 'M', value: this.editedValue, active: true }]
+                : [
+                    {
+                        cuFlag: '+',
+                        name: this.key_,
+                        value: this.editedValue,
+                        active: true,
+                        description: this.propLabel || ''
+                    }
+                ];
+            const response = await client.mutate({
+                mutation: gql `
+          mutation ($patches: [EnvVarPatch!]!) {
+            updateMultipleEnvVars(patches: $patches) {
+              name
+            }
+          }
+        `,
+                variables: { patches }
+            });
+            if (response.errors)
+                throw new Error(response.errors.map((e) => e.message).join('\n'));
+            notify({ message: i18next.t('text.saved-successfully') || '저장되었습니다' });
+            this.dispatchEvent(new CustomEvent('saved', { bubbles: true, composed: true }));
+        }
+        catch (e) {
+            notify({ level: 'error', message: e.message || String(e) });
+        }
+        finally {
+            this.busy = false;
+        }
+    }
+    async _delete() {
+        if (!this.resolution?.envVarId)
+            return;
+        // 도메인 환경변수 삭제는 확인 없이 즉시 처리.
+        this.busy = true;
+        try {
+            const response = await client.mutate({
+                mutation: gql `
+          mutation ($id: String!) {
+            deleteEnvVar(id: $id)
+          }
+        `,
+                variables: { id: this.resolution.envVarId }
+            });
+            if (response.errors)
+                throw new Error(response.errors.map((e) => e.message).join('\n'));
+            notify({ message: i18next.t('text.deleted-successfully') || '삭제되었습니다' });
+            this.dispatchEvent(new CustomEvent('saved', { bubbles: true, composed: true }));
+        }
+        catch (e) {
+            notify({ level: 'error', message: e.message || String(e) });
+        }
+        finally {
+            this.busy = false;
+        }
+    }
+};
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], EnvVarQuickEditor.prototype, "key_", void 0);
+__decorate([
+    property({ type: Object }),
+    __metadata("design:type", Object)
+], EnvVarQuickEditor.prototype, "propSpec", void 0);
+__decorate([
+    property({ type: Object }),
+    __metadata("design:type", Object)
+], EnvVarQuickEditor.prototype, "resolution", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], EnvVarQuickEditor.prototype, "propLabel", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", String)
+], EnvVarQuickEditor.prototype, "editedValue", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Boolean)
+], EnvVarQuickEditor.prototype, "busy", void 0);
+EnvVarQuickEditor = __decorate([
+    customElement('env-var-quick-editor')
+], EnvVarQuickEditor);
+export { EnvVarQuickEditor };
+//# sourceMappingURL=env-var-quick-editor.js.map

package/dist-client/viewparts/env-var-quick-editor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"env-var-quick-editor.js","sourceRoot":"","sources":["../../client/viewparts/env-var-quick-editor.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/button/filled-button.js'\nimport '@material/web/button/outlined-button.js'\nimport '@material/web/button/text-button.js'\nimport '@material/web/icon/icon.js'\n\nimport gql from 'graphql-tag'\nimport { LitElement, css, html } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { client } from '@operato/graphql'\nimport { notify } from '@operato/layout'\nimport { OxPropertyEditor } from '@operato/property-editor'\nimport { i18next, localize } from '@operato/i18n'\n\ninterface Resolution {\n  key: string\n  status: 'local' | 'inherited' | 'absent'\n  envVarId?: string\n  sourceDomainName?: string\n  value?: string\n  hasValue?: boolean\n}\n\n/**\n * Connection / Step 파라미터 화면에서 useDomainAttribute 속성의 EnvVar 를\n * 한 자리에서 확인·편집·삭제하는 인라인 편집기.\n *\n * 동작:\n *  - 현 도메인에 값이 있으면 update(M) / delete\n *  - 상속만 있는 경우(또는 없는 경우) \"이 도메인에 등록\" (create)\n *  - 부모 값을 덮어쓰면 closest-wins 로 자식 값이 적용됨을 안내\n *\n * 저장/삭제 성공 시 `saved` 이벤트 발생.\n */\n@customElement('env-var-quick-editor')\nexport class EnvVarQuickEditor extends localize(i18next)(LitElement) {\n  static styles = css`\n    :host {\n      display: flex;\n      flex-direction: column;\n      min-width: 460px;\n      max-height: 80vh;\n      padding: 20px 24px;\n      box-sizing: border-box;\n      background: var(--md-sys-color-surface, #fff);\n    }\n\n    h3 {\n      margin: 0 0 4px;\n      font-size: 16px;\n      flex: 0 0 auto;\n    }\n\n    /* 스크롤 가능 본문 — flex column 안에서 actions 위쪽 영역만 흘러내림 */\n    .body {\n      flex: 1 1 auto;\n      overflow: auto;\n      min-height: 0;\n    }\n\n    .key {\n      font-family: var(--md-sys-typescale-body-medium-font-family, monospace);\n      font-size: 12px;\n      color: var(--md-sys-color-on-surface-variant);\n      background: var(--md-sys-color-surface-variant);\n      padding: 4px 8px;\n      border-radius: 6px;\n      display: inline-block;\n      margin-bottom: 16px;\n      word-break: break-all;\n    }\n\n    .status {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      margin-bottom: 14px;\n      font-size: 14px;\n    }\n\n    .status[data-status='local'] {\n      color: var(--md-sys-color-tertiary);\n    }\n    .status[data-status='inherited'] {\n      color: var(--md-sys-color-primary);\n    }\n    .status[data-status='absent'] {\n      color: var(--md-sys-color-error);\n    }\n\n    md-outlined-text-field {\n      width: 100%;\n      margin-bottom: 12px;\n    }\n\n    .actions {\n      display: flex;\n      justify-content: flex-end;\n      gap: 8px;\n      flex: 0 0 auto;\n      padding-top: 12px;\n      margin-top: 4px;\n      border-top: 1px solid var(--md-sys-color-outline-variant, #e0e0e0);\n    }\n\n    .info {\n      font-size: 12px;\n      color: var(--md-sys-color-on-surface-variant);\n      margin-bottom: 12px;\n      line-height: 1.5;\n    }\n\n    .scope {\n      font-size: 12px;\n      line-height: 1.6;\n      padding: 10px 12px;\n      margin-bottom: 14px;\n      border-radius: 8px;\n      background: var(--md-sys-color-surface-container-low, #f5f5f5);\n      border-left: 3px solid var(--md-sys-color-primary, #3457d5);\n    }\n\n    .scope .scope-title {\n      font-weight: 600;\n      color: var(--md-sys-color-on-surface);\n      margin-bottom: 4px;\n      display: flex;\n      align-items: center;\n      gap: 4px;\n    }\n\n    .scope .scope-title md-icon {\n      font-size: 14px;\n      --md-icon-size: 14px;\n    }\n\n    .scope ul {\n      margin: 4px 0 0;\n      padding-left: 18px;\n      color: var(--md-sys-color-on-surface-variant);\n    }\n\n    .scope li {\n      margin-bottom: 2px;\n    }\n\n    .scope code {\n      font-family: var(--md-sys-typescale-body-medium-font-family, monospace);\n      font-size: 11px;\n      background: var(--md-sys-color-surface-variant);\n      padding: 1px 4px;\n      border-radius: 3px;\n    }\n  `\n\n  /** EnvVar 키 (예: `Connection::kiscon-conn::password`) */\n  @property({ type: String }) key_!: string\n\n  /** 속성 사양 (type/secret 여부 표시 등에 사용) */\n  @property({ type: Object }) propSpec: any\n\n  /** 사전 조회한 해소 상태 */\n  @property({ type: Object }) resolution!: Resolution\n\n  /** 표시용 라벨 (속성 이름) */\n  @property({ type: String }) propLabel: string = ''\n\n  @state() private editedValue: string = ''\n  @state() private busy: boolean = false\n\n  connectedCallback() {\n    super.connectedCallback()\n    this.editedValue = this.resolution?.value ?? ''\n  }\n\n  private get isSecret(): boolean {\n    return this.propSpec?.type === 'secret' || /password|secret|token|key$/i.test(this.propLabel || '')\n  }\n\n  /**\n   * 저장 시 영향 범위 (scope) 안내 패널 — 운영자 의사결정 보조.\n   * - absent  : 처음 등록. 자손 트리 전체에 inherit.\n   * - local   : 이미 등록됨. 자손이 inherit (자손에 자기 override 있으면 그것 우선).\n   * - inherited: 상위에서 받고있음. 여기 등록 시 이 도메인 + 자손에만 한정 override.\n   */\n  private _renderScopePanel(isLocal: boolean, isInherited: boolean) {\n    if (isLocal) {\n      return html`\n        <div class=\"scope\">\n          <div class=\"scope-title\">\n            <md-icon>info</md-icon>\n            저장 위치 / 영향 범위\n          </div>\n          이 도메인에 이미 등록된 값이 자손 도메인 전체에 inherit 됩니다 (closest-wins).\n          <ul>\n            <li>여기서 값을 바꾸면 → 이 도메인 + 자손 트리 전체에 즉시 반영</li>\n            <li>특정 자손에 자기 override 가 등록되어 있으면 그쪽은 자기 값 우선</li>\n            <li>\"이 도메인에서 삭제\" → 부모(있다면) 값으로 fallback</li>\n          </ul>\n        </div>\n      `\n    }\n    if (isInherited) {\n      return html`\n        <div class=\"scope\">\n          <div class=\"scope-title\">\n            <md-icon>inventory</md-icon>\n            저장 위치 / 영향 범위\n          </div>\n          현재 <code>${this.resolution.sourceDomainName || '상위 도메인'}</code> 에서 상속된 값을 사용 중입니다.\n          <ul>\n            <li>여기서 등록하면 → 이 도메인 + 그 자손에만 우선 적용 (다른 형제 도메인은 영향 없음)</li>\n            <li>나머지 다른 자손들은 여전히\n              <code>${this.resolution.sourceDomainName || '상위 도메인'}</code> 의 값을 그대로 사용</li>\n          </ul>\n        </div>\n      `\n    }\n    return html`\n      <div class=\"scope\">\n        <div class=\"scope-title\">\n          <md-icon>add_circle</md-icon>\n          저장 위치 / 영향 범위\n        </div>\n        이 도메인에 처음 등록합니다.\n        <ul>\n          <li>저장 후 → 이 도메인 + 자손 트리 전체에서 사용</li>\n          <li>특정 자손이 자기 값을 별도 등록하면 그쪽은 자기 값 우선 (closest-wins)</li>\n          <li>잘못된 도메인에 저장하지 않도록 — 현재 컨텍스트 도메인을 한번 확인하세요</li>\n        </ul>\n      </div>\n    `\n  }\n\n  private get statusLabel(): string {\n    const s = this.resolution?.status\n    if (s === 'local') return `✓ ${i18next.t('text.set-on-this-domain') || '이 도메인에 등록됨'}`\n    if (s === 'inherited')\n      return `🔗 ${i18next.t('text.inherited-from') || '상속'} (${this.resolution.sourceDomainName || '부모 도메인'})`\n    return `⚠ ${i18next.t('text.not-set') || '미설정'}`\n  }\n\n  render() {\n    const isLocal = this.resolution?.status === 'local'\n    const isInherited = this.resolution?.status === 'inherited'\n\n    return html`\n      <h3>${i18next.t('text.domain-attribute') || '도메인 속성'} · ${this.propLabel || this.key_}</h3>\n\n      <div class=\"body\">\n        <div class=\"key\">${this.key_}</div>\n\n        <div class=\"status\" data-status=${this.resolution?.status || 'absent'}>${this.statusLabel}</div>\n\n        ${this._renderScopePanel(isLocal, isInherited)}\n\n        ${this._renderValueInput()}\n      </div>\n\n      <div class=\"actions\">\n        ${isLocal\n          ? html`<md-text-button @click=${this._delete} ?disabled=${this.busy}>\n              ${i18next.t('button.delete-from-this-domain') || '이 도메인에서 삭제'}\n            </md-text-button>`\n          : ''}\n        <md-outlined-button @click=${this._cancel} ?disabled=${this.busy}>\n          ${i18next.t('button.cancel')}\n        </md-outlined-button>\n        <md-filled-button @click=${this._save} ?disabled=${this.busy || !this.editedValue}>\n          ${isLocal ? i18next.t('button.update') || '갱신' : i18next.t('button.set') || '등록'}\n        </md-filled-button>\n      </div>\n    `\n  }\n\n  /**\n   * 입력 control 은 플랫폼의 OxPropertyEditor 레지스트리에서 propSpec.type 에\n   * 등록된 element 를 그대로 사용. parameters builder 가 task params 화면에서\n   * 쓰는 것과 동일한 editor 를 EnvVar 편집기에도 노출 — 일관된 UX, 단일 진실 원천.\n   *\n   * EnvVar 저장 값은 항상 문자열. 비-string 값 (number/boolean/object) 은\n   * 직렬화/역직렬화. select 의 경우 option.value 가 string 이라 자연 동작.\n   */\n  private _renderValueInput() {\n    // host 만 lit-html 로 렌더. 실제 editor element 는 updated() 에서 imperative.\n    // secret 은 OxPropertyEditor 의 password editor 가 부족할 수 있어 별도 처리.\n    if (this.isSecret) {\n      return html`\n        <input\n          part=\"secret-input\"\n          type=\"password\"\n          .value=${this.editedValue}\n          @input=${(e: any) => (this.editedValue = e.target.value)}\n          ?disabled=${this.busy}\n          style=\"width:100%; padding:8px; box-sizing:border-box;\"\n        />\n      `\n    }\n    return html`<div id=\"editor-host\"></div>`\n  }\n\n  private _editorEl: HTMLElement | null = null\n  private _editorChangeBound: ((e: Event) => void) | null = null\n\n  protected updated(changed: Map<string, unknown>) {\n    super.updated?.(changed)\n    if (this.isSecret) return\n    if (changed.has('propSpec') || !this._editorEl) {\n      this._mountEditor()\n    } else if (changed.has('editedValue') && this._editorEl) {\n      // 외부에서 editedValue 변경 시 editor 도 동기화\n      const cur = (this._editorEl as any).value\n      if (cur !== this.editedValue) (this._editorEl as any).value = this.editedValue\n    }\n  }\n\n  private _mountEditor() {\n    const host = this.renderRoot.querySelector('#editor-host') as HTMLElement | null\n    if (!host) return\n    host.replaceChildren()\n    this._cleanupEditorListener()\n\n    const spec = this.propSpec || {}\n    const type = spec.type || 'string'\n    const elementType = OxPropertyEditor.getEditor(type)\n    if (!elementType) {\n      // 등록 editor 없음 — fallback 으로 단순 text input\n      const fallback = document.createElement('input')\n      fallback.type = 'text'\n      fallback.style.cssText = 'width:100%; padding:8px; box-sizing:border-box;'\n      fallback.value = this.editedValue || ''\n      fallback.addEventListener('input', () => (this.editedValue = fallback.value))\n      host.appendChild(fallback)\n      this._editorEl = fallback\n      return\n    }\n\n    const el = document.createElement(elementType) as any\n    el.label = spec.label || i18next.t('field.value')\n    el.type = type\n    el.placeholder = spec.placeholder || ''\n    el.property = spec.property\n    el.editor = spec.editor\n    el.value = this.editedValue || (type === 'checkbox' ? false : '')\n\n    // editor 의 change event 를 받아 editedValue 동기화. EnvVar 는 문자열 저장이라\n    // value 가 boolean/number 면 String() 변환.\n    const onChange = () => {\n      const v = el.value\n      this.editedValue = v == null ? '' : typeof v === 'string' ? v : String(v)\n    }\n    el.addEventListener('change', onChange)\n    this._editorChangeBound = onChange\n    host.appendChild(el)\n    this._editorEl = el\n  }\n\n  private _cleanupEditorListener() {\n    if (this._editorEl && this._editorChangeBound) {\n      this._editorEl.removeEventListener('change', this._editorChangeBound)\n    }\n    this._editorChangeBound = null\n    this._editorEl = null\n  }\n\n  disconnectedCallback() {\n    this._cleanupEditorListener()\n    super.disconnectedCallback()\n  }\n\n  private _cancel() {\n    this.dispatchEvent(new CustomEvent('cancel', { bubbles: true, composed: true }))\n  }\n\n  private async _save() {\n    this.busy = true\n    try {\n      const isUpdate = this.resolution?.status === 'local' && this.resolution?.envVarId\n      const patches = isUpdate\n        ? [{ id: this.resolution.envVarId, cuFlag: 'M', value: this.editedValue, active: true }]\n        : [\n            {\n              cuFlag: '+',\n              name: this.key_,\n              value: this.editedValue,\n              active: true,\n              description: this.propLabel || ''\n            }\n          ]\n\n      const response = await client.mutate({\n        mutation: gql`\n          mutation ($patches: [EnvVarPatch!]!) {\n            updateMultipleEnvVars(patches: $patches) {\n              name\n            }\n          }\n        `,\n        variables: { patches }\n      })\n\n      if (response.errors) throw new Error(response.errors.map((e: any) => e.message).join('\\n'))\n\n      notify({ message: i18next.t('text.saved-successfully') || '저장되었습니다' })\n      this.dispatchEvent(new CustomEvent('saved', { bubbles: true, composed: true }))\n    } catch (e: any) {\n      notify({ level: 'error', message: e.message || String(e) })\n    } finally {\n      this.busy = false\n    }\n  }\n\n  private async _delete() {\n    if (!this.resolution?.envVarId) return\n    // 도메인 환경변수 삭제는 확인 없이 즉시 처리.\n    this.busy = true\n    try {\n      const response = await client.mutate({\n        mutation: gql`\n          mutation ($id: String!) {\n            deleteEnvVar(id: $id)\n          }\n        `,\n        variables: { id: this.resolution.envVarId }\n      })\n\n      if (response.errors) throw new Error(response.errors.map((e: any) => e.message).join('\\n'))\n\n      notify({ message: i18next.t('text.deleted-successfully') || '삭제되었습니다' })\n      this.dispatchEvent(new CustomEvent('saved', { bubbles: true, composed: true }))\n    } catch (e: any) {\n      notify({ level: 'error', message: e.message || String(e) })\n    } finally {\n      this.busy = false\n    }\n  }\n}\n"]}