@things-factory/integration-ui 10.0.0-beta.90 → 10.0.0-beta.95

package/dist-client/viewparts/env-var-action-injector.d.ts

@@ -0,0 +1,38 @@
+import '@material/web/icon/icon.js';
+import './env-var-quick-editor.js';
+import { PropertySpec } from '../types.js';
+export interface EnvVarResolution {
+    key: string;
+    status: 'local' | 'inherited' | 'absent';
+    envVarId?: string;
+    sourceDomainId?: string;
+    sourceDomainName?: string;
+    value?: string;
+    hasValue?: boolean;
+}
+/**
+ * useDomainAttribute 속성의 EnvVar 4-상태 칩 + 인라인 편집기 팝업.
+ * Connection / Step params 화면이 공통으로 사용.
+ */
+export declare function resolveEnvVars(keys: string[]): Promise<Map<string, EnvVarResolution>>;
+/**
+ * actionInjector 팩토리.
+ *
+ * @param keyBuilder  속성 이름을 받아 EnvVar 키를 생성. 예:
+ *                    Connection 화면: `(p) => 'Connection::' + connName + '::' + p`
+ *                    Step    화면: `(p) => 'Step::' + scenarioName + '::' + stepName + '::' + p`
+ * @param resolutions 사전 조회한 해소 상태 맵 (key → resolution)
+ * @param refresh     저장·삭제 후 부모 grist 새로고침 콜백
+ */
+export declare function createEnvVarActionInjector(keyBuilder: (propName: string) => string, resolutions: Map<string, EnvVarResolution>, refresh: () => void): (propName: string, propSpec: PropertySpec) => HTMLElement | null;
+/**
+ * 한 화면(Connection 한 행, Scenario 한 step 셋) 의 진단 라벨.
+ *  - 사용 준비됨 (n/n)         : 모든 useDomainAttribute 속성이 local 또는 inherited
+ *  - 미완성 (m absent / n total): 하나라도 absent
+ */
+export declare function diagnoseReadiness(resolutions: Map<string, EnvVarResolution>, expectedKeys: string[]): {
+    ready: boolean;
+    total: number;
+    absent: number;
+    label: string;
+};

package/dist-client/viewparts/env-var-action-injector.js

