@tienne/gestalt 0.90.1 → 0.91.0

package/dist/src/architecture/html-client.js

@@ -1,7 +1,7 @@
 import { BAND_LINE_X, BAND_LINE_Y, BAND_TITLE_HALF, BAND_TITLE_X } from './canvas-geometry.js';
 import { FOCUS_SOURCE } from './focus.js';
 import { PRODUCT_COLORS } from './html-theme.js';
-import { FRAME_PAD } from './layout.js';
+import { FRAME_PAD, NODE_DESC_LINE } from './layout.js';
 // component는 칩 글자를 노드의 displayKind에서, 색과 아이콘은 renderClass에서 가져온다. types.ts의 displayKindOf, chipTextOverride와 같은 규칙이다.
 // 이 조각은 component를 쓸 수 있는 어휘에만 싣는다. 늘 실으면 component가 없는 그림의 바이트까지 바뀐다
 const COMPONENT_DKIND = "n.kind === 'component' ? 'cx_' + (n.renderClass || 'service') : ";
@@ -226,8 +226,12 @@ export function renderClientScript(c) {
   var MICRO_HOSTS = {};
   (data.microHosts || []).forEach(function (id) { MICRO_HOSTS[id] = true; });
   var KIND_TEXT = ${JSON.stringify(c.kindText)};
+  var KIND_ABOUT = ${JSON.stringify(c.kindAbout)};
   var EVIDENCE_TEXT = ${JSON.stringify(c.evidenceText)};
   var LANE_TITLE = ${JSON.stringify(c.laneTitles)};
+  var LANE_ABOUT = ${JSON.stringify(c.laneAbout)};
+  var STAGE_LANE_ABOUT = ${JSON.stringify(c.stageLaneAbout)};
+  var NODE_DESC_LINE = ${NODE_DESC_LINE};
   var GUESS = ${JSON.stringify(c.inferredBadge)};
   var PLATFORM_CHIP = ${JSON.stringify(c.platformChip)};
   var PLATFORM_NAME = ${JSON.stringify(c.platformName)};
@@ -526,6 +530,86 @@ ${FOCUS_SOURCE}
     panel.appendChild(body);
     openDrawer();
   }
