npm - @operato/app - Versions diffs - 10.8.1 → 10.10.0 - Mend

@operato/app 10.8.1 → 10.10.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (45) hide show

package/dist/src/relation/ox-relation-view.js ADDED Viewed

@@ -0,0 +1,319 @@
+var OxRelationView_1;
+import { __decorate } from "tslib";
+import { LitElement, css, html, svg } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+let OxRelationView = OxRelationView_1 = class OxRelationView extends LitElement {
+    constructor() {
+        super(...arguments);
+        /** 가운데 — 지금 보고 있는 것. */
+        this.center = { id: '' };
+        this.groups = [];
+        /** 이웃이 없는 관계도 그루터기로 남길까. 기본은 **남긴다**(부재가 정보다). */
+        this.hideEmpty = false;
+        /** 선을 그리려면 위치를 재야 한다 — 재고 나서 한 번 더 그린다. */
+        this.edges = [];
+        this.byTense = (a, b) => { var _a, _b, _c, _d; return ((_b = OxRelationView_1.TENSE_ORDER[(_a = a.tense) !== null && _a !== void 0 ? _a : '']) !== null && _b !== void 0 ? _b : 2) - ((_d = OxRelationView_1.TENSE_ORDER[(_c = b.tense) !== null && _c !== void 0 ? _c : '']) !== null && _d !== void 0 ? _d : 2); };
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        /* 폭이 바뀌면 선의 좌표가 통째로 달라진다 — 다시 재지 않으면 선이 노드에서 떨어져 나간다. */
+        this.ro = new ResizeObserver(() => this.measure());
+        this.ro.observe(this);
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.ro) === null || _a === void 0 ? void 0 : _a.disconnect();
+        super.disconnectedCallback();
+    }
+    updated() {
+        this.measure();
+    }
+    /**
+     * 선을 잇는다 — **그린 뒤에 재고, 잰 값이 달라졌을 때만 다시 그린다.**
+     * 조건 없이 상태를 쓰면 `updated` → `measure` → `updated` 로 무한히 반복된다.
+     */
+    measure() {
+        const root = this.renderRoot;
+        const wrap = root.querySelector('.wrap');
+        const centerEl = root.querySelector('.center');
+        if (!wrap || !centerEl)
+            return;
+        /* 세로로 접힌 좁은 화면에서는 선이 뜻을 잃는다 — 그럴 때는 아예 그리지 않는다. */
+        const stacked = getComputedStyle(wrap).gridTemplateColumns.split(' ').length < 3;
+        const base = wrap.getBoundingClientRect();
+        const c = centerEl.getBoundingClientRect();
+        const next = stacked
+            ? []
+            : /*
+               * **노드 줄의 중심에서 자기 부모의 중심으로** 잇는다.
+               *
+               * 그룹 전체(`.grp`)가 아니라 노드 줄(`.row`)을 측정한다. 그룹을 측정하면 위에 얹힌 관계 이름까지
+               * 중심에 들어가 선이 상자보다 위로 치우친다.
+               */
+                /*
+                 * Array.from 을 쓴다 — 이 꾸러미의 tsconfig 는 NodeList 펼치기를 받지 않는다
+                 * (downlevelIteration 없음). 트윈에서 옮겨 오면서 여기서만 걸렸다.
+                 */
+                Array.from(root.querySelectorAll('.grp .row')).map(row => {
+                    var _a;
+                    const g = row.parentElement;
+                    const a = c;
+                    const r = row.getBoundingClientRect();
+                    const isIn = !!g.closest('.col.in');
+                    const gy = r.top - base.top + r.height / 2;
+                    const gx = (isIn ? r.right : r.left) - base.left;
+                    const ax = (isIn ? a.left : a.right) - base.left;
+                    const ay = a.top - base.top + a.height / 2;
+                    return {
+                        x1: isIn ? gx : ax,
+                        y1: isIn ? gy : ay,
+                        x2: isIn ? ax : gx,
+                        y2: isIn ? ay : gy,
+                        label: '',
+                        state: (_a = g.dataset.state) !== null && _a !== void 0 ? _a : 'linked'
+                    };
+                });
+        const same = next.length === this.edges.length && next.every((e, i) => {
+            const p = this.edges[i];
+            return Math.abs(p.x1 - e.x1) < 0.5 && Math.abs(p.y1 - e.y1) < 0.5 && Math.abs(p.x2 - e.x2) < 0.5 && Math.abs(p.y2 - e.y2) < 0.5 && p.state === e.state;
+        });
+        if (!same)
+            this.edges = next;
+    }
+    pick(n) {
+        if (n.reachable === false)
+            return;
+        this.dispatchEvent(new CustomEvent('pick', { detail: n, bubbles: true, composed: true }));
+    }
+    expand(g) {
+        this.dispatchEvent(new CustomEvent('expand', { detail: g, bubbles: true, composed: true }));
+    }
+    render() {
+        var _a, _b;
+        /*
+         * 「비었다」를 감출 때도 **못 푼 것은 남긴다.** 그것은 없다는 뜻이 아니라 답을 못 얻었다는
+         * 뜻이라, 감추면 화면이 「없다」고 말한 것이 된다.
+         */
+        const shown = this.hideEmpty ? this.groups.filter(g => g.nodes.length || g.unresolved) : this.groups;
+        const incoming = shown.filter(g => g.direction === 'in').sort(this.byTense);
+        const outgoing = shown.filter(g => g.direction === 'out').sort(this.byTense);
+        return html `
+      <div class="wrap">
+        <svg class="wires" aria-hidden="true">
+          ${this.edges.map(e => svg `
+            <path d="M${e.x1} ${e.y1} C ${(e.x1 + e.x2) / 2} ${e.y1}, ${(e.x1 + e.x2) / 2} ${e.y2}, ${e.x2} ${e.y2}"
+              fill="none" stroke-width="1.2"
+              stroke=${e.state === 'broken' ? 'var(--ox-rv-warn)' : e.state === 'stub' ? 'var(--ox-rv-line)' : 'var(--ox-rv-accent)'}
+              stroke-dasharray=${e.state === 'stub' ? '3 3' : e.state === 'observed' ? '1 3' : ''}
+              opacity=${e.state === 'stub' ? '0.6' : '0.85'} />`)}
+        </svg>
+        <div class="col in">
+          ${incoming.length ? incoming.map(g => this.renderGroup(g)) : html `<span class="none"></span>`}
+        </div>
+        <div class="center">
+          ${this.center.label && this.center.label !== this.center.id
+            ? html `${this.center.label}<span class="cid">${(_a = this.center.sub) !== null && _a !== void 0 ? _a : this.center.id}</span>`
+            : (_b = this.center.sub) !== null && _b !== void 0 ? _b : this.center.id}
+          ${this.center.kind ? html `<span class="kind">${this.center.kind}</span>` : ''}
+        </div>
+        <div class="col out">
+          ${outgoing.length ? outgoing.map(g => this.renderGroup(g)) : html `<span class="none"></span>`}
+        </div>
+      </div>`;
+    }
+    /** 한 묶음 — 관계 이름과 그 관계로 이어진 노드들. */
+    renderGroup(g) {
+        var _a, _b, _c, _d;
+        const total = (_a = g.total) !== null && _a !== void 0 ? _a : g.nodes.length;
+        const hidden = Math.max(0, total - g.nodes.length);
+        const state = g.nodes.some(n => n.broken)
+            ? 'broken'
+            : !g.nodes.length
+                ? /*
+                   * 수가 있으면 이어져 있는 것이다 — 식별자가 안 왔을 뿐이다. 그루터기(점선)로 그리면
+                   * 선까지 「없음」이라고 말한다.
+                   */
+                    total > 0
+                        ? 'linked'
+                        : /* 선언이 「언제나 있다」고 한 자리가 비었으면 그것은 없음이 아니라 **끊어진 참조**다. */
+                            g.optional === false
+                                ? 'broken'
+                                : 'stub'
+                : g.source === 'observed'
+                    ? 'observed'
+                    : 'linked';
+        return html `
+      <div class="grp" data-state=${state}>
+        <!-- 선언인지 관측인지 밝힌다 — 섞이면 "모델이 그렇게 생겼다" 와 "실제로 그렇게 움직였다"
+             를 구별할 수 없다. 관측분은 근거 범위도 함께 말한다(오류보고없이 자르지 않는다). -->
+        <span class="via ${g.source === 'observed' ? 'obs' : ''}" title=${(_b = g.basis) !== null && _b !== void 0 ? _b : ''}
+          >${g.via}${g.basis ? html ` <span class="basis">${g.basis}</span>` : ''}${g.tenseLabel
+            ? html ` <span class="tense" data-t=${(_c = g.tense) !== null && _c !== void 0 ? _c : ''}>${g.tenseLabel}</span>`
+            : ''}</span
+        >
+        <div class="row">
+          ${g.nodes.length
+            ? html `
+                ${g.nodes.map(n => this.renderNode(n))}
+                ${hidden ? html `<button class="more" @click=${() => this.expand(g)}>+${hidden}</button>` : ''}`
+            : total > 0
+                ? /*
+                   * ── 수는 있는데 **하나하나가 안 온 것** ──────────────────────
+                   * 보내는 쪽이 일부러 식별자를 안 보내는 관계가 있다(설비 상태 구간처럼 사람이 하나를
+                   * 골라 갈 대상이 아닌 것). `ids` 만 보고 그리면 6건이 0건으로 보인다 — 화면이
+                   * 없는 사실을 말하게 된다. **수를 믿고 목록으로 넘긴다.**
+                   */
+                    html `<button class="more" @click=${() => this.expand(g)}>${total}</button>`
+                : g.unresolved
+                    ? /*
+                       * 못 풀었다. **「없다」로 그리지 않는다** — 사람이 할 일이 다르다(앞은 자료를 채울
+                       * 일, 뒤는 푸는 쪽을 꽂을 일).
+                       */
+                        html `<span class="node unknown" title=${(_d = g.unresolvedNote) !== null && _d !== void 0 ? _d : g.unresolved}>?</span>`
+                    : /* 이웃이 없다 — 선언은 있다. 선택 관계인지에 따라 다르게 읽힌다. */
+                        html `<span class="node stub ${g.optional ? '' : 'req'}">${g.optional ? '—' : '∅'}</span>`}
+        </div>
+      </div>`;
+    }
+    /**
+     * 노드 하나.
+     *
+     * **제자리에서 더 펼치지 않는다.** 한때 노드마다 자기 이웃을 오른쪽에 이어 그리게 했는데,
+     * 양방향 그래프에서는 자식이 거의 언제나 부모를 도로 보여 준다 — 같은 id 가 사방에 되풀이되고
+     * 그림이 아니라 털뭉치가 된다. 깊이는 **걸어서** 간다(노드를 누르면 그것이 가운데가 된다).
+     * 한 방향으로 여러 단을 봐야 하는 것(BOM 전개)은 되돌아오는 선이 없는 **다른 읽기**다.
+     */
+    renderNode(n) {
+        var _a, _b;
+        /*
+         * **이름이 중심이다.** id 만 그리면 그림이 `cutter-op` · `cut-station` 으로 채워져, 관계는
+         * 보이는데 무엇과 무엇의 관계인지는 안 보인다. 이름이 있으면 이름을 앞에 세운다.
+         *
+         * 그래도 id 를 지우지 않는다 — 걷는 손잡이이고, 같은 이름을 가진 것이 둘일 때 구별하는 유일한
+         * 값이다. 작게 아래에 둔다(이름이 없으면 id 하나만 남는다).
+         */
+        const named = !!n.label && n.label !== n.id;
+        return html `
+      <button class="node ${n.reachable === false ? 'flat' : ''} ${n.broken ? 'broken' : ''}"
+        ?disabled=${n.reachable === false} title=${n.id} @click=${() => this.pick(n)}
+        >${named ? html `${n.label}<span class="nid">${(_a = n.sub) !== null && _a !== void 0 ? _a : n.id}</span>` : ((_b = n.sub) !== null && _b !== void 0 ? _b : n.id)}</button>`;
+    }
+};
+OxRelationView.styles = css `
+    :host { display: block; position: relative; --ox-rv-line: var(--line, #d5dce0); --ox-rv-ink: var(--ink, #17242c);
+            --ox-rv-muted: var(--muted, #57676f); --ox-rv-faint: var(--faint, #8a959c);
+            --ox-rv-accent: var(--accent, #0d8f86); --ox-rv-warn: var(--warn, #c60); --ox-rv-panel: var(--panel, #fff); }
+    /*
+     * 라벨 자리는 **바깥 여백**으로 낸다.
+     *
+     * 열에 위쪽 여백을 주면 열 상자만 아래로 밀린다 — 가운데 정렬은 상자를 맞추므로
+     * 내용은 그 절반만큼 내려가고, 묶음이 하나뿐일 때도 선이 그만큼 휜다. 여백을 컨테이너에 주면
+     * 가운데 노드와 열이 **같이** 밀려 상대 정렬이 그대로 남는다.
+     */
+    .wrap { position: relative; display: grid; grid-template-columns: 1fr auto 1fr; gap: 26px; align-items: center; padding-top: 15px; }
+    /* 좁으면 세로로 배치한다. 그렇게 되면 선이 뜻을 잃으므로 그때는 선을 그리지 않는다. */
+    @media (max-width: 720px) { .wrap { grid-template-columns: 1fr; gap: 10px; } }
+    svg.wires { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
+    svg.wires text { font-family: var(--mono, monospace); font-size: 9.5px; fill: var(--ox-rv-faint); }
+    .col { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
+    .col.in { align-items: flex-end; text-align: right; }
+    .col.out { align-items: flex-start; }
+    /*
+     * 묶음의 높이 = **노드 줄의 높이.** 관계 이름은 아이템 위에 얹힌 장식이지 레이아웃 참여자가
+     * 아니다. 일반 배치에 두면 그룹의 중심이 라벨만큼 내려가고, 그만큼 선이 휘어 노드에 비스듬히 닿는다
+     * — 선을 잘 휘게 만들 일이 아니라 애초에 같은 높이에 두어야 하는 일이다.
+     */
+    .grp { position: relative; display: flex; max-width: 100%; }
+    .grp .via {
+      position: absolute; bottom: calc(100% + 2px); white-space: nowrap;
+      font-family: var(--mono, monospace); font-size: 9.5px; color: var(--ox-rv-faint); letter-spacing: .03em;
+    }
+    .col.in .grp .via { right: 0; }
+    .col.out .grp .via { left: 0; }
+    /* 관측에서 온 이어짐 — 선언과 같은 모양으로 두면 모델이 그렇게 생긴 줄로 읽힌다. */
+    .grp .via.obs::before { content: '◦ '; color: var(--ox-rv-accent); }
+    .grp .via .basis { opacity: .75; font-style: italic; }
+    .grp .row { display: flex; flex-wrap: wrap; gap: 4px; }
+    .col.in .grp .row { justify-content: flex-end; }
+    /*
+     * 칩 **안의 글은 왼쪽으로** (2026-08-25 · 사용자 지시). 칩 상자의 자리는 묶음이 정하고(들어오는
+     * 쪽은 오른쪽에 붙는다) 그것은 그대로 둔다 — 상자 안에서 이름과 코드가 같은 자리에서 시작해야
+     * 여러 줄을 눈으로 훑을 수 있다.
+     */
+    .node {
+      border: 1px solid var(--ox-rv-line); border-radius: 7px; background: var(--ox-rv-panel);
+      padding: 3px 9px; font-size: 11.5px; color: var(--ox-rv-accent); cursor: pointer; max-width: 220px;
+      overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left;
+    }
+    .node:hover { border-color: var(--ox-rv-accent); }
+    /* 갈 곳이 없는 값 — 문처럼 보이지 않는다. */
+    .node.flat { color: var(--ox-rv-muted); border-style: dashed; cursor: default; }
+    .node.broken { color: var(--ox-rv-warn); border-color: color-mix(in oklab, var(--ox-rv-warn), transparent 45%); }
+    /* 선언은 있는데 이웃이 없다 — 그루터기. */
+    .node.stub { color: var(--ox-rv-faint); border-style: dotted; cursor: default; font-style: italic; }
+    .node.stub.req { color: var(--ox-rv-warn); border-color: color-mix(in oklab, var(--ox-rv-warn), transparent 55%); }
+    /* 못 푼 것 — 비어 있는 것과 **다르게** 보여야 한다. 물음표는 「모른다」이지 「없다」가 아니다. */
+    .node.unknown { color: var(--ox-rv-muted); border-style: dashed; border-color: var(--ox-rv-muted); cursor: help; font-style: normal; }
+    /* 때 표식 — 관계 이름 옆에 붙는 작은 말. 지난 일은 흐리게, 앞의 일은 눈에 걸리게. */
+    .grp .via .tense { font-style: normal; letter-spacing: 0; padding: 0 3px; border-radius: 3px; }
+    .grp .via .tense[data-t='past'] { color: var(--ox-rv-faint); }
+    .grp .via .tense[data-t='future'] { color: var(--ox-rv-warn); }
+    .grp .via .tense[data-t='current'] { color: var(--ox-rv-accent); }
+    .grp .via .tense[data-t='standing'] { color: var(--ox-rv-muted); }
+    .more { border: 0; background: transparent; color: var(--ox-rv-accent); font-size: 11px; cursor: pointer; padding: 3px 4px; }
+    .center {
+      border: 1.6px solid var(--ox-rv-accent); border-radius: 9px; padding: 7px 13px;
+      background: color-mix(in oklab, var(--ox-rv-accent), transparent 92%);
+      font-weight: 700; font-size: 13px; color: var(--ox-rv-ink); text-align: center; white-space: nowrap;
+    }
+    .center .kind { display: block; font-family: var(--mono, monospace); font-weight: 400; font-size: 9.5px; color: var(--ox-rv-faint); }
+    /* id 는 이름 아래 작게 — 손잡이이자 동명이인을 구분하는 값이라 지우지 않는다. */
+    .center .cid { display: block; font-family: var(--mono, monospace); font-weight: 400; font-size: 10px; color: var(--ox-rv-muted); }
+    /*
+     * 식별자 줄은 **왼쪽으로 붙인다** (2026-08-25 · 사용자 지시).
+     *
+     * 이름은 길이가 저마다여서 가운데로 두면 아래의 코드가 줄마다 다른 자리에서 시작한다 — 코드는
+     * 눈으로 훑어 대조하는 값이라 시작 자리가 같아야 읽힌다. 이름은 그대로 두고 코드만 붙인다.
+     */
+    .node .nid { display: block; text-align: left; font-family: var(--mono, monospace); font-size: 9.5px; color: var(--ox-rv-faint); }
+    .center .cid { text-align: left; }
+    .none { font-size: 11.5px; color: var(--ox-rv-faint); }
+  `;
+/**
+ * 때 순서 — **아직 걸릴 수 있는 것이 위**다.
+ *
+ * 들어오는 묶음이 여럿일 때 눈이 먼저 닿는 자리에 「앞으로 걸리는 것」을 둔다. 지난 일은 무엇을
+ * 해도 안 바뀌므로 아래다. 때를 말하지 않은 것(선언이 줄마다 다르다고 남겨 둔 것)은 가운데에
+ * 둔다 — 「없다」가 아니라 「봐야 안다」이므로 지난 일보다 앞이다.
+ */
+OxRelationView.TENSE_ORDER = { future: 0, current: 1, standing: 3, past: 4 };
+__decorate([
+    property({ attribute: false })
+], OxRelationView.prototype, "center", void 0);
+__decorate([
+    property({ attribute: false })
+], OxRelationView.prototype, "groups", void 0);
+__decorate([
+    property({ type: Boolean })
+], OxRelationView.prototype, "hideEmpty", void 0);
+__decorate([
+    state()
+], OxRelationView.prototype, "edges", void 0);
+OxRelationView = OxRelationView_1 = __decorate([
+    customElement('ox-relation-view')
+], OxRelationView);
+export { OxRelationView };
+//# sourceMappingURL=ox-relation-view.js.map