@@ -0,0 +1,196 @@
+import '@material/web/icon/icon.js';
+import './env-var-quick-editor.js';
+import gql from 'graphql-tag';
+import { html } from 'lit';
+import { client } from '@operato/graphql';
+import { notify, openPopup } from '@operato/layout';
+import { i18next } from '@operato/i18n';
+/**
+ * useDomainAttribute 속성의 EnvVar 4-상태 칩 + 인라인 편집기 팝업.
+ * Connection / Step params 화면이 공통으로 사용.
+ */
+export async function resolveEnvVars(keys) {
+    const map = new Map();
+    if (!keys || keys.length === 0)
+        return map;
+    try {
+        const response = await client.query({
+            query: gql `
+        query ($keys: [String!]!) {
+          envVarResolutions(keys: $keys) {
+            key
+            status
+            envVarId
+            sourceDomainId
+            sourceDomainName
+            value
+            hasValue
+          }
+        }
+      `,
+            variables: { keys },
+            fetchPolicy: 'network-only'
+        });
+        for (const r of response.data?.envVarResolutions || []) {
+            map.set(r.key, r);
+        }
+    }
+    catch (e) {
+        console.warn('envVarResolutions failed; falling back to absent', e);
+    }
+    return map;
+}
+async function copyToClipboard(text) {
+    try {
+        await navigator.clipboard.writeText(text);
+    }
+    catch {
+        const textArea = document.createElement('textarea');
+        textArea.value = text;
+        document.body.appendChild(textArea);
+        textArea.select();
+        document.execCommand('copy');
+        document.body.removeChild(textArea);
+    }
+}
+function buildStatusChip(key, resolution, onClick, onCopy) {
+    const chip = document.createElement('span');
+    chip.style.cssText = [
+        'display:inline-flex',
+        'align-items:center',
+        'gap:4px',
+        'padding:2px 8px',
+        'font-size:11px',
+        'line-height:1.4',
+        'border-radius:10px',
+        'cursor:pointer',
+        'user-select:none',
+        'border:1px solid'
+    ].join(';');
+    const status = resolution?.status || 'absent';
+    let icon = 'help';
+    let label = '미설정';
+    let fg = '';
+    let bg = '';
+    if (status === 'local') {
+        icon = 'check_circle';
+        label = '이 도메인';
+        fg = 'var(--md-sys-color-on-tertiary-container)';
+        bg = 'var(--md-sys-color-tertiary-container)';
+    }
+    else if (status === 'inherited') {
+        icon = 'inventory';
+        label = `상속${resolution.sourceDomainName ? ' · ' + resolution.sourceDomainName : ''}`;
+        fg = 'var(--md-sys-color-on-primary-container)';
+        bg = 'var(--md-sys-color-primary-container)';
+    }
+    else {
+        icon = 'warning';
+        label = '미설정';
+        fg = 'var(--md-sys-color-on-error-container)';
+        bg = 'var(--md-sys-color-error-container)';
+    }
+    chip.style.color = fg;
+    chip.style.background = bg;
+    chip.style.borderColor = fg;
+    chip.title = `${key} — 클릭: 편집, ⌥ 클릭: 키 복사`;
+    const iconEl = document.createElement('md-icon');
+    iconEl.textContent = icon;
+    iconEl.style.cssText = `font-size:13px; --md-icon-size:13px; color:${fg};`;
+    chip.appendChild(iconEl);
+    const text = document.createElement('span');
+    text.textContent = label;
+    chip.appendChild(text);
+    chip.addEventListener('click', (e) => {
+        if (e.altKey)
+            onCopy();
+        else
+            onClick();
+    });
+    return chip;
+}
+function openEnvVarEditor(key, propName, propSpec, resolution, refresh) {
+    const propLabel = (propSpec.label && i18next.t('label.' + propSpec.label)) || propName;
+    const popup = openPopup(html `
+      <env-var-quick-editor
+        .key_=${key}
+        .propSpec=${propSpec}
+        .resolution=${resolution}
+        .propLabel=${propLabel}
+        @saved=${() => {
+        popup.close?.();
+        refresh();
+    }}
+        @cancel=${() => popup.close?.()}
+      ></env-var-quick-editor>
+    `, {
+        backdrop: true,
+        size: 'small',
+        title: `${propLabel} — ${key}`
+    });
+}
+/**
+ * actionInjector 팩토리.
+ *
+ * @param keyBuilder  속성 이름을 받아 EnvVar 키를 생성. 예:
+ *                    Connection 화면: `(p) => 'Connection::' + connName + '::' + p`
+ *                    Step    화면: `(p) => 'Step::' + scenarioName + '::' + stepName + '::' + p`
+ * @param resolutions 사전 조회한 해소 상태 맵 (key → resolution)
+ * @param refresh     저장·삭제 후 부모 grist 새로고침 콜백
+ */
+export function createEnvVarActionInjector(keyBuilder, resolutions, refresh) {
+    return (propName, propSpec) => {
+        if (!propSpec.useDomainAttribute)
+            return null;
+        const key = keyBuilder(propName);
+        let currentResolution = resolutions.get(key) || { key, status: 'absent' };
+        // 안정 컨테이너 — DOM 상의 위치/참조는 유지하고 내부 chip 만 교체.
+        // chip 직접 replaceWith 시 shadow DOM 경계나 grist 재렌더에 의해
+        // 칩이 사라지는 케이스가 있어 컨테이너로 한 단계 감쌈.
+        const host = document.createElement('span');
+        host.style.cssText = 'display:inline-flex; align-items:center;';
+        const openCopy = () => copyToClipboard(key).then(() => notify({ message: `복사됨: ${key}` }));
+        const renderChip = () => {
+            const chip = buildStatusChip(key, currentResolution, openEdit, openCopy);
+            host.replaceChildren(chip);
+        };
+        // 저장·삭제 후 자기 chip 만 즉시 갱신. 부모 grist 의 fetch 는 호출하지 않는다 —
+        // grist.fetch() 가 parameters 편집기(popover) 자체를 닫아 칩들이 통째로 사라지는
+        // 사고를 막기 위함. 다음 cell edit 저장 시점에 자연스럽게 grid 가 새로고침됨.
+        const onSaved = async () => {
+            try {
+                const updated = await resolveEnvVars([key]);
+                currentResolution = updated.get(key) || { key, status: 'absent' };
+                renderChip();
+            }
+            catch (e) {
+                console.warn('chip 갱신 실패', e);
+            }
+        };
+        const openEdit = () => openEnvVarEditor(key, propName, propSpec, currentResolution, onSaved);
+        renderChip();
+        return host;
+    };
+}
+/**
+ * 한 화면(Connection 한 행, Scenario 한 step 셋) 의 진단 라벨.
+ *  - 사용 준비됨 (n/n)         : 모든 useDomainAttribute 속성이 local 또는 inherited
+ *  - 미완성 (m absent / n total): 하나라도 absent
+ */
+export function diagnoseReadiness(resolutions, expectedKeys) {
+    const total = expectedKeys.length;
+    let absent = 0;
+    for (const k of expectedKeys) {
+        const r = resolutions.get(k);
+        if (!r || r.status === 'absent')
+            absent++;
+    }
+    const ready = absent === 0 && total > 0;
+    const label = total === 0
+        ? '도메인 속성 없음'
+        : ready
+            ? `사용 준비됨 (${total}/${total})`
+            : `미완성 — ${absent} 미설정 / ${total}`;
+    return { ready, total, absent, label };
+}
+//# sourceMappingURL=env-var-action-injector.js.map

