@tienne/gestalt 0.93.2 → 0.95.0

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

@@ -2,6 +2,24 @@ import { BAND_LINE_X, BAND_LINE_Y, BAND_TITLE_HALF, BAND_TITLE_X } from './canva
 import { FOCUS_SOURCE } from './focus.js';
 import { PRODUCT_COLORS } from './html-theme.js';
 import { FRAME_PAD, NODE_DESC_LINE } from './layout.js';
+// 화면 캡처 조각은 캡처가 있는 그림에만 싣는다. 늘 실으면 캡처가 없는 그림의 바이트까지 바뀐다
+const CAPTURE_CODE = `  var CAPTURE_SOURCE = { browser: '실행 화면', figma: '피그마 프레임' };
+  function renderCapture(n, body, withCaption) {
+    var cp = n.capture;
+    if (!cp) return;
+    var fig = el('figure', 'capture');
+    var img = el('img');
+    img.src = cp.image;
+    img.alt = nameOf(n) + ' 화면 캡처';
+    fig.appendChild(img);
+    var note = (withCaption ? nameOf(n) + ': ' : '') + (CAPTURE_SOURCE[cp.source] || cp.source) + ', ' + cp.env + ', ' + cp.capturedAt;
+    fig.appendChild(el('figcaption', 'desc', note));
+    body.appendChild(fig);
+  }
+`;
+const THUMB_CLICK = "    var thumb = e.target.closest('.flow-thumb');\n" +
+    "    if (thumb) { activateNode(thumb.getAttribute('data-step-id'), e, false); return; }\n";
+const CAPTURE_STEP_CALL = '    refs.forEach(function (r) { renderCapture(nodes[r], body, true); });\n';
 // component는 칩 글자를 노드의 displayKind에서, 색과 아이콘은 renderClass에서 가져온다. types.ts의 displayKindOf, chipTextOverride와 같은 규칙이다.
 // 이 조각은 component를 쓸 수 있는 어휘에만 싣는다. 늘 실으면 component가 없는 그림의 바이트까지 바뀐다
 const COMPONENT_DKIND = "n.kind === 'component' ? 'cx_' + (n.renderClass || 'service') : ";
@@ -700,7 +718,7 @@ ${FOCUS_SOURCE}
     if (st.description) body.appendChild(el('p', 'desc', st.description));
     questionList(body, st.questions);
 ${c.flowBranches ? BRANCH_STEP_OUTS : ''}    var refs = (st.refs || []).filter(function (r) { return !!nodes[r]; });