package/dist/src/relation/ox-relation-view.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"ox-relation-view.js","sourceRoot":"","sources":["../../../src/relation/ox-relation-view.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, css, html, svg, type TemplateResult } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\n/*\n * vocabulary-guard: allow-file — 이 부품의 `node` 는 **그래프의 정점**이고 트윈의 자리가 아니다.\n * 도메인을 모르는 범용 부품이라 자리·설비라는 용어가 여기 있으면 오히려 틀린다.\n *\n * <ox-relation-view> — **한 항목이 무엇과 얽혀 있나**를 한 장으로 보이는 범용 부품.\n *\n * ── 왜 목록이 아니라 그림인가 ──────────────────────────────────────────────────\n * 칩 목록은 \"무엇이 있나\" 는 답해도 \"어떻게 얽혀 있나\" 는 답하지 못한다. 방향(내가 가리키나,\n * 나를 가리키나)과 관계의 이름이 같은 줄에 섞여 있으면 눈이 그것을 구조로 읽지 못한다.\n * 들어오는 것은 왼쪽, 나가는 것은 오른쪽, 가운데가 나 — 이 배치 하나로 방향이 위치가 된다.\n *\n * ── 이 부품이 도메인을 모른다 ──────────────────────────────────────────────────\n * 축·관계 이름을 알지 않는다. 받는 것은 **일반화된 그래프 조각**(중심 + 방향별 관계 묶음)이고,\n * 무엇을 넣을지는 부르는 쪽이 정한다. 그래서 트윈 인스펙션·런타임 포커스·모델러·AI 답변이\n * 같은 부품을 쓸 수 있고, 관계를 말하는 어휘가 화면마다 나뉘지 않는다.\n *\n * ── 스스로 읽지 않는다 ─────────────────────────────────────────────────────────\n * 질의를 하지 않는다. 데이터를 받고 그리고 **고른 것을 알린다**(`pick`). 안에서 읽기 시작하면\n * 그 순간 특정 서버 계약에 묶여 다른 화면이 못 쓴다.\n *\n * ── 부재를 그린다 ──────────────────────────────────────────────────────────────\n * 이웃이 없는 관계도 **점선 그루터기**로 남긴다. 관계에서 가장 중요한 정보는 대개 부재이고,\n * 없는 것을 안 그리면 \"이 항목은 자리에 안 놓여 있다\" 는 사실이 화면에서 사라진다.\n *\n * ── 규모 ───────────────────────────────────────────────────────────────────────\n * 방향·관계마다 상한을 두고 넘치면 **몇이 남았는지 말한다**. 3만 노드를 한 장에 뿌리지 않는다 —\n * 그건 미루는 일이 아니라 하지 않기로 정하는 일이다. 넘친 것은 `expand` 로 목록에 넘긴다.\n */\n\n/** 그릴 수 있는 노드 하나. `reachable=false` 면 갈 곳이 없다 — 문처럼 보이지 않게 그린다. */\nexport interface RelationNode {\n id: string\n label?: string\n /**\n * 식별자 자리에 **대신 보일 말** — 없으면 `id` 를 보인다.\n *\n * 정체성은 긴 URI 일 수 있지만(`https://…/class/product-B0000080-lot-L26…`) 사람이 대조하는 것은\n * 원본의 코드다. 부르는 쪽이 그 말을 알고 있으므로 여기서 만들지 않고 받는다 — 이 부품은 뜻을\n * 모른 채 자리만 내준다. 전체 식별자는 도구설명에 그대로 남는다(복사·추적의 키다).\n */\n sub?: string\n /** 이 노드가 속한 갈래(축·종류). 부르는 쪽의 어휘 그대로 — 이 부품은 뜻을 알지 않는다. */\n kind?: string\n /**\n * 걸어갈 수 있나. **막다른 링크는 없는 링크보다 나쁘다** — 눌렀는데 아무 일도 안 일어나면\n * 사용자는 그것을 고장으로 받아들인다. 갈 수 없으면 처음부터 문처럼 보이지 않아야 한다.\n */\n reachable?: boolean\n /** 이 이웃이 실제로는 없는 것을 가리킨다(끊어진 참조). 눈에 띄어야 한다. */\n broken?: boolean\n}\n\n/** 한 관계 묶음 — \"무슨 관계로\" + \"어느 방향으로\" 이어진 이웃들. */\nexport interface RelationGroup {\n /** 관계 이름(이미 번역된 표시명). 선 위에 적힌다. */\n via: string\n /** `out` = 내가 가리킨다 · `in` = 나를 가리킨다. */\n direction: 'out' | 'in'\n nodes: RelationNode[]\n /** 전체 건수(상한에 걸려 일부만 왔을 수 있다). 없으면 `nodes.length`. */\n total?: number\n /** 선언은 되어 있는데 이웃이 없다 — 그루터기로 그린다. */\n empty?: boolean\n /** 이 관계가 선택인가 — 비어 있음이 결손인지 정상인지 구분한다. */\n optional?: boolean\n /**\n * 이 이어짐을 **어디서 알았나.**\n *\n * `declared` — 원본이 선언한 관계다(모델이 그렇게 생겼다).\n * `observed` — 이벤트에서 함께 나타났다(실제로 그렇게 움직였다).\n *\n * 둘은 다른 사실이고 섞으면 안 된다. 선언에 없는 이어짐을 선언인 것처럼 그리면 사용자는\n * 모델이 그렇게 되어 있다고 믿게 되고, 반대로 관측된 동반을 안 그리면 실제로 함께 움직이는\n * 것을 놓친다. 그래서 **둘 다 그리되 구별해서** 그린다.\n */\n source?: 'declared' | 'observed'\n /** 관측에서 온 것이면 **어느 범위를 보고 말하는가**(예: 최근 이력 50건). 오류보고없이 자르지 않는다. */\n basis?: string\n /**\n * **아무도 답할 수 없었다** — 「그런 이웃이 없다」와 전혀 다른 사실이다.\n *\n * 비었다는 것은 자료를 채우면 되는 일이고, 못 풀었다는 것은 푸는 쪽을 꽂아야 하는 일이다.\n * 둘을 같은 「—」로 그리면 사람이 엉뚱한 데를 고치러 간다. 값은 부르는 쪽의 말 그대로 받고,\n * 사람이 읽을 문장은 `unresolvedNote` 로 함께 받는다(이 부품은 뜻을 모른다).\n */\n unresolved?: string\n unresolvedNote?: string\n /**\n * 이 이어짐이 **어느 때의 사실인가.**\n *\n * past 이미 일어났다 — 지금 무엇을 해도 안 바뀐다(실적 · 지난 구간)\n * future 아직이다 — 지금 손대면 이것이 걸린다(계획 · 지시)\n * standing 때가 없는 사실(등급 · 종류 · 붙박인 자리)\n * current 지금 그렇고 곧 바뀐다(지금 있는 자리)\n * (없음) **선언이 말하지 않았다.** 줄마다 다르다는 뜻일 수 있다 — 「때가 없다」가 아니다\n *\n * 이것이 왜 한 묶음에 섞이면 안 되나: 설비 하나에 걸린 열 건 중 아홉이 지난 일인 경우와 아홉이\n * 앞의 일인 경우는 **「이 설비를 세워도 되나」의 답이 정반대**다. 세어서 열이라고만 하면 그 답이\n * 화면에서 사라진다.\n *\n * ── 이 값으로 **캐시 여부를 판단하지 않는다** ────────────────────────────\n * 「어느 때가 다시 물어야 하는가」는 계약이 정한다(`isCacheableTense`). 같은 규칙을 화면에도\n * 두면 값이 하나 늘 때 한쪽만 따라간다. 이 부품은 때를 **보여 주기만** 하고, 다시 읽을지는\n * 부르는 쪽이 계약에 물어 정한다.\n */\n tense?: 'past' | 'future' | 'standing' | 'current'\n /** 위 시각을 사람의 말로. 없으면 표식을 그리지 않는다. 이 부품은 문구를 만들지 않는다. */\n tenseLabel?: string\n}\n\n@customElement('ox-relation-view')\nexport class OxRelationView extends LitElement {\n /** 가운데 — 지금 보고 있는 것. */\n @property({ attribute: false }) center: RelationNode = { id: '' }\n @property({ attribute: false }) groups: RelationGroup[] = []\n /** 이웃이 없는 관계도 그루터기로 남길까. 기본은 **남긴다**(부재가 정보다). */\n @property({ type: Boolean }) hideEmpty = false\n\n /** 선을 그리려면 위치를 재야 한다 — 재고 나서 한 번 더 그린다. */\n @state() private edges: { x1: number; y1: number; x2: number; y2: number; label: string; state: string }[] = []\n\n private ro?: ResizeObserver\n\n static styles = css`\n :host { display: block; position: relative; --ox-rv-line: var(--line, #d5dce0); --ox-rv-ink: var(--ink, #17242c);\n --ox-rv-muted: var(--muted, #57676f); --ox-rv-faint: var(--faint, #8a959c);\n --ox-rv-accent: var(--accent, #0d8f86); --ox-rv-warn: var(--warn, #c60); --ox-rv-panel: var(--panel, #fff); }\n\n /*\n * 라벨 자리는 **바깥 여백**으로 낸다.\n *\n * 열에 위쪽 여백을 주면 열 상자만 아래로 밀린다 — 가운데 정렬은 상자를 맞추므로\n * 내용은 그 절반만큼 내려가고, 묶음이 하나뿐일 때도 선이 그만큼 휜다. 여백을 컨테이너에 주면\n * 가운데 노드와 열이 **같이** 밀려 상대 정렬이 그대로 남는다.\n */\n .wrap { position: relative; display: grid; grid-template-columns: 1fr auto 1fr; gap: 26px; align-items: center; padding-top: 15px; }\n /* 좁으면 세로로 배치한다. 그렇게 되면 선이 뜻을 잃으므로 그때는 선을 그리지 않는다. */\n @media (max-width: 720px) { .wrap { grid-template-columns: 1fr; gap: 10px; } }\n\n svg.wires { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }\n svg.wires text { font-family: var(--mono, monospace); font-size: 9.5px; fill: var(--ox-rv-faint); }\n\n .col { display: flex; flex-direction: column; gap: 18px; min-width: 0; }\n .col.in { align-items: flex-end; text-align: right; }\n .col.out { align-items: flex-start; }\n\n /*\n * 묶음의 높이 = **노드 줄의 높이.** 관계 이름은 아이템 위에 얹힌 장식이지 레이아웃 참여자가\n * 아니다. 일반 배치에 두면 그룹의 중심이 라벨만큼 내려가고, 그만큼 선이 휘어 노드에 비스듬히 닿는다\n * — 선을 잘 휘게 만들 일이 아니라 애초에 같은 높이에 두어야 하는 일이다.\n */\n .grp { position: relative; display: flex; max-width: 100%; }\n .grp .via {\n position: absolute; bottom: calc(100% + 2px); white-space: nowrap;\n font-family: var(--mono, monospace); font-size: 9.5px; color: var(--ox-rv-faint); letter-spacing: .03em;\n }\n .col.in .grp .via { right: 0; }\n .col.out .grp .via { left: 0; }\n /* 관측에서 온 이어짐 — 선언과 같은 모양으로 두면 모델이 그렇게 생긴 줄로 읽힌다. */\n .grp .via.obs::before { content: '◦ '; color: var(--ox-rv-accent); }\n .grp .via .basis { opacity: .75; font-style: italic; }\n .grp .row { display: flex; flex-wrap: wrap; gap: 4px; }\n .col.in .grp .row { justify-content: flex-end; }\n\n /*\n * 칩 **안의 글은 왼쪽으로** (2026-08-25 · 사용자 지시). 칩 상자의 자리는 묶음이 정하고(들어오는\n * 쪽은 오른쪽에 붙는다) 그것은 그대로 둔다 — 상자 안에서 이름과 코드가 같은 자리에서 시작해야\n * 여러 줄을 눈으로 훑을 수 있다.\n */\n .node {\n border: 1px solid var(--ox-rv-line); border-radius: 7px; background: var(--ox-rv-panel);\n padding: 3px 9px; font-size: 11.5px; color: var(--ox-rv-accent); cursor: pointer; max-width: 220px;\n overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left;\n }\n .node:hover { border-color: var(--ox-rv-accent); }\n /* 갈 곳이 없는 값 — 문처럼 보이지 않는다. */\n .node.flat { color: var(--ox-rv-muted); border-style: dashed; cursor: default; }\n .node.broken { color: var(--ox-rv-warn); border-color: color-mix(in oklab, var(--ox-rv-warn), transparent 45%); }\n /* 선언은 있는데 이웃이 없다 — 그루터기. */\n .node.stub { color: var(--ox-rv-faint); border-style: dotted; cursor: default; font-style: italic; }\n .node.stub.req { color: var(--ox-rv-warn); border-color: color-mix(in oklab, var(--ox-rv-warn), transparent 55%); }\n\n /* 못 푼 것 — 비어 있는 것과 **다르게** 보여야 한다. 물음표는 「모른다」이지 「없다」가 아니다. */\n .node.unknown { color: var(--ox-rv-muted); border-style: dashed; border-color: var(--ox-rv-muted); cursor: help; font-style: normal; }\n\n /* 때 표식 — 관계 이름 옆에 붙는 작은 말. 지난 일은 흐리게, 앞의 일은 눈에 걸리게. */\n .grp .via .tense { font-style: normal; letter-spacing: 0; padding: 0 3px; border-radius: 3px; }\n .grp .via .tense[data-t='past'] { color: var(--ox-rv-faint); }\n .grp .via .tense[data-t='future'] { color: var(--ox-rv-warn); }\n .grp .via .tense[data-t='current'] { color: var(--ox-rv-accent); }\n .grp .via .tense[data-t='standing'] { color: var(--ox-rv-muted); }\n\n .more { border: 0; background: transparent; color: var(--ox-rv-accent); font-size: 11px; cursor: pointer; padding: 3px 4px; }\n\n\n .center {\n border: 1.6px solid var(--ox-rv-accent); border-radius: 9px; padding: 7px 13px;\n background: color-mix(in oklab, var(--ox-rv-accent), transparent 92%);\n font-weight: 700; font-size: 13px; color: var(--ox-rv-ink); text-align: center; white-space: nowrap;\n }\n .center .kind { display: block; font-family: var(--mono, monospace); font-weight: 400; font-size: 9.5px; color: var(--ox-rv-faint); }\n /* id 는 이름 아래 작게 — 손잡이이자 동명이인을 구분하는 값이라 지우지 않는다. */\n .center .cid { display: block; font-family: var(--mono, monospace); font-weight: 400; font-size: 10px; color: var(--ox-rv-muted); }\n /*\n * 식별자 줄은 **왼쪽으로 붙인다** (2026-08-25 · 사용자 지시).\n *\n * 이름은 길이가 저마다여서 가운데로 두면 아래의 코드가 줄마다 다른 자리에서 시작한다 — 코드는\n * 눈으로 훑어 대조하는 값이라 시작 자리가 같아야 읽힌다. 이름은 그대로 두고 코드만 붙인다.\n */\n .node .nid { display: block; text-align: left; font-family: var(--mono, monospace); font-size: 9.5px; color: var(--ox-rv-faint); }\n .center .cid { text-align: left; }\n .none { font-size: 11.5px; color: var(--ox-rv-faint); }\n `\n\n connectedCallback(): void {\n super.connectedCallback()\n /* 폭이 바뀌면 선의 좌표가 통째로 달라진다 — 다시 재지 않으면 선이 노드에서 떨어져 나간다. */\n this.ro = new ResizeObserver(() => this.measure())\n this.ro.observe(this)\n }\n\n disconnectedCallback(): void {\n this.ro?.disconnect()\n super.disconnectedCallback()\n }\n\n protected updated(): void {\n this.measure()\n }\n\n /**\n * 선을 잇는다 — **그린 뒤에 재고, 잰 값이 달라졌을 때만 다시 그린다.**\n * 조건 없이 상태를 쓰면 `updated` → `measure` → `updated` 로 무한히 반복된다.\n */\n private measure(): void {\n const root = this.renderRoot as ShadowRoot\n const wrap = root.querySelector('.wrap') as HTMLElement | null\n const centerEl = root.querySelector('.center') as HTMLElement | null\n if (!wrap || !centerEl) return\n\n /* 세로로 접힌 좁은 화면에서는 선이 뜻을 잃는다 — 그럴 때는 아예 그리지 않는다. */\n const stacked = getComputedStyle(wrap).gridTemplateColumns.split(' ').length < 3\n const base = wrap.getBoundingClientRect()\n const c = centerEl.getBoundingClientRect()\n\n const next = stacked\n ? []\n : /*\n * **노드 줄의 중심에서 자기 부모의 중심으로** 잇는다.\n *\n * 그룹 전체(`.grp`)가 아니라 노드 줄(`.row`)을 측정한다. 그룹을 측정하면 위에 얹힌 관계 이름까지\n * 중심에 들어가 선이 상자보다 위로 치우친다.\n */\n /*\n * Array.from 을 쓴다 — 이 꾸러미의 tsconfig 는 NodeList 펼치기를 받지 않는다\n * (downlevelIteration 없음). 트윈에서 옮겨 오면서 여기서만 걸렸다.\n */\n Array.from(root.querySelectorAll<HTMLElement>('.grp .row')).map(row => {\n const g = row.parentElement as HTMLElement\n const a = c\n const r = row.getBoundingClientRect()\n const isIn = !!g.closest('.col.in')\n const gy = r.top - base.top + r.height / 2\n const gx = (isIn ? r.right : r.left) - base.left\n const ax = (isIn ? a.left : a.right) - base.left\n const ay = a.top - base.top + a.height / 2\n return {\n x1: isIn ? gx : ax,\n y1: isIn ? gy : ay,\n x2: isIn ? ax : gx,\n y2: isIn ? ay : gy,\n label: '',\n state: g.dataset.state ?? 'linked'\n }\n })\n\n const same = next.length === this.edges.length && next.every((e, i) => {\n const p = this.edges[i]\n return Math.abs(p.x1 - e.x1) < 0.5 && Math.abs(p.y1 - e.y1) < 0.5 && Math.abs(p.x2 - e.x2) < 0.5 && Math.abs(p.y2 - e.y2) < 0.5 && p.state === e.state\n })\n if (!same) this.edges = next\n }\n\n private pick(n: RelationNode): void {\n if (n.reachable === false) return\n this.dispatchEvent(new CustomEvent('pick', { detail: n, bubbles: true, composed: true }))\n }\n\n private expand(g: RelationGroup): void {\n this.dispatchEvent(new CustomEvent('expand', { detail: g, bubbles: true, composed: true }))\n }\n\n /**\n * 때 순서 — **아직 걸릴 수 있는 것이 위**다.\n *\n * 들어오는 묶음이 여럿일 때 눈이 먼저 닿는 자리에 「앞으로 걸리는 것」을 둔다. 지난 일은 무엇을\n * 해도 안 바뀌므로 아래다. 때를 말하지 않은 것(선언이 줄마다 다르다고 남겨 둔 것)은 가운데에\n * 둔다 — 「없다」가 아니라 「봐야 안다」이므로 지난 일보다 앞이다.\n */\n private static readonly TENSE_ORDER: Record<string, number> = { future: 0, current: 1, standing: 3, past: 4 }\n\n private byTense = (a: RelationGroup, b: RelationGroup) =>\n (OxRelationView.TENSE_ORDER[a.tense ?? ''] ?? 2) - (OxRelationView.TENSE_ORDER[b.tense ?? ''] ?? 2)\n\n render(): TemplateResult {\n /*\n * 「비었다」를 감출 때도 **못 푼 것은 남긴다.** 그것은 없다는 뜻이 아니라 답을 못 얻었다는\n * 뜻이라, 감추면 화면이 「없다」고 말한 것이 된다.\n */\n const shown = this.hideEmpty ? this.groups.filter(g => g.nodes.length || g.unresolved) : this.groups\n const incoming = shown.filter(g => g.direction === 'in').sort(this.byTense)\n const outgoing = shown.filter(g => g.direction === 'out').sort(this.byTense)\n\n return html`\n <div class=\"wrap\">\n <svg class=\"wires\" aria-hidden=\"true\">\n ${this.edges.map(e => svg`\n <path d=\"M${e.x1} ${e.y1} C ${(e.x1 + e.x2) / 2} ${e.y1}, ${(e.x1 + e.x2) / 2} ${e.y2}, ${e.x2} ${e.y2}\"\n fill=\"none\" stroke-width=\"1.2\"\n stroke=${e.state === 'broken' ? 'var(--ox-rv-warn)' : e.state === 'stub' ? 'var(--ox-rv-line)' : 'var(--ox-rv-accent)'}\n stroke-dasharray=${e.state === 'stub' ? '3 3' : e.state === 'observed' ? '1 3' : ''}\n opacity=${e.state === 'stub' ? '0.6' : '0.85'} />`)}\n </svg>\n\n <div class=\"col in\">\n ${incoming.length ? incoming.map(g => this.renderGroup(g)) : html`<span class=\"none\"></span>`}\n </div>\n\n <div class=\"center\">\n ${this.center.label && this.center.label !== this.center.id\n ? html`${this.center.label}<span class=\"cid\">${this.center.sub ?? this.center.id}</span>`\n : this.center.sub ?? this.center.id}\n ${this.center.kind ? html`<span class=\"kind\">${this.center.kind}</span>` : ''}\n </div>\n\n <div class=\"col out\">\n ${outgoing.length ? outgoing.map(g => this.renderGroup(g)) : html`<span class=\"none\"></span>`}\n </div>\n </div>`\n }\n\n /** 한 묶음 — 관계 이름과 그 관계로 이어진 노드들. */\n private renderGroup(g: RelationGroup): TemplateResult {\n const total = g.total ?? g.nodes.length\n const hidden = Math.max(0, total - g.nodes.length)\n const state = g.nodes.some(n => n.broken)\n ? 'broken'\n : !g.nodes.length\n ? /*\n * 수가 있으면 이어져 있는 것이다 — 식별자가 안 왔을 뿐이다. 그루터기(점선)로 그리면\n * 선까지 「없음」이라고 말한다.\n */\n total > 0\n ? 'linked'\n : /* 선언이 「언제나 있다」고 한 자리가 비었으면 그것은 없음이 아니라 **끊어진 참조**다. */\n g.optional === false\n ? 'broken'\n : 'stub'\n : g.source === 'observed'\n ? 'observed'\n : 'linked'\n return html`\n <div class=\"grp\" data-state=${state}>\n \n <span class=\"via ${g.source === 'observed' ? 'obs' : ''}\" title=${g.basis ?? ''}\n >${g.via}${g.basis ? html` <span class=\"basis\">${g.basis}</span>` : ''}${g.tenseLabel\n ? html` <span class=\"tense\" data-t=${g.tense ?? ''}>${g.tenseLabel}</span>`\n : ''}</span\n >\n <div class=\"row\">\n ${g.nodes.length\n ? html`\n ${g.nodes.map(n => this.renderNode(n))}\n ${hidden ? html`<button class=\"more\" @click=${() => this.expand(g)}>+${hidden}</button>` : ''}`\n : total > 0\n ? /*\n * ── 수는 있는데 **하나하나가 안 온 것** ──────────────────────\n * 보내는 쪽이 일부러 식별자를 안 보내는 관계가 있다(설비 상태 구간처럼 사람이 하나를\n * 골라 갈 대상이 아닌 것). `ids` 만 보고 그리면 6건이 0건으로 보인다 — 화면이\n * 없는 사실을 말하게 된다. **수를 믿고 목록으로 넘긴다.**\n */\n html`<button class=\"more\" @click=${() => this.expand(g)}>${total}</button>`\n : g.unresolved\n ? /*\n * 못 풀었다. **「없다」로 그리지 않는다** — 사람이 할 일이 다르다(앞은 자료를 채울\n * 일, 뒤는 푸는 쪽을 꽂을 일).\n */\n html`<span class=\"node unknown\" title=${g.unresolvedNote ?? g.unresolved}>?</span>`\n : /* 이웃이 없다 — 선언은 있다. 선택 관계인지에 따라 다르게 읽힌다. */\n html`<span class=\"node stub ${g.optional ? '' : 'req'}\">${g.optional ? '—' : '∅'}</span>`}\n </div>\n </div>`\n }\n\n /**\n * 노드 하나.\n *\n * **제자리에서 더 펼치지 않는다.** 한때 노드마다 자기 이웃을 오른쪽에 이어 그리게 했는데,\n * 양방향 그래프에서는 자식이 거의 언제나 부모를 도로 보여 준다 — 같은 id 가 사방에 되풀이되고\n * 그림이 아니라 털뭉치가 된다. 깊이는 **걸어서** 간다(노드를 누르면 그것이 가운데가 된다).\n * 한 방향으로 여러 단을 봐야 하는 것(BOM 전개)은 되돌아오는 선이 없는 **다른 읽기**다.\n */\n private renderNode(n: RelationNode): TemplateResult {\n /*\n * **이름이 중심이다.** id 만 그리면 그림이 `cutter-op` · `cut-station` 으로 채워져, 관계는\n * 보이는데 무엇과 무엇의 관계인지는 안 보인다. 이름이 있으면 이름을 앞에 세운다.\n *\n * 그래도 id 를 지우지 않는다 — 걷는 손잡이이고, 같은 이름을 가진 것이 둘일 때 구별하는 유일한\n * 값이다. 작게 아래에 둔다(이름이 없으면 id 하나만 남는다).\n */\n const named = !!n.label && n.label !== n.id\n return html`\n <button class=\"node ${n.reachable === false ? 'flat' : ''} ${n.broken ? 'broken' : ''}\"\n ?disabled=${n.reachable === false} title=${n.id} @click=${() => this.pick(n)}\n >${named ? html`${n.label}<span class=\"nid\">${n.sub ?? n.id}</span>` : (n.sub ?? n.id)}</button>`\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'ox-relation-view': OxRelationView\n }\n}\n"]}