+  // 환경 필터로 숨긴 카드는 화면에 없으니 목록에서도 뺀다
+  function connectionList(body, id, incoming) {
+    var list = data.edges.filter(function (e) {
+      var other = incoming ? e.from : e.to;
+      return (incoming ? e.to : e.from) === id && other !== id && !envHidden(other);
+    });
+    if (!list.length) return;
+    body.appendChild(el('h3', null, (incoming ? '들어오는 연결 ' : '나가는 연결 ') + list.length + '개'));
+    var otherOf = {};
+    list.forEach(function (e) { otherOf[e.id] = incoming ? e.from : e.to; });
+    refButtons(body, list.map(function (e) { return e.id; }), function (eid) { goToNode(otherOf[eid]); },
+      function (eid) { return 'i-' + dkind(nodes[otherOf[eid]]); },
+      function (eid) { return label(otherOf[eid]) + ' (' + kindText(edges[eid].kind) + ')'; });
+  }
+  // 선은 레벨 엣지에서 먼저 찾는다. 포함 선은 드릴다운이 만든 것이라 IR 엣지 표에 없다
+  function edgeOf(id) {
+    var level = levels[levelIdOf(active)];
+    return (level && level.edgeById[id]) || edges[id] || null;
+  }
+  function renderEdgePanel(g) {
+    var id = g.getAttribute('data-link-id');
+    var e = edgeOf(id);
+    if (!e) return;
+    var ir = edges[id];
+    active.querySelectorAll('.node.selected').forEach(function (x) { x.classList.remove('selected'); });
+    lightLink(active, g);
+    returnFocus = g;
+    selectedId = null;
+    syncFocusBtn();
+    panel.textContent = '';
+    panel.appendChild(panelHead('flow', 'u-link', kindText(e.kind), '', label(e.from) + ' → ' + label(e.to)));
+    var body = el('div', 'dr-body');
+    if (KIND_ABOUT[e.kind]) body.appendChild(el('p', 'desc', KIND_ABOUT[e.kind]));
+    var facts = el('ul', 'facts');
+    if (e.kind !== 'contains') factRow(facts, '선', e.lineStyle === 'dashed' ? '점선 (문서나 사람 말로만 확인)' : '실선 (코드나 스펙으로 확인)');
+    if (g.classList.contains('x-account')) factRow(facts, '계정', '계정을 넘는 연결이에요');
+    if (ir && ir.actions && ir.actions.length) factRow(facts, 'action', ir.actions.join(', '));
+    if (facts.childNodes.length) body.appendChild(facts);
+    body.appendChild(el('h3', null, '양 끝'));
+    refButtons(body, [e.from, e.to], goToNode, function (nid) { return 'i-' + dkind(nodes[nid]); }, label);
+    if (ir) evidenceList(body, ir.evidence);
+    else body.appendChild(el('p', 'desc', 'parent로 정한 포함 관계라 따로 근거가 없어요.'));
+    panel.appendChild(body);
+    openDrawer();
+  }
+  // 레인 제목과 rect.lane은 같은 순서로 그려진다. 포커스 화면과 환경 필터가 같은 짝짓기를 쓴다
+  function laneCards(t) {
+    var sec = t.parentNode;
+    var titles = Array.prototype.slice.call(sec.querySelectorAll('.lane-title'));
+    var r = sec.querySelectorAll('rect.lane')[titles.indexOf(t)];
+    if (!r) return [];
+    var x = parseFloat(r.getAttribute('x'));
+    var w = parseFloat(r.getAttribute('width'));
+    var ids = [];
+    sec.querySelectorAll('.node').forEach(function (c) {
+      var left = parseFloat(c.style.left);
+      if (left >= x && left < x + w && !c.classList.contains('env-off')) ids.push(c.getAttribute('data-node-id'));
+    });
+    return ids;
+  }
+  function laneAria(title, count) { return title + ' 레인, 카드 ' + count + '개'; }
+  function renderLanePanel(t) {
+    var laneId = t.getAttribute('data-lane-id') || '';
+    var title = t.firstChild ? t.firstChild.textContent : '';
+    var ids = laneCards(t);
+    active.querySelectorAll('.node.selected').forEach(function (x) { x.classList.remove('selected'); });
+    clearLit(active);
+    returnFocus = t;
+    selectedId = null;
+    syncFocusBtn();
+    panel.textContent = '';
+    panel.appendChild(panelHead('flow', 'u-legend', '레인', '', title));
+    var body = el('div', 'dr-body');
+    var about = laneId.indexOf('stage:') === 0 ? STAGE_LANE_ABOUT : LANE_ABOUT[laneId];
+    if (about) body.appendChild(el('p', 'desc', about));
+    body.appendChild(el('h3', null, '이 칸의 카드 ' + ids.length + '개'));
+    if (ids.length) refButtons(body, ids, focusCard, function (nid) { return 'i-' + dkind(nodes[nid]); }, label);
+    panel.appendChild(body);
+    openDrawer();
+  }
   function renderPanel(id) {
     if (isStep(id)) { renderStepPanel(id); return; }
     var n = nodes[id];
@@ -573,6 +657,11 @@ ${FOCUS_SOURCE}
       body.appendChild(actions);
     }
     if (n.description) body.appendChild(el('p', 'desc', n.description));