-    if (refs.length) {
+${c.captures ? CAPTURE_STEP_CALL : ''}    if (refs.length) {
       var web = refs.every(function (r) { return nodes[r].kind === 'screen' || nodes[r].kind === 'endpoint'; });
       body.appendChild(el('h3', null, (web ? '이어진 화면과 API ' : '이어진 카드 ') + refs.length + '개'));
       refButtons(body, refs, function (r) { goToRef(r, f.service); }, function (r) { return 'i-' + dkind(nodes[r]); }, label);
@@ -812,7 +830,7 @@ ${c.flowBranches ? BRANCH_TRANSITION_FACTS : ''}    var f = stepFlow[t.from];
     panel.appendChild(body);
     openDrawer();
   }
-  function renderPanel(id) {
+${c.captures ? CAPTURE_CODE : ''}  function renderPanel(id) {
     if (isStep(id)) { renderStepPanel(id); return; }
     var n = nodes[id];
     panel.textContent = '';
@@ -864,7 +882,7 @@ ${c.flowBranches ? BRANCH_TRANSITION_FACTS : ''}    var f = stepFlow[t.from];
       body.appendChild(el('h3', null, '이 종류는'));
       body.appendChild(el('p', 'desc', about));
     }
-    renderFacts(n, body);${c.docs ? '\n    renderDoc(n, body);' : ''}
+    renderFacts(n, body);${c.captures ? '\n    renderCapture(n, body, false);' : ''}${c.docs ? '\n    renderDoc(n, body);' : ''}
     if (flowsBySvc[id]) {
       body.appendChild(el('h3', null, '흐름 ' + flowsBySvc[id].length + '개'));
       refButtons(body, flowsBySvc[id].map(function (f) { return f.level; }), showLevel, function () { return 'u-flow'; }, function (lv) { return levels[lv].title; });
@@ -1162,7 +1180,7 @@ ${c.views ? viewFuncs(!!c.sequences) : ''}${c.sequences ? SEQ_FUNCS : ''}${c.doc
     }
     ${c.views ? VIEW_CLICK : ''}var card = e.target.closest('.node');
     if (card) { activateNode(card.getAttribute('data-node-id'), e, false); return; }
-    var link = e.target.closest('.link.bundle');
+${c.captures ? THUMB_CLICK : ''}    var link = e.target.closest('.link.bundle');
     if (link) { activateBundle(link); return; }
     var ft = e.target.closest('.link.flow-t');
     if (ft) { activateTransition(ft); return; }

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;AAuCrE,wDAAwD;AACxD,MAAM,YAAY,GAAG;;;;;;;;;;;;;CAapB,CAAC;AACF,MAAM,WAAW,GACf,oDAAoD;IACpD,0FAA0F,CAAC;AAC7F,MAAM,iBAAiB,GACrB,4EAA4E,CAAC;AAE/E,sHAAsH;AACtH,sEAAsE;AACtE,MAAM,eAAe,GAAG,kEAAkE,CAAC;AAC3F,MAAM,cAAc,GAAG,+CAA+C,CAAC;AACvE,MAAM,UAAU,GAAG,6EAA6E,CAAC;AAEjG,iEAAiE;AACjE,MAAM,gBAAgB,GAAG,mCAAmC,CAAC;AAC7D,MAAM,qBAAqB,GAAG,eAAe,CAAC;AAC9C,MAAM,gBAAgB,GAAG;;;;;;;;;;;;;CAaxB,CAAC;AACF,MAAM,uBAAuB,GAAG;;;CAG/B,CAAC;AAEF,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,yCAAyC;AACzC,MAAM,UAAU,GAAG,kBAAkB,CAAC;AACtC,MAAM,cAAc,GAAG,8BAA8B,CAAC;AACtD,MAAM,SAAS,GAAG,CAAC,SAAkB,EAAU,EAAE,CAAC;;;;;;;;;;;;oCAYd,SAAS,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+B1E,CAAC;AACF,MAAM,QAAQ,GAAG;;;CAGhB,CAAC;AAEF,+BAA+B;AAC/B,2EAA2E;AAC3E,qDAAqD;AACrD,MAAM,SAAS,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgKjB,CAAC;AACF,MAAM,OAAO,GAAG;;;sBAGM,CAAC;AACvB,0EAA0E;AAC1E,uCAAuC;AACvC,MAAM,CAAC,MAAM,QAAQ,GAAG;;;;;;;CAOvB,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uFA4KW,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,EAAE;;;;;;;;;;;;;EAa3H,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,EAAE;EACtC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,EAAE;;;;;;;;;;;;;+FAa0D,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,EAAE;;;EAGxI,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,uBAAuB,CAAC,CAAC,CAAC,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAgG7C,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE;;;;;;;;0CAQU,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2BA4CjD,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,sCAAsC,CAAC,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,2BAA2B,CAAC,CAAC,CAAC,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAkE9G,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE;;;;;;;;;;;eAW5B,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,2CAA2C,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAiN3G,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE;;;;;;;;;;MAU5F,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE;;EAE7B,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE;;;;;;;;;;;;;;;;;;;MAmBzB,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAmH3B,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,uBAAuB,CAAC,CAAC,CAAC,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uEAoI2B,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAwG7H,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAoItC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kFA0D0C,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAqCxE,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,wBAAwB,CAAC,CAAC,CAAC,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;EA0B3C,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,EAAE;;;;;;;;;EASvC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyG5B,CAAC;AACF,CAAC"}

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

@@ -18,5 +18,5 @@ export declare function renderArchitectureHtml(validated: ValidatedIr, layout: L
  * 드릴다운 HTML. 레벨마다 미리 그린 캔버스를 한 파일에 넣고 하나만 보이게 한다.
  * 같은 입력이면 같은 바이트가 나온다. shared면 private 근거를 가린 사본으로 그린다.
  */
-export declare function renderDrilldownHtml(validated: ValidatedIr, drilldown: Drilldown, opts: RenderArchitectureHtmlOptions): string;
+export declare function renderDrilldownHtml(validated: ValidatedIr, drilldownIn: Drilldown, opts: RenderArchitectureHtmlOptions): string;
 //# sourceMappingURL=html-renderer.d.ts.map

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;AA8BnG,OAAO,EAIL,KAAK,YAAY,EAClB,MAAM,aAAa,CAAC;AAiCrB,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;AAkFD,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;AA+9CD;;;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,CAsJR"}
+{"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;AA+BnG,OAAO,EAIL,KAAK,YAAY,EAClB,MAAM,aAAa,CAAC;AAiCrB,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;AAkFD,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;AAm/CD;;;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,WAAW,EAAE,SAAS,EACtB,IAAI,EAAE,6BAA6B,GAClC,MAAM,CA+KR"}

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

@@ -1,7 +1,8 @@
 import { BAND_LINE_X, BAND_LINE_Y, BAND_TITLE_HALF, BAND_TITLE_X, CANVAS_PAD_TOP, CANVAS_PAD_X, LANE_INSET_Y, routeCanvas, } from './canvas-geometry.js';
 import { flowCountByService, ROOT_LEVEL_ID } from './drilldown.js';
+import { computeFlowLayout } from './flow-layout.js';
 import { renderClientScript, THEME_BOOT_SCRIPT } from './html-client.js';
-import { datastoreEngine, iconUse, PRODUCT_COLORS, renderCss, renderIconSprite, VIEW_CSS, DOC_CSS, FLOW_BRANCH_CSS, SEQ_VIEW_CSS, } from './html-theme.js';
+import { datastoreEngine, iconUse, PRODUCT_COLORS, renderCss, renderIconSprite, VIEW_CSS, CAPTURE_CSS, DOC_CSS, FLOW_BRANCH_CSS, SEQ_VIEW_CSS, } from './html-theme.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';
@@ -550,7 +551,7 @@ function roundedPathD(points) {
  * 흐름 레벨 하나. 행위자마다 가로줄을 깔고 단계 카드를 왼쪽에서 오른쪽으로 놓는다.
  * 카드는 노드 카드와 같은 .node라 강조와 검색, 질문 이동을 그대로 탄다. data-node-id 자리에 단계 id가 들어간다
  */
-function renderFlowSection(level, flow, questionCount, drawableNodes) {
+function renderFlowSection(level, flow, questionCount, drawableNodes, captureOf) {
     const { layout } = level;
     const width = round2(layout.width + FLOW_PAD * 2);
     const height = round2(layout.height + FLOW_PAD * 2);
@@ -628,6 +629,21 @@ function renderFlowSection(level, flow, questionCount, drawableNodes) {
             `<path class="edge" d="${d}" stroke-width="2"${dash}/><polygon class="tip" points="${tip}"/>${text}</g>`);
     })
         .join('');
+    // 선 레이어보다 먼저 놓아 전이 선이 썸네일 위로 지나가게 한다. 선이 가려지면 있는 연결이 없는 것처럼 읽힌다
+    const thumbs = layout.steps
+        .map((b) => {
+        if (b.thumb === undefined)
+            return '';
+        const cap = (stepById.get(b.id).refs ?? [])
+            .map((r) => captureOf.get(r))
+            .find((c) => c !== undefined);
+        if (cap === undefined)
+            return '';
+        return (`<div class="flow-thumb" data-step-id="${escapeHtml(b.id)}" ` +
+            `style="left:${round2(b.x + FLOW_PAD)}px;top:${round2(b.thumb.y + FLOW_PAD)}px;width:${b.width}px;height:${b.thumb.height}px">` +
+            `<img src="${escapeHtml(cap.image)}" alt="${escapeHtml(`${cap.label} 화면 캡처`)}" loading="lazy" draggable="false"></div>`);
+    })
+        .join('');
     const cards = layout.steps
         .map((b) => {
         const st = stepById.get(b.id);
@@ -669,6 +685,7 @@ function renderFlowSection(level, flow, questionCount, drawableNodes) {
         .join('');
     return (`<section class="level flow-level" data-level-id="${escapeHtml(level.id)}" data-flow-id="${escapeHtml(level.flowId)}" ` +
         `aria-label="${escapeHtml(solo !== undefined ? `${flow.title}, 행위자 ${solo.actor.label}` : flow.title)}" data-w="${width}" data-h="${height}" style="width:${width}px;height:${height}px" hidden>` +
+        thumbs +
         `<svg class="links" xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}" viewBox="0 0 ${width} ${height}" ` +
         `role="group" aria-label="${escapeHtml(`${flow.title} 전이`)}"><g class="lanes">${lanes}${dividers}</g><g class="edges">${links}</g></svg>` +
         `${stageHeads}${heads}${cards}</section>`);
@@ -1292,8 +1309,8 @@ function renderBar(title, drill, generatedAt, nodeCount, edgeCount, questionCoun
 }
 const clientScripts = new Map();
 /** 칩 글자와 설명, 레인 제목은 IR이 쓰는 팩 것만 싣는다. 팩을 더해도 그 팩을 안 쓰는 그림의 바이트가 그대로다 */
-function clientScriptFor(vocab, rootFlows, views, mixedBundles, sequences, flowBranches) {
-    const key = `${vocab.packIds.join(',')}|${rootFlows}|${views}|${mixedBundles}|${sequences}|${flowBranches}`;
+function clientScriptFor(vocab, rootFlows, views, mixedBundles, sequences, flowBranches, captures) {
+    const key = `${vocab.packIds.join(',')}|${rootFlows}|${views}|${mixedBundles}|${sequences}|${flowBranches}|${captures}`;
     const hit = clientScripts.get(key);
     if (hit !== undefined)
         return hit;
@@ -1327,6 +1344,7 @@ function clientScriptFor(vocab, rootFlows, views, mixedBundles, sequences, flowB
         mixedBundles,
         sequences,
         ...(flowBranches ? { flowBranches } : {}),
+        ...(captures ? { captures } : {}),
         docs: vocab.packIds.includes('knowledge'),
     });
     clientScripts.set(key, script);
@@ -1355,6 +1373,7 @@ function renderPage({ ir, payload, sections, drill, flows, views, mixedBundles =
             flows.drawnSteps.has(t.from) &&
             flows.drawnSteps.has(t.to)));
     const soloActor = drawnFlows.some((f) => f.actors.length === 1);
+    const hasCaptures = ir.nodes.some((n) => n.capture !== undefined);
     return [
         '<!doctype html>',
         '<html lang="ko">',
@@ -1363,7 +1382,7 @@ function renderPage({ ir, payload, sections, drill, flows, views, mixedBundles =
         '<meta name="viewport" content="width=device-width, initial-scale=1">',
         `<title>${escapeHtml(title)}</title>`,
         `<script>${THEME_BOOT_SCRIPT}</script>`,
-        `<style>${renderCss(vocab)}${hasViews ? `\n${VIEW_CSS}` : ''}${hasSequences ? `\n${SEQ_VIEW_CSS}` : ''}${vocab.packIds.includes('knowledge') ? `\n${DOC_CSS}` : ''}${flowBranches || soloActor ? `\n${FLOW_BRANCH_CSS}` : ''}</style>`,
+        `<style>${renderCss(vocab)}${hasViews ? `\n${VIEW_CSS}` : ''}${hasSequences ? `\n${SEQ_VIEW_CSS}` : ''}${vocab.packIds.includes('knowledge') ? `\n${DOC_CSS}` : ''}${hasCaptures ? `\n${CAPTURE_CSS}` : ''}${flowBranches || soloActor ? `\n${FLOW_BRANCH_CSS}` : ''}</style>`,
         '</head>',
         '<body>',
         renderIconSprite(vocab),
@@ -1390,7 +1409,7 @@ function renderPage({ ir, payload, sections, drill, flows, views, mixedBundles =
             ? '<div id="flow-pop" class="pop" role="dialog" aria-label="흐름 고르기" tabindex="-1" hidden><h3>흐름</h3><ul class="flow-list"></ul></div>'
             : '') + (hasViews ? `\n${renderViewsPop(views)}` : ''),
         `<script id="ir" type="application/json">${embedJson(stableStringify(payload))}</script>`,
-        `<script>${clientScriptFor(vocab, hasFlows && flows.flows.some((f) => f.service === undefined), hasViews, mixedBundles, hasSequences, flowBranches)}</script>`,
+        `<script>${clientScriptFor(vocab, hasFlows && flows.flows.some((f) => f.service === undefined), hasViews, mixedBundles, hasSequences, flowBranches, hasCaptures)}</script>`,
         '</body>',
         '</html>',
         '',
@@ -1423,9 +1442,24 @@ export function renderArchitectureHtml(validated, layout, opts) {
  * 드릴다운 HTML. 레벨마다 미리 그린 캔버스를 한 파일에 넣고 하나만 보이게 한다.
  * 같은 입력이면 같은 바이트가 나온다. shared면 private 근거를 가린 사본으로 그린다.
  */
-export function renderDrilldownHtml(validated, drilldown, opts) {
+export function renderDrilldownHtml(validated, drilldownIn, opts) {
     const shared = opts.audience === 'shared';
     const ir = shared ? redactForSharing(validated.ir) : validated.ir;
+    // 공유본은 캡처를 싣지 않으니 썸네일 자리도 비운다. 자리만 남기면 빈 칸이 어디 있는지 드러난다
+    const drilldown = shared
+        ? {
+            ...drilldownIn,
+            flows: drilldownIn.flows.map((l) => l.layout.steps.some((b) => b.thumb !== undefined)
+                ? {
+                    ...l,
+                    layout: computeFlowLayout(l.flow, validated.drawableStepIds, validated.drawableTransitionIds),
+                }
+                : l),
+        }
+        : drilldownIn;
+    const captureOf = new Map(ir.nodes.flatMap((n) => n.capture !== undefined
+        ? [[n.id, { image: n.capture.image, label: nodeName(n) }]]
+        : []));
     const base = buildPayload(ir, validated, shared);
     const docCover = docCoverSpec(base.nodes, base.docOverlay);
     const nodeById = new Map(base.nodes.map((n) => [n.id, n]));
@@ -1524,7 +1558,7 @@ export function renderDrilldownHtml(validated, drilldown, opts) {
             }
             : {}),
     }))
-        .concat(flowLevels.map(({ level, flow }) => renderFlowSection(level, flow, questionCount, drawableNodes)))
+        .concat(flowLevels.map(({ level, flow }) => renderFlowSection(level, flow, questionCount, drawableNodes, captureOf)))
         .concat(views.map((v) => {
         const p = v.projection;
         if (p.shape === 'dataflow') {