package/dist/src/relation/relation-groups.d.ts ADDED Viewed

@@ -0,0 +1,33 @@
+import type { RelationGroup } from './ox-relation-view.js';
+/**
+ * 계약이 내는 이어짐을 **관계 그림이 받는 모양**으로 옮긴다.
+ *
+ * ## 서버는 판단하지 않는다
+ *
+ * 서버가 내는 것은 이만큼이다.
+ *
+ * ```
+ * { via(i18n 키) · target · from · optional · total · ids }
+ * ```
+ *
+ * **번역과 「갈 수 있나」 판단은 화면이 한다.** 서버가 reachable 까지 정해 내려보내면 그 판단이
+ * 서버에 굳고, 같은 자료를 다른 방식으로 보여 주는 화면이 그것을 되돌릴 수 없다.
+ *
+ * 부품도 마찬가지다 — 축 이름도 관계 이름도 모른다. 그래야 런타임 포커스 · 모델러 · AI 답변이
+ * 같은 부품을 쓴다. 이 함수가 그 사이를 잇는다.
+ *
+ * ## 왜 공용인가 (2026-09-05)
+ *
+ * 트윈의 화면 안에 사유 메서드로 있었다. Plant 가 같은 그림을 쓰려면 이것도 함께 나와야 한다 —
+ * 안 나오면 베끼게 되고, 그러면 아래 「타입은 관계가 아니다」 같은 판단이 두 벌이 된다. 두 벌이
+ * 되면 한쪽만 고쳐진다.
+ *
+ * @param links 계약이 낸 이어짐 — `{ out, incoming }`
+ * @param nameOf 식별자를 사람이 읽는 이름으로. 모르면 undefined 를 돌려주면 된다 —
+ *               부품이 이름 없는 노드로 그린다(label 이 없거나 id 와 같으면 이름 없는 것으로 본다)
+ * @param axisLabel 들어오는 쪽의 출처 축을 사람의 말로. 없으면 축 이름을 그대로 쓴다
+ */
+export declare function relationGroups(links: {
+    out?: any[];
+    incoming?: any[];
+} | undefined, nameOf: (id: string) => string | undefined, axisLabel?: (axis: string) => string): RelationGroup[];