package/dist-client/viewparts/env-var-action-injector.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"env-var-action-injector.js","sourceRoot":"","sources":["../../client/viewparts/env-var-action-injector.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\nimport './env-var-quick-editor.js'\n\nimport gql from 'graphql-tag'\nimport { html } from 'lit'\nimport { client } from '@operato/graphql'\nimport { notify, openPopup } from '@operato/layout'\nimport { i18next } from '@operato/i18n'\nimport { PropertySpec } from '../types.js'\n\nexport interface EnvVarResolution {\n  key: string\n  status: 'local' | 'inherited' | 'absent'\n  envVarId?: string\n  sourceDomainId?: string\n  sourceDomainName?: string\n  value?: string\n  hasValue?: boolean\n}\n\n/**\n * useDomainAttribute 속성의 EnvVar 4-상태 칩 + 인라인 편집기 팝업.\n * Connection / Step params 화면이 공통으로 사용.\n */\nexport async function resolveEnvVars(keys: string[]): Promise<Map<string, EnvVarResolution>> {\n  const map = new Map<string, EnvVarResolution>()\n  if (!keys || keys.length === 0) return map\n\n  try {\n    const response = await client.query({\n      query: gql`\n        query ($keys: [String!]!) {\n          envVarResolutions(keys: $keys) {\n            key\n            status\n            envVarId\n            sourceDomainId\n            sourceDomainName\n            value\n            hasValue\n          }\n        }\n      `,\n      variables: { keys },\n      fetchPolicy: 'network-only'\n    })\n    for (const r of response.data?.envVarResolutions || []) {\n      map.set(r.key, r)\n    }\n  } catch (e) {\n    console.warn('envVarResolutions failed; falling back to absent', e)\n  }\n  return map\n}\n\nasync function copyToClipboard(text: string): Promise<void> {\n  try {\n    await navigator.clipboard.writeText(text)\n  } catch {\n    const textArea = document.createElement('textarea')\n    textArea.value = text\n    document.body.appendChild(textArea)\n    textArea.select()\n    document.execCommand('copy')\n    document.body.removeChild(textArea)\n  }\n}\n\nfunction buildStatusChip(\n  key: string,\n  resolution: EnvVarResolution | undefined,\n  onClick: () => void,\n  onCopy: () => void\n): HTMLElement {\n  const chip = document.createElement('span')\n  chip.style.cssText = [\n    'display:inline-flex',\n    'align-items:center',\n    'gap:4px',\n    'padding:2px 8px',\n    'font-size:11px',\n    'line-height:1.4',\n    'border-radius:10px',\n    'cursor:pointer',\n    'user-select:none',\n    'border:1px solid'\n  ].join(';')\n\n  const status = resolution?.status || 'absent'\n  let icon = 'help'\n  let label = '미설정'\n  let fg = ''\n  let bg = ''\n\n  if (status === 'local') {\n    icon = 'check_circle'\n    label = '이 도메인'\n    fg = 'var(--md-sys-color-on-tertiary-container)'\n    bg = 'var(--md-sys-color-tertiary-container)'\n  } else if (status === 'inherited') {\n    icon = 'inventory'\n    label = `상속${resolution!.sourceDomainName ? ' · ' + resolution!.sourceDomainName : ''}`\n    fg = 'var(--md-sys-color-on-primary-container)'\n    bg = 'var(--md-sys-color-primary-container)'\n  } else {\n    icon = 'warning'\n    label = '미설정'\n    fg = 'var(--md-sys-color-on-error-container)'\n    bg = 'var(--md-sys-color-error-container)'\n  }\n\n  chip.style.color = fg\n  chip.style.background = bg\n  chip.style.borderColor = fg\n  chip.title = `${key} — 클릭: 편집, ⌥ 클릭: 키 복사`\n\n  const iconEl = document.createElement('md-icon')\n  iconEl.textContent = icon\n  iconEl.style.cssText = `font-size:13px; --md-icon-size:13px; color:${fg};`\n  chip.appendChild(iconEl)\n\n  const text = document.createElement('span')\n  text.textContent = label\n  chip.appendChild(text)\n\n  chip.addEventListener('click', (e: MouseEvent) => {\n    if (e.altKey) onCopy()\n    else onClick()\n  })\n\n  return chip\n}\n\nfunction openEnvVarEditor(\n  key: string,\n  propName: string,\n  propSpec: PropertySpec,\n  resolution: EnvVarResolution,\n  refresh: () => void\n): void {\n  const propLabel = (propSpec.label && i18next.t('label.' + propSpec.label)) || propName\n\n  const popup = openPopup(\n    html`\n      <env-var-quick-editor\n        .key_=${key}\n        .propSpec=${propSpec}\n        .resolution=${resolution}\n        .propLabel=${propLabel}\n        @saved=${() => {\n          popup.close?.()\n          refresh()\n        }}\n        @cancel=${() => popup.close?.()}\n      ></env-var-quick-editor>\n    `,\n    {\n      backdrop: true,\n      size: 'small',\n      title: `${propLabel} — ${key}`\n    }\n  )\n}\n\n/**\n * actionInjector 팩토리.\n *\n * @param keyBuilder  속성 이름을 받아 EnvVar 키를 생성. 예:\n *                    Connection 화면: `(p) => 'Connection::' + connName + '::' + p`\n *                    Step    화면: `(p) => 'Step::' + scenarioName + '::' + stepName + '::' + p`\n * @param resolutions 사전 조회한 해소 상태 맵 (key → resolution)\n * @param refresh     저장·삭제 후 부모 grist 새로고침 콜백\n */\nexport function createEnvVarActionInjector(\n  keyBuilder: (propName: string) => string,\n  resolutions: Map<string, EnvVarResolution>,\n  refresh: () => void\n): (propName: string, propSpec: PropertySpec) => HTMLElement | null {\n  return (propName, propSpec) => {\n    if (!propSpec.useDomainAttribute) return null\n    const key = keyBuilder(propName)\n    let currentResolution = resolutions.get(key) || { key, status: 'absent' as const }\n\n    // 안정 컨테이너 — DOM 상의 위치/참조는 유지하고 내부 chip 만 교체.\n    // chip 직접 replaceWith 시 shadow DOM 경계나 grist 재렌더에 의해\n    // 칩이 사라지는 케이스가 있어 컨테이너로 한 단계 감쌈.\n    const host = document.createElement('span')\n    host.style.cssText = 'display:inline-flex; align-items:center;'\n\n    const openCopy = () => copyToClipboard(key).then(() => notify({ message: `복사됨: ${key}` }))\n\n    const renderChip = () => {\n      const chip = buildStatusChip(key, currentResolution, openEdit, openCopy)\n      host.replaceChildren(chip)\n    }\n\n    // 저장·삭제 후 자기 chip 만 즉시 갱신. 부모 grist 의 fetch 는 호출하지 않는다 —\n    // grist.fetch() 가 parameters 편집기(popover) 자체를 닫아 칩들이 통째로 사라지는\n    // 사고를 막기 위함. 다음 cell edit 저장 시점에 자연스럽게 grid 가 새로고침됨.\n    const onSaved = async () => {\n      try {\n        const updated = await resolveEnvVars([key])\n        currentResolution = updated.get(key) || { key, status: 'absent' as const }\n        renderChip()\n      } catch (e) {\n        console.warn('chip 갱신 실패', e)\n      }\n    }\n\n    const openEdit = () => openEnvVarEditor(key, propName, propSpec, currentResolution, onSaved)\n\n    renderChip()\n    return host\n  }\n}\n\n/**\n * 한 화면(Connection 한 행, Scenario 한 step 셋) 의 진단 라벨.\n *  - 사용 준비됨 (n/n)         : 모든 useDomainAttribute 속성이 local 또는 inherited\n *  - 미완성 (m absent / n total): 하나라도 absent\n */\nexport function diagnoseReadiness(\n  resolutions: Map<string, EnvVarResolution>,\n  expectedKeys: string[]\n): { ready: boolean; total: number; absent: number; label: string } {\n  const total = expectedKeys.length\n  let absent = 0\n  for (const k of expectedKeys) {\n    const r = resolutions.get(k)\n    if (!r || r.status === 'absent') absent++\n  }\n  const ready = absent === 0 && total > 0\n  const label = total === 0\n    ? '도메인 속성 없음'\n    : ready\n      ? `사용 준비됨 (${total}/${total})`\n      : `미완성 — ${absent} 미설정 / ${total}`\n  return { ready, total, absent, label }\n}\n"]}