+    var about = KIND_ABOUT[dkind(n)];
+    if (about) {
+      body.appendChild(el('h3', null, '이 종류는'));
+      body.appendChild(el('p', 'desc', about));
+    }
     renderFacts(n, body);${c.docs ? '\n    renderDoc(n, body);' : ''}
     if (flowsBySvc[id]) {
       body.appendChild(el('h3', null, '흐름 ' + flowsBySvc[id].length + '개'));
@@ -582,6 +671,8 @@ ${FOCUS_SOURCE}
       body.appendChild(el('h3', null, '이 항목이 나오는 흐름 단계 ' + stepsByRef[id].length + '개'));
       refButtons(body, stepsByRef[id], goToNode, function () { return 'u-flow'; }, function (sid) { return stepFlow[sid].title + ' › ' + label(sid); });
     }
+    connectionList(body, id, true);
+    connectionList(body, id, false);
     body.appendChild(el('h3', null, '출처 ' + n.evidence.length + '개'));
     var ul = el('ul', 'evidence');
     n.evidence.forEach(function (ev) { ul.appendChild(renderEvidence(ev)); });
@@ -873,6 +964,10 @@ ${c.views ? VIEW_FUNCS : ''}${c.docs ? DOC_FUNCS : ''}  stage.addEventListener('
     if (link) { activateBundle(link); return; }
     var ft = e.target.closest('.link.flow-t');
     if (ft) { activateTransition(ft); return; }
+    var edge = e.target.closest('.link[data-link-id]');
+    if (edge) { renderEdgePanel(edge); return; }
+    var lane = e.target.closest('.lane-title[data-lane-id]');
+    if (lane) { renderLanePanel(lane); return; }
     if (drawerOpen()) closeDrawer(false);
   });
   stage.addEventListener('dblclick', function (e) {
@@ -889,7 +984,11 @@ ${c.views ? VIEW_FUNCS : ''}${c.docs ? DOC_FUNCS : ''}  stage.addEventListener('
     var link = e.target.closest('.link.bundle');
     if (link) { e.preventDefault(); activateBundle(link); return; }
     var ft = e.target.closest('.link.flow-t');
-    if (ft) { e.preventDefault(); activateTransition(ft); }
+    if (ft) { e.preventDefault(); activateTransition(ft); return; }
+    var edge = e.target.closest('.link[data-link-id]');
+    if (edge) { e.preventDefault(); renderEdgePanel(edge); return; }
+    var lane = e.target.closest('.lane-title[data-lane-id]');
+    if (lane) { e.preventDefault(); renderLanePanel(lane); }
   });
 
   // 위치 표시
@@ -1094,9 +1193,12 @@ ${c.views ? VIEW_FUNCS : ''}${c.docs ? DOC_FUNCS : ''}  stage.addEventListener('
     if (c < 800) return 'db_table';
     return '';
   }
+  // types.ts의 hasCardDescription, layout.ts의 measureNode와 같은 판정이다
+  function hasDesc(n) { return !!(n && n.description && n.description.trim()); }
   function cardHeight(id) {
     var f = services[id];
-    return (nodes[id] && nodes[id].displayName) || (f && (f.prodDomain || f.platforms.length > 0)) ? 60 : 48;
+    var base = (nodes[id] && nodes[id].displayName) || (f && (f.prodDomain || f.platforms.length > 0)) ? 60 : 48;
+    return base + (hasDesc(nodes[id]) ? NODE_DESC_LINE : 0);
   }
   function platformChips(id, parent) {
     var f = services[id];
@@ -1141,7 +1243,8 @@ ${c.views ? VIEW_FUNCS : ''}${c.docs ? DOC_FUNCS : ''}  stage.addEventListener('
       platformChips(id, l2);
       d.appendChild(l2);
     } else if (sub) d.appendChild(sub);
-    d.title = n && n.displayName ? n.displayName + (guess ? ' (' + GUESS + ')' : '') + '\\n' + n.label : label(id);
+    if (hasDesc(n)) d.appendChild(el('span', 'ds', n.description));
+    d.title = (n && n.displayName ? n.displayName + (guess ? ' (' + GUESS + ')' : '') + '\\n' + n.label : label(id)) + (hasDesc(n) ? '\\n' + n.description : '');
     d.setAttribute('aria-label', label(id) + ', ' + kindText(kind));
     if (enterMap[id]) {
       var more = el('span', 'go', '›');
@@ -1250,12 +1353,10 @@ ${c.views ? VIEW_FUNCS : ''}${c.docs ? DOC_FUNCS : ''}  stage.addEventListener('
       var xa = nodes[e.from] && nodes[e.to] && nodes[e.from].account && nodes[e.to].account && nodes[e.from].account !== nodes[e.to].account;
       var g = svgEl('g', { 'class': (bundle ? 'link bundle' : 'link e-' + e.kind) + (xa ? ' x-account' : ''), 'data-from': e.from, 'data-to': e.to });
       var name = bundle ? label(e.from) + ' → ' + label(e.to) + ' ' + e.count + '개'${c.mixedBundles ? MIXED_NOTE : ''} : kindText(e.kind) + ': ' + label(e.from) + ' → ' + label(e.to);
-      if (bundle) {
-        g.setAttribute('data-bundle-id', e.id);
-        g.setAttribute('tabindex', '0');
-        g.setAttribute('role', 'button');
-        g.setAttribute('aria-label', name);
-      }
+      g.setAttribute(bundle ? 'data-bundle-id' : 'data-link-id', e.id);
+      g.setAttribute('tabindex', '0');
+      g.setAttribute('role', 'button');
+      g.setAttribute('aria-label', name);
       var t = svgEl('title', {});
       t.textContent = name;
       g.appendChild(t);
@@ -1283,6 +1384,12 @@ ${c.views ? VIEW_FUNCS : ''}${c.docs ? DOC_FUNCS : ''}  stage.addEventListener('
       if (!l.title) return;
       var title = el('div', 'lane-title', l.title);
       title.appendChild(el('span', 'n', String(l.count)));
+      if (l.id) {
+        title.setAttribute('data-lane-id', l.id);
+        title.setAttribute('role', 'button');
+        title.tabIndex = 0;
+        title.setAttribute('aria-label', laneAria(l.title, l.count));
+      }
       title.style.left = l.x + 'px';
       title.style.top = '22px';
       title.style.width = l.width + 'px';
@@ -1348,7 +1455,7 @@ ${c.views ? VIEW_FUNCS : ''}${c.docs ? DOC_FUNCS : ''}  stage.addEventListener('
       pos: pos,
       edges: list.map(function (e) { return { id: e.id, from: e.from, to: e.to, kind: e.kind, count: 1, lineStyle: e.lineStyle }; }),
       lanes: lanes.map(function (l) {
-        return { x: l.left - LANE_PAD, width: l.right - l.left + LANE_PAD * 2, title: LANE_TITLE[l.id] || '', count: l.count };
+        return { x: l.left - LANE_PAD, width: l.right - l.left + LANE_PAD * 2, id: l.id, title: LANE_TITLE[l.id] || '', count: l.count };
       }),
       width: x + NODE_W + LANE_PAD + PAD_X,
       height: PAD_TOP + maxH + PAD_BOTTOM,
@@ -1495,7 +1602,7 @@ ${c.views ? VIEW_FUNCS : ''}${c.docs ? DOC_FUNCS : ''}  stage.addEventListener('
       Object.keys(pos).forEach(function (id) { if (pos[id].x >= x && pos[id].x < x + w) n += 1; });
       if (!n) return;
       var t = titles[i];
-      lanes.push({ x: x, width: w, title: t ? t.firstChild.textContent : '', count: n });
+      lanes.push({ id: t ? t.getAttribute('data-lane-id') : null, x: x, width: w, title: t ? t.firstChild.textContent : '', count: n });
     });
     var cards = cardMap(src);
     src.hidden = true;
@@ -1782,6 +1889,7 @@ ${c.views ? VIEW_POP : ''}  // 흐름 단추는 서비스 아래 레벨에서만
       t.classList.toggle('env-off', n === 0);
       var count = t.querySelector('.n');
       if (count) count.textContent = n;
+      if (t.hasAttribute('data-lane-id')) t.setAttribute('aria-label', laneAria(t.firstChild.textContent, n));
     });
   }
   // 고른 환경은 주소 해시 뒤 ?env=prod,dev로 싣는다. 주소를 보내면 받은 사람도 같은 환경으로 본다.

package/dist/src/architecture/html-client.js.map

@@ -1 +1 @@
-{"version":3,"file":"html-client.js","sourceRoot":"","sources":["../../../src/architecture/html-client.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"html-client.js","sourceRoot":"","sources":["../../../src/architecture/html-client.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,eAAe,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAC/F,OAAO,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAC1C,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACjD,OAAO,EAAE,SAAS,EAAE,cAAc,EAAe,MAAM,aAAa,CAAC;AAiCrE,sHAAsH;AACtH,sEAAsE;AACtE,MAAM,eAAe,GAAG,kEAAkE,CAAC;AAC3F,MAAM,cAAc,GAAG,+CAA+C,CAAC;AACvE,MAAM,UAAU,GAAG,6EAA6E,CAAC;AAEjG,2EAA2E;AAC3E,MAAM,UAAU,GACd,+EAA+E,CAAC;AAClF,MAAM,gBAAgB,GACpB,yFAAyF,CAAC;AAC5F,MAAM,UAAU,GAAG;8FAC2E,CAAC;AAE/F,kFAAkF;AAClF,MAAM,OAAO,GACX,kGAAkG,CAAC;AAErG,wDAAwD;AACxD,MAAM,SAAS,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iEA2H+C,OAAO;;;;CAIvE,CAAC;AAEF,6BAA6B;AAC7B,MAAM,UAAU,GAAG;;KAEd,CAAC;AACN,MAAM,QAAQ,GAAG;;KAEZ,CAAC;AACN,MAAM,UAAU,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2ClB,CAAC;AACF,MAAM,QAAQ,GAAG;;;CAGhB,CAAC;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAAG,4BAA4B,CAAC;AAC9D,MAAM,gBAAgB,GAAG,2BAA2B,CAAC;AAErD,+CAA+C;AAC/C,MAAM,CAAC,MAAM,iBAAiB,GAAG;;oCAEG,iBAAiB;;;MAG/C,CAAC;AAEP;;;;GAIG;AACH,MAAM,UAAU,kBAAkB,CAAC,CAAkB;IACnD,OAAO;;;;;qBAKY,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC;qBAC3B,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC;oBAC5B,SAAS;sBACP,WAAW,mBAAmB,WAAW,oBAAoB,YAAY,uBAAuB,eAAe;yBAC5G,cAAc;;;oBAGnB,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC;qBACzB,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC;wBACxB,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,YAAY,CAAC;qBACjC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,UAAU,CAAC;qBAC5B,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC;2BACrB,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,cAAc,CAAC;yBAClC,cAAc;gBACvB,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,aAAa,CAAC;wBACvB,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,YAAY,CAAC;wBAC9B,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,YAAY,CAAC;2BAC3B,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,cAAc,CAAC;2BAChC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,cAAc,CAAC;;;;;;;;mBAQxC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC;;qBAEvE,iBAAiB;oBAClB,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA8DlC,YAAY;;;yCAG2B,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;0CAkTlC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2BA4CjD,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,2BAA2B,CAAC,CAAC,CAAC,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA8RlE,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE;;;;;;;;;;MAU/C,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE;;;;;;;;;;;;;;;;;;;;;MAqBzB,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uEAuP0C,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qFA8HpB,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE;;;;;;;;;;;;;;;;;;+FAkBtB,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kFAsS7C,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wDAiDhE,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA2D3E,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE;;;;;;2CAMkB,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiLzE,CAAC;AACF,CAAC"}

package/dist/src/architecture/html-renderer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"html-renderer.d.ts","sourceRoot":"","sources":["../../../src/architecture/html-renderer.ts"],"names":[],"mappings":"AAWA,OAAO,EAAqD,KAAK,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAwBnG,OAAO,EAIL,KAAK,YAAY,EAClB,MAAM,aAAa,CAAC;AAsBrB,OAAO,EAAoC,KAAK,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAEpF,MAAM,MAAM,oBAAoB,GAAG,SAAS,GAAG,QAAQ,CAAC;AAExD,MAAM,WAAW,6BAA6B;IAC5C,QAAQ,EAAE,oBAAoB,CAAC;CAChC;AA+ED,mEAAmE;AACnE,wBAAgB,eAAe,CAAC,KAAK,EAAE,OAAO,GAAG,MAAM,CAetD;AAmVD,6DAA6D;AAC7D,wBAAgB,YAAY,CAAC,QAAQ,EAAE,MAAM,GAAG,SAAS,GAAG,MAAM,CAEjE;AAimCD;;;GAGG;AACH,wBAAgB,sBAAsB,CACpC,SAAS,EAAE,WAAW,EACtB,MAAM,EAAE,YAAY,EACpB,IAAI,EAAE,6BAA6B,GAClC,MAAM,CAkBR;AAED;;;GAGG;AACH,wBAAgB,mBAAmB,CACjC,SAAS,EAAE,WAAW,EACtB,SAAS,EAAE,SAAS,EACpB,IAAI,EAAE,6BAA6B,GAClC,MAAM,CAuIR"}
+{"version":3,"file":"html-renderer.d.ts","sourceRoot":"","sources":["../../../src/architecture/html-renderer.ts"],"names":[],"mappings":"AAWA,OAAO,EAAqD,KAAK,SAAS,EAAE,MAAM,gBAAgB,CAAC;AA4BnG,OAAO,EAIL,KAAK,YAAY,EAClB,MAAM,aAAa,CAAC;AAsBrB,OAAO,EAAoC,KAAK,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAEpF,MAAM,MAAM,oBAAoB,GAAG,SAAS,GAAG,QAAQ,CAAC;AAExD,MAAM,WAAW,6BAA6B;IAC5C,QAAQ,EAAE,oBAAoB,CAAC;CAChC;AA+ED,mEAAmE;AACnE,wBAAgB,eAAe,CAAC,KAAK,EAAE,OAAO,GAAG,MAAM,CAetD;AA2VD,6DAA6D;AAC7D,wBAAgB,YAAY,CAAC,QAAQ,EAAE,MAAM,GAAG,SAAS,GAAG,MAAM,CAEjE;AAwmCD;;;GAGG;AACH,wBAAgB,sBAAsB,CACpC,SAAS,EAAE,WAAW,EACtB,MAAM,EAAE,YAAY,EACpB,IAAI,EAAE,6BAA6B,GAClC,MAAM,CAkBR;AAED;;;GAGG;AACH,wBAAgB,mBAAmB,CACjC,SAAS,EAAE,WAAW,EACtB,SAAS,EAAE,SAAS,EACpB,IAAI,EAAE,6BAA6B,GAClC,MAAM,CAuIR"}

package/dist/src/architecture/html-renderer.js

@@ -2,7 +2,7 @@ import { BAND_LINE_X, BAND_LINE_Y, BAND_TITLE_HALF, BAND_TITLE_X, CANVAS_PAD_TOP
 import { flowCountByService, ROOT_LEVEL_ID } from './drilldown.js';
 import { renderClientScript, THEME_BOOT_SCRIPT } from './html-client.js';
 import { datastoreEngine, iconUse, PRODUCT_COLORS, renderCss, renderIconSprite, VIEW_CSS, DOC_CSS, } from './html-theme.js';
-import { LANE_TITLES, flowBadgeText, MICRO_HOST_SHORT, NODE_KIND_SHORT, PLATFORM_CHIP_TEXT, PLATFORM_NAME, WEB_HOSTING_CHIP_TEXT, WEB_HOSTING_NAME, platformChipText, platformName, } from './kind-text.js';
+import { EDGE_KIND_ABOUT, LANE_ABOUT, LANE_TITLES, NODE_KIND_ABOUT, STAGE_LANE_ABOUT, flowBadgeText, MICRO_HOST_SHORT, NODE_KIND_SHORT, PLATFORM_CHIP_TEXT, PLATFORM_NAME, WEB_HOSTING_CHIP_TEXT, WEB_HOSTING_NAME, platformChipText, platformName, } from './kind-text.js';
 import { compareEnvironment, FLAT_BACKWARD_EDGE_KINDS, textUnits, } from './layout.js';
 import { indexMicroApps } from './micro-app.js';
 import { ALL_PACKS_VOCABULARY, irVocabulary } from './packs/index.js';
@@ -11,7 +11,7 @@ import { computeCompareLayout } from './compare-layout.js';
 import { computeDataflowLayout } from './dataflow-layout.js';
 import { computeSequenceLayout } from './sequence-layout.js';
 import { computeServiceFacts } from './service-facts.js';
-import { chipTextOverride, displayKindOf } from './types.js';
+import { chipTextOverride, displayKindOf, hasCardDescription } from './types.js';
 import { maskSharedText, redactForSharing } from './validator.js';
 const DASHED_PATTERN = '6 4';
 const INFERRED_BADGE = '추정';
@@ -60,8 +60,8 @@ const FLOW_TEXT = {
     person: '사람',
     system: '시스템',
 };
-const HINT_DRILL = '항목을 누르면 출처가 보여요. 더블클릭하거나 상세보기를 누르면 한 단계 안으로 들어가고 뒤로가기로 돌아와요. 전체 화면에서 Shift나 ⌘를 누른 채 두 항목을 고르면 그 사이 경로를 보여줘요.';
-const HINT_FLAT = '항목을 누르면 출처가 보여요. 끌어서 옮기고 ⌘나 Ctrl을 누른 채 휠을 굴리면 크게 볼 수 있어요.';
+const HINT_DRILL = '카드나 선, 칸 제목을 누르면 설명과 출처가 보여요. 더블클릭하거나 상세보기를 누르면 한 단계 안으로 들어가고 뒤로가기로 돌아와요. 전체 화면에서 Shift나 ⌘를 누른 채 두 항목을 고르면 그 사이 경로를 보여줘요.';
+const HINT_FLAT = '카드나 선, 칸 제목을 누르면 설명과 출처가 보여요. 끌어서 옮기고 ⌘나 Ctrl을 누른 채 휠을 굴리면 크게 볼 수 있어요.';
 function compareStr(a, b) {
     return a < b ? -1 : a > b ? 1 : 0;
 }
@@ -260,9 +260,14 @@ function docCoverBadge(cover) {
             : '') +
         owner);
 }
+/** 레인 제목의 aria-label. 클라이언트가 환경 필터로 수를 바꿀 때도 같은 꼴로 다시 단다 */
+function laneAria(title, count) {
+    return `${title} 레인, 카드 ${count}개`;
+}
 function renderCard(node, box, enterable, focus, facts, band, micro, flows = 0, products = [], productIds = [], cover, where) {
     const name = nodeName(node);
     const guess = isGuess(node);
+    const desc = hasCardDescription(node.description);
     const platforms = facts?.platforms.map((p) => platformName(p, facts.webHosting)) ?? [];
     const dk = displayKindOf(node);
     const cls = ['node', `k-${dk}`];
@@ -279,7 +284,8 @@ function renderCard(node, box, enterable, focus, facts, band, micro, flows = 0,
     const tooltip = (node.displayName === undefined
         ? node.label
         : `${node.displayName}${guess ? ` (${INFERRED_BADGE})` : ''}\n${node.label}`) +
-        (facts?.prodDomain !== undefined ? `\n${facts.prodDomain}` : '');
+        (facts?.prodDomain !== undefined ? `\n${facts.prodDomain}` : '') +
+        (desc ? `\n${node.description}` : '');
     const subText = where !== undefined
         ? `<span class="tc">${escapeHtml(where)}</span>`
         : facts?.prodDomain !== undefined
@@ -307,6 +313,7 @@ function renderCard(node, box, enterable, focus, facts, band, micro, flows = 0,
         docCoverBadge(cover) +
         `</span>` +
         second +
+        (desc ? `<span class="ds">${escapeHtml(node.description)}</span>` : '') +
         (enterable ? '<span class="go" aria-hidden="true">›</span>' : '') +
         (products.length > 1 ? renderProductBricks(products, productIds, box.width) : '') +
         `</div>`);
@@ -372,7 +379,7 @@ function renderLink(edge, route, labelOf, crossAccount) {
             `${renderPill(edge.count, route.mid, edge.inferred !== undefined)}</g>`);
     }
     const name = `${EDGE_KIND_TEXT[edge.kind]}: ${labelOf(edge.from)} → ${labelOf(edge.to)}${xaText}`;
-    return (`<g class="link e-${edge.kind}${xa}" ${ends}><title>${escapeHtml(name)}</title>${hit}` +
+    return (`<g class="link e-${edge.kind}${xa}" ${ends} data-link-id="${escapeHtml(edge.id)}" tabindex="0" role="button" aria-label="${escapeHtml(name)}"><title>${escapeHtml(name)}</title>${hit}` +
         `<path class="edge" data-edge-id="${escapeHtml(edge.id)}" d="${route.d}" stroke-width="${width}"${dash}/>${tip}</g>`);
 }
 const VIEW_SHAPE_NAME = {
@@ -469,7 +476,8 @@ function renderLevelSection(spec) {
         `height="${round2(height - LANE_INSET_Y * 2)}" rx="14"/>`)
         .join('');
     const laneTitles = layout.lanes
-        .map((l) => `<div class="lane-title" style="left:${round2(l.x + CANVAS_PAD_X)}px;top:${LANE_INSET_Y + 10}px;width:${l.width}px">` +
+        .map((l) => `<div class="lane-title" data-lane-id="${escapeHtml(l.id)}" role="button" tabindex="0" aria-label="${escapeHtml(laneAria(l.title, l.count))}" ` +
+        `style="left:${round2(l.x + CANVAS_PAD_X)}px;top:${LANE_INSET_Y + 10}px;width:${l.width}px">` +
         `${escapeHtml(l.title)}<span class="n">${l.count}</span></div>`)
         .join('');
     const { regionRects, regionTitles } = renderBands(layout, width);
@@ -1062,8 +1070,14 @@ function clientScriptFor(vocab, rootFlows, views, mixedBundles) {
             ...pick(NODE_KIND_TEXT, Object.keys(vocab.looks)),
             ...pick(EDGE_KIND_TEXT, [...Object.keys(vocab.edgeKinds), 'contains']),
         },
+        kindAbout: {
+            ...pick(NODE_KIND_ABOUT, Object.keys(vocab.looks)),
+            ...pick(EDGE_KIND_ABOUT, [...Object.keys(vocab.edgeKinds), 'contains']),
+        },
         evidenceText: EVIDENCE_TYPE_TEXT,
         laneTitles: pick(LANE_TITLES, Object.keys(vocab.lanes)),
+        laneAbout: pick(LANE_ABOUT, Object.keys(vocab.lanes)),
+        stageLaneAbout: STAGE_LANE_ABOUT,
         inferredBadge: INFERRED_BADGE,
         platformChip: PLATFORM_CHIP_TEXT,
         platformName: PLATFORM_NAME,