package/dist/src/relation/relation-groups.js ADDED Viewed

@@ -0,0 +1,142 @@
+import { i18next } from '@operato/i18n';
+/**
+ * 계약이 내는 이어짐을 **관계 그림이 받는 모양**으로 옮긴다.
+ *
+ * ## 서버는 판단하지 않는다
+ *
+ * 서버가 내는 것은 이만큼이다.
+ *
+ * ```
+ * { via(i18n 키) · target · from · optional · total · ids }
+ * ```
+ *
+ * **번역과 「갈 수 있나」 판단은 화면이 한다.** 서버가 reachable 까지 정해 내려보내면 그 판단이
+ * 서버에 굳고, 같은 자료를 다른 방식으로 보여 주는 화면이 그것을 되돌릴 수 없다.
+ *
+ * 부품도 마찬가지다 — 축 이름도 관계 이름도 모른다. 그래야 런타임 포커스 · 모델러 · AI 답변이
+ * 같은 부품을 쓴다. 이 함수가 그 사이를 잇는다.
+ *
+ * ## 왜 공용인가 (2026-09-05)
+ *
+ * 트윈의 화면 안에 사유 메서드로 있었다. Plant 가 같은 그림을 쓰려면 이것도 함께 나와야 한다 —
+ * 안 나오면 베끼게 되고, 그러면 아래 「타입은 관계가 아니다」 같은 판단이 두 벌이 된다. 두 벌이
+ * 되면 한쪽만 고쳐진다.
+ *
+ * @param links 계약이 낸 이어짐 — `{ out, incoming }`
+ * @param nameOf 식별자를 사람이 읽는 이름으로. 모르면 undefined 를 돌려주면 된다 —
+ *               부품이 이름 없는 노드로 그린다(label 이 없거나 id 와 같으면 이름 없는 것으로 본다)
+ * @param axisLabel 들어오는 쪽의 출처 축을 사람의 말로. 없으면 축 이름을 그대로 쓴다
+ */
+export function relationGroups(links, nameOf, axisLabel = axis => axis) {
+    var _a, _b, _c, _d, _e, _f, _g;
+    /*
+     * 갈 수 있는지는 여기서 정한다 — 대상이 축이면 그 항목으로 걷고, 아니면 갈 곳이 없다.
+     * 이름을 함께 넘긴다. 그림이 식별자로 채워지면 무엇과 무엇의 관계인지 안 보인다.
+     */
+    const node = (id, kind) => ({ id, label: nameOf(id), kind, reachable: !!kind });
+    /*
+     * **타입은 관계가 아니라 속성이다.**
+     *
+     * 커널이 타입을 관계로 선언한 것은 타당하다 — 타입 어휘로의 참조라 검증에 쓰인다. 하지만 관계
+     * **그림**에 그릴 것은 아니다: 다른 개체로 가는 이어짐이 아니라 이 항목의 필드값이고, 갈 곳이
+     * 없어 막다른 노드가 되며, 그러면서 진짜 이어짐(가면 뭔가 있는 것)을 옆으로 밀어낸다.
+     *
+     * ── 계약을 거스르는 것이 아니다. **계약이 스스로 그 구별을 말한다** ──────────
+     *
+     *   target: { kind: 'axis', axis: 'locations' }    다른 개체로 간다
+     *   target: { kind: 'type', role: 'equipment' }    타입 어휘로의 참조다
+     *
+     * `kind` 가 그 둘을 갈라 두었으므로, 여기서 `kind !== 'type'` 으로 거르는 것은 **계약이 선언한
+     * 성질을 읽는 것**이지 선언을 오류보고없이 무시하는 것이 아니다.
+     *
+     * 「계약에 있는데 왜 안 그리나」를 묻는 사람이 있을 자리라 적어 둔다 — 답은 「계약이 그것을
+     * 타입이라고 말했다」이다. (아키텍트 레인 확인, 2026-09-05)
+     */
+    /*
+     * ── 바깥 것은 **풀린 만큼만** 말한다 (계약 0.9.7) ──────────────────────────
+     *
+     * `target.kind === 'external'` 인 관계(자리→구역, 오더·물품→GS1 품목)는 예전에 id 만 왔다.
+     * 이제 `refs: [{ id, name?, href?, missing? }]` 로 온다.
+     *
+     *   name 이 없으면      id 를 보인다. **지어내지 않는다**
+     *   href 가 없으면      선택할 수 없게 둔다. 선택해도 아무 일이 안 일어나면 사람은 고장으로 읽는다
+     *   missing: true       가리키는데 대상이 없다 — 끊어진 참조로 그린다
+     */
+    const externalNodes = (l) => {
+        var _a;
+        return ((_a = l.refs) !== null && _a !== void 0 ? _a : []).map((ref) => ({
+            id: ref.id,
+            label: ref.name,
+            kind: 'external',
+            reachable: !!ref.href,
+            broken: !!ref.missing
+        }));
+    };
+    const nodesOf = (l, kindOf) => { var _a; return l.refs ? externalNodes(l) : ((_a = l.ids) !== null && _a !== void 0 ? _a : []).map((id) => node(id, kindOf(l))); };
+    /*
+     * ── 못 푼 것은 **비어 있는 것과 다르다** ─────────────────────────────────
+     * `unresolved` 는 「그런 관계가 없다」가 아니라 「아무도 답할 수 없었다」이다. 앞은 자료를 채울
+     * 일이고 뒤는 푸는 쪽을 꽂을 일이라, 화면이 같은 「—」로 그리면 사람이 엉뚱한 데를 고치러 간다.
+     */
+    const unresolvedNote = (l) => l.unresolved
+        ? i18next.t(l.unresolved === 'no-resolver' ? 'text.rel-unresolved-no-resolver' : 'text.rel-unresolved-failed', {
+            defaultValue: l.unresolved === 'no-resolver' ? 'no component can resolve this relation' : 'lookup failed'
+        })
+        : undefined;
+    /*
+     * ── 때는 **선언이 말한 대로만** 옮긴다 ───────────────────────────────────
+     * 말하지 않은 것에 `standing` 을 씌우지 않는다. 미선언은 「때가 없다」가 아니라 「줄마다 다르다」
+     * 일 수 있고(작업 줄은 그 줄의 상태를 봐야 안다), 씌우면 판단이 정확히 뒤집힌다.
+     */
+    const TENSE_KEY = {
+        past: 'text.rel-tense-past',
+        future: 'text.rel-tense-future',
+        standing: 'text.rel-tense-standing',
+        current: 'text.rel-tense-current'
+    };
+    const TENSE_FALLBACK = {
+        past: 'past',
+        future: 'upcoming',
+        standing: 'standing',
+        current: 'current'
+    };
+    const tenseOf = (l) => {
+        const tense = l.tense;
+        if (!tense || !TENSE_KEY[tense])
+            return {};
+        return { tense, tenseLabel: i18next.t(TENSE_KEY[tense], { defaultValue: TENSE_FALLBACK[tense] }) };
+    };
+    const out = ((_a = links === null || links === void 0 ? void 0 : links.out) !== null && _a !== void 0 ? _a : [])
+        .filter((l) => { var _a; return ((_a = l.target) === null || _a === void 0 ? void 0 : _a.kind) !== 'type'; })
+        .map((l) => ({
+        via: i18next.t(l.via),
+        direction: 'out',
+        optional: !!l.optional,
+        total: l.total,
+        unresolved: l.unresolved,
+        unresolvedNote: unresolvedNote(l),
+        ...tenseOf(l),
+        nodes: nodesOf(l, (one) => { var _a; return (((_a = one.target) === null || _a === void 0 ? void 0 : _a.kind) === 'axis' ? one.target.axis : undefined); })
+    }));
+    const incoming = ((_b = links === null || links === void 0 ? void 0 : links.incoming) !== null && _b !== void 0 ? _b : []).map((l) => ({
+        via: `${axisLabel(l.from)} · ${i18next.t(l.via)}`,
+        direction: 'in',
+        optional: !!l.optional,
+        total: l.total,
+        unresolved: l.unresolved,
+        unresolvedNote: unresolvedNote(l),
+        ...tenseOf(l),
+        nodes: nodesOf(l, (one) => one.from)
+    }));
+    /* 「+N」 을 선택했을 때 목록으로 넘길 항목을 함께 담는다. 부품은 그것을 그대로 돌려준다. */
+    for (const g of out) {
+        ;
+        g.axis = ((_e = (_d = ((_c = links === null || links === void 0 ? void 0 : links.out) !== null && _c !== void 0 ? _c : []).find((l) => i18next.t(l.via) === g.via)) === null || _d === void 0 ? void 0 : _d.target) !== null && _e !== void 0 ? _e : {}).axis;
+    }
+    for (const g of incoming) {
+        ;
+        g.axis = (_g = ((_f = links === null || links === void 0 ? void 0 : links.incoming) !== null && _f !== void 0 ? _f : []).find((l) => g.via.endsWith(i18next.t(l.via)))) === null || _g === void 0 ? void 0 : _g.from;
+    }
+    return [...incoming, ...out];
+}
+//# sourceMappingURL=relation-groups.js.map