package/dist-client/viewparts/env-var-quick-editor.d.ts

@@ -0,0 +1,54 @@
+import '@material/web/button/filled-button.js';
+import '@material/web/button/outlined-button.js';
+import '@material/web/button/text-button.js';
+import '@material/web/textfield/outlined-text-field.js';
+import '@material/web/icon/icon.js';
+import { LitElement } from 'lit';
+interface Resolution {
+    key: string;
+    status: 'local' | 'inherited' | 'absent';
+    envVarId?: string;
+    sourceDomainName?: string;
+    value?: string;
+    hasValue?: boolean;
+}
+declare const EnvVarQuickEditor_base: (new (...args: any[]) => LitElement) & typeof LitElement;
+/**
+ * Connection / Step 파라미터 화면에서 useDomainAttribute 속성의 EnvVar 를
+ * 한 자리에서 확인·편집·삭제하는 인라인 편집기.
+ *
+ * 동작:
+ *  - 현 도메인에 값이 있으면 update(M) / delete
+ *  - 상속만 있는 경우(또는 없는 경우) "이 도메인에 등록" (create)
+ *  - 부모 값을 덮어쓰면 closest-wins 로 자식 값이 적용됨을 안내
+ *
+ * 저장/삭제 성공 시 `saved` 이벤트 발생.
+ */
+export declare class EnvVarQuickEditor extends EnvVarQuickEditor_base {
+    static styles: import("lit").CSSResult;
+    /** EnvVar 키 (예: `Connection::kiscon-conn::password`) */
+    key_: string;
+    /** 속성 사양 (type/secret 여부 표시 등에 사용) */
+    propSpec: any;
+    /** 사전 조회한 해소 상태 */
+    resolution: Resolution;
+    /** 표시용 라벨 (속성 이름) */
+    propLabel: string;
+    private editedValue;
+    private busy;
+    connectedCallback(): void;
+    private get isSecret();
+    /**
+     * 저장 시 영향 범위 (scope) 안내 패널 — 운영자 의사결정 보조.
+     * - absent  : 처음 등록. 자손 트리 전체에 inherit.
+     * - local   : 이미 등록됨. 자손이 inherit (자손에 자기 override 있으면 그것 우선).
+     * - inherited: 상위에서 받고있음. 여기 등록 시 이 도메인 + 자손에만 한정 override.
+     */
+    private _renderScopePanel;
+    private get statusLabel();
+    render(): import("lit-html").TemplateResult<1>;
+    private _cancel;
+    private _save;
+    private _delete;
+}
+export {};

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

@@ -0,0 +1,351 @@
+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/textfield/outlined-text-field.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 { 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;
+    }
+    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)}
+
+        <md-outlined-text-field
+          label=${i18next.t('field.value')}
+          type=${this.isSecret ? 'password' : 'text'}
+          .value=${this.editedValue}
+          @input=${(e) => (this.editedValue = e.target.value)}
+          ?disabled=${this.busy}
+        ></md-outlined-text-field>
+      </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>
+    `;
+    }
+    _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