package/dist/src/relation/relation-groups.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"relation-groups.js","sourceRoot":"","sources":["../../../src/relation/relation-groups.ts"],"names":[],"mappings":"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","sourcesContent":["import { i18next } from '@operato/i18n'\n\nimport type { RelationGroup, RelationNode } from './ox-relation-view.js'\n\n/**\n * 계약이 내는 이어짐을 **관계 그림이 받는 모양**으로 옮긴다.\n *\n * ## 서버는 판단하지 않는다\n *\n * 서버가 내는 것은 이만큼이다.\n *\n * ```\n * { via(i18n 키) · target · from · optional · total · ids }\n * ```\n *\n * **번역과 「갈 수 있나」 판단은 화면이 한다.** 서버가 reachable 까지 정해 내려보내면 그 판단이\n * 서버에 굳고, 같은 자료를 다른 방식으로 보여 주는 화면이 그것을 되돌릴 수 없다.\n *\n * 부품도 마찬가지다 — 축 이름도 관계 이름도 모른다. 그래야 런타임 포커스 · 모델러 · AI 답변이\n * 같은 부품을 쓴다. 이 함수가 그 사이를 잇는다.\n *\n * ## 왜 공용인가 (2026-09-05)\n *\n * 트윈의 화면 안에 사유 메서드로 있었다. Plant 가 같은 그림을 쓰려면 이것도 함께 나와야 한다 —\n * 안 나오면 베끼게 되고, 그러면 아래 「타입은 관계가 아니다」 같은 판단이 두 벌이 된다. 두 벌이\n * 되면 한쪽만 고쳐진다.\n *\n * @param links 계약이 낸 이어짐 — `{ out, incoming }`\n * @param nameOf 식별자를 사람이 읽는 이름으로. 모르면 undefined 를 돌려주면 된다 —\n * 부품이 이름 없는 노드로 그린다(label 이 없거나 id 와 같으면 이름 없는 것으로 본다)\n * @param axisLabel 들어오는 쪽의 출처 축을 사람의 말로. 없으면 축 이름을 그대로 쓴다\n */\nexport function relationGroups(\n links: { out?: any[]; incoming?: any[] } | undefined,\n nameOf: (id: string) => string | undefined,\n axisLabel: (axis: string) => string = axis => axis\n): RelationGroup[] {\n /*\n * 갈 수 있는지는 여기서 정한다 — 대상이 축이면 그 항목으로 걷고, 아니면 갈 곳이 없다.\n * 이름을 함께 넘긴다. 그림이 식별자로 채워지면 무엇과 무엇의 관계인지 안 보인다.\n */\n const node = (id: string, kind?: string) => ({ id, label: nameOf(id), kind, reachable: !!kind })\n\n /*\n * **타입은 관계가 아니라 속성이다.**\n *\n * 커널이 타입을 관계로 선언한 것은 타당하다 — 타입 어휘로의 참조라 검증에 쓰인다. 하지만 관계\n * **그림**에 그릴 것은 아니다: 다른 개체로 가는 이어짐이 아니라 이 항목의 필드값이고, 갈 곳이\n * 없어 막다른 노드가 되며, 그러면서 진짜 이어짐(가면 뭔가 있는 것)을 옆으로 밀어낸다.\n *\n * ── 계약을 거스르는 것이 아니다. **계약이 스스로 그 구별을 말한다** ──────────\n *\n * target: { kind: 'axis', axis: 'locations' } 다른 개체로 간다\n * target: { kind: 'type', role: 'equipment' } 타입 어휘로의 참조다\n *\n * `kind` 가 그 둘을 갈라 두었으므로, 여기서 `kind !== 'type'` 으로 거르는 것은 **계약이 선언한\n * 성질을 읽는 것**이지 선언을 오류보고없이 무시하는 것이 아니다.\n *\n * 「계약에 있는데 왜 안 그리나」를 묻는 사람이 있을 자리라 적어 둔다 — 답은 「계약이 그것을\n * 타입이라고 말했다」이다. (아키텍트 레인 확인, 2026-09-05)\n */\n /*\n * ── 바깥 것은 **풀린 만큼만** 말한다 (계약 0.9.7) ──────────────────────────\n *\n * `target.kind === 'external'` 인 관계(자리→구역, 오더·물품→GS1 품목)는 예전에 id 만 왔다.\n * 이제 `refs: [{ id, name?, href?, missing? }]` 로 온다.\n *\n * name 이 없으면 id 를 보인다. **지어내지 않는다**\n * href 가 없으면 선택할 수 없게 둔다. 선택해도 아무 일이 안 일어나면 사람은 고장으로 읽는다\n * missing: true 가리키는데 대상이 없다 — 끊어진 참조로 그린다\n */\n const externalNodes = (l: any): RelationNode[] =>\n (l.refs ?? []).map((ref: any) => ({\n id: ref.id,\n label: ref.name,\n kind: 'external',\n reachable: !!ref.href,\n broken: !!ref.missing\n }))\n\n const nodesOf = (l: any, kindOf: (l: any) => string | undefined): RelationNode[] =>\n l.refs ? externalNodes(l) : (l.ids ?? []).map((id: string) => node(id, kindOf(l)))\n\n /*\n * ── 못 푼 것은 **비어 있는 것과 다르다** ─────────────────────────────────\n * `unresolved` 는 「그런 관계가 없다」가 아니라 「아무도 답할 수 없었다」이다. 앞은 자료를 채울\n * 일이고 뒤는 푸는 쪽을 꽂을 일이라, 화면이 같은 「—」로 그리면 사람이 엉뚱한 데를 고치러 간다.\n */\n const unresolvedNote = (l: any) =>\n l.unresolved\n ? i18next.t(l.unresolved === 'no-resolver' ? 'text.rel-unresolved-no-resolver' : 'text.rel-unresolved-failed', {\n defaultValue: l.unresolved === 'no-resolver' ? 'no component can resolve this relation' : 'lookup failed'\n })\n : undefined\n\n /*\n * ── 때는 **선언이 말한 대로만** 옮긴다 ───────────────────────────────────\n * 말하지 않은 것에 `standing` 을 씌우지 않는다. 미선언은 「때가 없다」가 아니라 「줄마다 다르다」\n * 일 수 있고(작업 줄은 그 줄의 상태를 봐야 안다), 씌우면 판단이 정확히 뒤집힌다.\n */\n const TENSE_KEY: Record<string, string> = {\n past: 'text.rel-tense-past',\n future: 'text.rel-tense-future',\n standing: 'text.rel-tense-standing',\n current: 'text.rel-tense-current'\n }\n const TENSE_FALLBACK: Record<string, string> = {\n past: 'past',\n future: 'upcoming',\n standing: 'standing',\n current: 'current'\n }\n const tenseOf = (l: any) => {\n const tense = l.tense as RelationGroup['tense']\n if (!tense || !TENSE_KEY[tense]) return {}\n return { tense, tenseLabel: i18next.t(TENSE_KEY[tense], { defaultValue: TENSE_FALLBACK[tense] }) }\n }\n\n const out: RelationGroup[] = (links?.out ?? [])\n .filter((l: any) => l.target?.kind !== 'type')\n .map((l: any) => ({\n via: i18next.t(l.via),\n direction: 'out' as const,\n optional: !!l.optional,\n total: l.total,\n unresolved: l.unresolved,\n unresolvedNote: unresolvedNote(l),\n ...tenseOf(l),\n nodes: nodesOf(l, (one: any) => (one.target?.kind === 'axis' ? one.target.axis : undefined))\n }))\n\n const incoming: RelationGroup[] = (links?.incoming ?? []).map((l: any) => ({\n via: `${axisLabel(l.from)} · ${i18next.t(l.via)}`,\n direction: 'in' as const,\n optional: !!l.optional,\n total: l.total,\n unresolved: l.unresolved,\n unresolvedNote: unresolvedNote(l),\n ...tenseOf(l),\n nodes: nodesOf(l, (one: any) => one.from)\n }))\n\n /* 「+N」 을 선택했을 때 목록으로 넘길 항목을 함께 담는다. 부품은 그것을 그대로 돌려준다. */\n for (const g of out) {\n ;(g as any).axis = ((links?.out ?? []).find((l: any) => i18next.t(l.via) === g.via)?.target ?? {}).axis\n }\n for (const g of incoming) {\n ;(g as any).axis = (links?.incoming ?? []).find((l: any) => g.via.endsWith(i18next.t(l.via)))?.from\n }\n\n return [...incoming, ...out]\n}\n"]}

package/dist/src/selector/ox-selector-resource-object-legacy.js CHANGED Viewed

@@ -74,10 +74,22 @@ let OxSelectorResourceObjectLegacy = class OxSelectorResourceObjectLegacy extend
         autofocus
       ></ox-search-form>
+      <!--
+        .data 를 넘기지 않는다 — 목록은 fetchHandler 가 채운다.
+        그 값은 늘 ZERO_DATA(빈 것)였다. 이 부품에 data 를 주는 부르는 쪽이 없다. 그리스트는
+        data 가 설정되면 reset() 하므로(data-grist 의 updated), 이 부품이 **다시 그려지는 순간
+        목록이 통째로 사라진다.**
+        오늘은 안 터진다 — 이 부품에 다시 그릴 상태가 없다. 그러나 새 부품(ox-selector-resource-object)
+        에 바닥 단추를 고른 상태에 묶자마자 바로 터졌다. 넘길 값이 없으면서 넘기고 있던 것이므로
+        여기서도 걷는다. 남겨 두면 다음 사람이 같은 곳에 빠진다.
+          [확인함] 2026-09-05 · 새 부품에서 라디오 클릭 → reset() 1회 → 20건 → 0건
+      -->
       <ox-grist
         .mode=${isMobileDevice() ? 'LIST' : 'GRID'}
         .config=${this.config}
-        .data=${this.data}
         .fetchHandler=${this.fetchHandler.bind(this)}
         .selectedRecords=${this.selectedRecords}
       >