@tienne/gestalt 0.91.0 → 0.93.0

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

@@ -1,7 +1,7 @@
 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 { renderClientScript, THEME_BOOT_SCRIPT } from './html-client.js';
-import { datastoreEngine, iconUse, PRODUCT_COLORS, renderCss, renderIconSprite, VIEW_CSS, DOC_CSS, } from './html-theme.js';
+import { datastoreEngine, iconUse, PRODUCT_COLORS, renderCss, renderIconSprite, VIEW_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';
@@ -10,6 +10,7 @@ import { KNOWLEDGE_COVERAGE_KINDS, KNOWLEDGE_DOC_KINDS } from './packs/knowledge
 import { computeCompareLayout } from './compare-layout.js';
 import { computeDataflowLayout } from './dataflow-layout.js';
 import { computeSequenceLayout } from './sequence-layout.js';
+import { clipText, computePhaseBoard, computeWalkLayout, phaseMetaText, resolveSequencePhases, sequenceCallDepths, } from './sequence-views.js';
 import { computeServiceFacts } from './service-facts.js';
 import { chipTextOverride, displayKindOf, hasCardDescription } from './types.js';
 import { maskSharedText, redactForSharing } from './validator.js';
@@ -57,6 +58,9 @@ const FLOW_TEXT = {
     side: '옆 흐름',
     back: '앞 단계로 되돌아감',
     end: '흐름 끝',
+    decision: '갈림길',
+    trigger: '누른 것',
+    condition: '조건',
     person: '사람',
     system: '시스템',
 };
@@ -567,13 +571,19 @@ function renderFlowSection(level, flow, questionCount, drawableNodes) {
         `y1="${round2(laneTop + FLOW_PAD)}" y2="${round2(laneBottom + FLOW_PAD)}"/>`)
         .join('');
     const stageHeads = layout.stages
-        .map((st) => `<div class="fstage${st.side ? ' side' : named(st.label)}" style="left:${round2(st.x + FLOW_PAD + 8)}px;top:${FLOW_PAD}px;width:${round2(st.width - 16)}px" ` +
+        .map((st) => `<div class="fstage${st.side ? ' side' : named(st.label)}" style="left:${round2(st.x + FLOW_PAD + 8)}px;top:${FLOW_PAD + layout.stageTop}px;width:${round2(st.width - 16)}px" ` +
         `title="${escapeHtml(st.side ? st.label : stateText(st.label))}"><span>${escapeHtml(st.side ? st.label : stateText(st.label))}</span></div>`)
         .join('');
-    const heads = layout.lanes
-        .map((l) => `<div class="flane-title a-${l.actor.kind}" style="left:${FLOW_PAD + 12}px;top:${round2(l.y + FLOW_PAD + 12)}px">` +
-        `${iconUse(l.actor.kind === 'person' ? 'u-person' : l.actor.kind === 'agent' ? 'i-agent' : 'u-system')}<span>${escapeHtml(l.actor.label)}</span></div>`)
-        .join('');
+    const actorIcon = (kind) => iconUse(kind === 'person' ? 'u-person' : kind === 'agent' ? 'i-agent' : 'u-system');
+    // 행위자가 한 명이면 머리 칸이 없다. 누가 하는 흐름인지는 맨 위 띠의 칩 하나로 알린다
+    const solo = layout.headWidth === 0 ? layout.lanes[0] : undefined;
+    const heads = solo !== undefined
+        ? `<div class="flane-actor a-${solo.actor.kind}" style="left:${FLOW_PAD + 4}px;top:${FLOW_PAD}px">` +
+            `${actorIcon(solo.actor.kind)}<span>${escapeHtml(solo.actor.label)}</span></div>`
+        : layout.lanes
+            .map((l) => `<div class="flane-title a-${l.actor.kind}" style="left:${FLOW_PAD + 12}px;top:${round2(l.y + FLOW_PAD + 12)}px">` +
+            `${actorIcon(l.actor.kind)}<span>${escapeHtml(l.actor.label)}</span></div>`)
+            .join('');
     const labelOf = (id) => stepById.get(id)?.label ?? id;
     const links = layout.transitions
         .map((r) => {
@@ -585,17 +595,32 @@ function renderFlowSection(level, flow, questionCount, drawableNodes) {
         const who = actorNames.join(', ');
         // 선 위에는 괄호 앞 이름만 싣는다. "고객 (앱, QR, 알림톡 웹)"을 다 쓰면 선 글자가 카드 폭을 넘는다
         const whoShort = actorNames.map((n) => n.replace(/\s*\([^)]*\)\s*$/, '')).join(', ');
+        // 누른 것이나 조건이 있으면 선에는 그 둘을 찍고 label은 서랍의 메모로만 보인다
+        const rich = t.trigger !== undefined || t.condition !== undefined;
+        const richParts = [
+            ...(t.condition !== undefined ? [`${FLOW_TEXT.condition} ${t.condition}`] : []),
+            ...(t.trigger !== undefined ? [`${FLOW_TEXT.trigger} ${t.trigger}`] : []),
+        ];
         const name = `${FLOW_TEXT[r.path]}${r.back ? `, ${FLOW_TEXT.back}` : ''}: ${labelOf(r.from)} → ${labelOf(r.to)}` +
-            (t.label !== undefined ? ` (${t.label})` : '') +
+            (rich ? ` (${richParts.join(', ')})` : t.label !== undefined ? ` (${t.label})` : '') +
             (who !== '' ? `, 누가 ${who}` : '');
+        const richText = (t.condition !== undefined
+            ? `<tspan class="t-cond">${escapeHtml(t.condition)}${t.trigger !== undefined ? ' ' : ''}</tspan>`
+            : '') + (t.trigger !== undefined ? escapeHtml(t.trigger) : '');
         const text = r.labelAt
-            ? `<text class="t-label" x="${round2(r.labelAt.x + FLOW_PAD)}" y="${round2(r.labelAt.y + FLOW_PAD - 5)}">` +
-                (r.back ? '<tspan class="t-back">↩ </tspan>' : '') +
-                (t.label !== undefined ? escapeHtml(t.label) : '') +
-                (whoShort !== ''
-                    ? `<tspan class="t-who">${t.label !== undefined ? ' · ' : ''}${escapeHtml(whoShort)}</tspan>`
-                    : '') +
-                `</text>`
+            ? rich
+                ? `<text class="t-label${r.labelAnchor === 'start' ? ' at-start' : ''}" x="${round2(r.labelAt.x + FLOW_PAD)}" y="${round2(r.labelAt.y + FLOW_PAD - 5)}">` +
+                    (r.back ? '<tspan class="t-back">↩ </tspan>' : '') +
+                    richText +
+                    (whoShort !== '' ? `<tspan class="t-who"> · ${escapeHtml(whoShort)}</tspan>` : '') +
+                    `</text>`
+                : `<text class="t-label${r.labelAnchor === 'start' ? ' at-start' : ''}" x="${round2(r.labelAt.x + FLOW_PAD)}" y="${round2(r.labelAt.y + FLOW_PAD - 5)}">` +
+                    (r.back ? '<tspan class="t-back">↩ </tspan>' : '') +
+                    (t.label !== undefined ? escapeHtml(t.label) : '') +
+                    (whoShort !== ''
+                        ? `<tspan class="t-who">${t.label !== undefined ? ' · ' : ''}${escapeHtml(whoShort)}</tspan>`
+                        : '') +
+                    `</text>`
             : '';
         return (`<g class="link flow-t p-${r.path}${r.back ? ' back' : ''}" data-from="${escapeHtml(r.from)}" data-to="${escapeHtml(r.to)}" ` +
             `data-transition-id="${escapeHtml(r.id)}" tabindex="0" role="button" aria-label="${escapeHtml(name)}">` +
@@ -610,16 +635,23 @@ function renderFlowSection(level, flow, questionCount, drawableNodes) {
         const refs = (st.refs ?? []).filter((id) => drawableNodes.has(id));
         const qs = questionCount.get(st.id) ?? 0;
         const dashed = st.evidence.every((ev) => ev.type !== 'code' && ev.type !== 'spec');
+        const decision = b.shape === 'diamond';
         const cls = ['node', 'flow-step', `p-${b.path}`];
+        if (decision)
+            cls.push('decision');
         if (dashed)
             cls.push('doc-only');
-        const aria = `${st.label}, ${FLOW_TEXT.step}, ${actor?.label ?? st.actor}` +
+        const aria = `${st.label}, ${decision ? FLOW_TEXT.decision : FLOW_TEXT.step}, ${actor?.label ?? st.actor}` +
             (st.state !== undefined ? `, 상태 ${stateText(st.state)}` : '') +
             (st.terminal ? `, ${FLOW_TEXT.end}` : '') +
             (dashed ? ', 문서로만 확인' : '');
         return (`<div class="${cls.join(' ')}" data-node-id="${escapeHtml(st.id)}" role="button" tabindex="0" ` +
             `aria-label="${escapeHtml(aria)}" title="${escapeHtml(st.description ?? st.label)}" ` +
             `style="left:${round2(b.x + FLOW_PAD)}px;top:${round2(b.y + FLOW_PAD)}px;width:${b.width}px;height:${b.height}px">` +
+            (decision
+                ? `<svg class="dshape" viewBox="0 0 ${b.width} ${b.height}" preserveAspectRatio="none" aria-hidden="true">` +
+                    `<polygon points="${b.width / 2},1 ${b.width - 1},${b.height / 2} ${b.width / 2},${b.height - 1} 1,${b.height / 2}"/></svg>`
+                : '') +
             `<span class="nm"><span class="t">${escapeHtml(st.label)}</span></span>` +
             `<span class="l2">` +
             (st.state !== undefined
@@ -636,7 +668,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(flow.title)}" data-w="${width}" data-h="${height}" style="width:${width}px;height:${height}px" hidden>` +
+        `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>` +
         `<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>`);
@@ -812,6 +844,206 @@ function stickyHeadBar(heads, width) {
     const h = heads.reduce((m, b) => Math.max(m, b.height), 0);
     return `<div class="seq-sticky" style="top:${CANVAS_PAD_TOP - STICKY_PAD}px;width:${width}px;height:${h + STICKY_PAD * 2}px"></div>`;
 }
+/** 순서도 메시지의 읽기 이름. 순서도 보기와 같은 꼴이다 */
+function sequenceMessageName(n, m, nameOf) {
+    return (`${n}. ${nameOf(m.from)} → ${nameOf(m.to)}: ${m.label}` +
+        (m.reply ? ', 응답' : '') +
+        (m.lineStyle === 'dashed' ? ', 문서로만 확인' : ''));
+}
+/**
+ * 순서도 옆에 두는 두 보기, 단계별 카드와 따라가기. 순서도 섹션은 그대로 두고 형제 섹션으로 붙인다.
+ * data-level-id가 없어 레벨 목록에 안 잡히고 보기 단추로만 바뀐다
+ */
+function renderSequenceAlts(levelId, projection, layout, drawn, nodeById, services, whereOf, edges) {
+    const nameOf = (id) => {
+        const n = nodeById.get(id);
+        return n ? nodeName(n) : id;
+    };
+    const order = layout.heads.map((h) => h.id);
+    const phases = resolveSequencePhases(projection, drawn, order, nameOf);
+    if (phases.length === 0)
+        return undefined;
+    const messages = projection.messages.filter((m) => drawn.has(m.id));
+    const numberById = new Map(layout.messages.map((b) => [b.id, b.n]));
+    const numberOf = (id) => numberById.get(id) ?? 0;
+    const blockText = new Map((projection.blocks ?? []).map((b) => [b.id, `${SEQUENCE_BLOCK_TEXT[b.kind]} [${b.label}]`]));
+    const of = escapeHtml(levelId);
+    const cards = renderPhaseCards(of, projection, phases, numberOf, nodeById, nameOf);
+    const walk = renderWalk(of, projection, phases, messages, layout, nodeById, services, whereOf, edges, numberOf);
+    const phaseOf = new Map(phases.flatMap((ph) => ph.messageIds.map((id) => [id, ph])));
+    const messageById = new Map(messages.map((m) => [m.id, m]));
+    const steps = phases
+        .map((ph) => {
+        const items = ph.messageIds
+            .map((id) => {
+            const m = messageById.get(id);
+            const say = `${m.reply ? '↩ ' : ''}${m.label}`;
+            const block = m.block !== undefined
+                ? `${blockText.get(m.block) ?? ''}${m.branch !== undefined ? `, ${m.branch}` : ''}`
+                : '';
+            return (`<li><button type="button" data-n="${numberOf(id)}" data-phase="${escapeHtml(phaseOf.get(id).label)}" ` +
+                `data-say="${escapeHtml(say)}" data-block="${escapeHtml(block)}">${numberOf(id)}. ${escapeHtml(say)}</button></li>`);
+        })
+            .join('');
+        return `<li class="ss-phase"><h4>${escapeHtml(ph.label)}</h4><ol>${items}</ol></li>`;
+    })
+        .join('');
+    return {
+        sections: `${cards}\n${walk}`,
+        steps: `<ol class="ss-list" data-seq-of="${of}" hidden>${steps}</ol>`,
+    };
+}
+function seqAltSection(levelIdAttr, mode, name, projection, width, height, body) {
+    return (`<section class="level view-level seq-alt seq-${mode}" data-seq-of="${levelIdAttr}" data-seq-mode="${mode}" ` +
+        `aria-label="${escapeHtml(`${projection.title} ${name}`)}" data-w="${width}" data-h="${height}" ` +
+        `style="width:${width}px;height:${height}px" hidden>` +
+        `<p class="view-q" style="left:${CANVAS_PAD_X}px">${escapeHtml(projection.question)}</p>${body}</section>`);
+}
+const SEQ_ALT_BOTTOM = 32;
+const MINI_ARROW = 6;
+/** 단계별 카드. 카드마다 그 구간 참여자만 가진 작은 순서도를 그리고 카드 사이에 화살표를 둔다 */
+function renderPhaseCards(levelIdAttr, projection, phases, numberOf, nodeById, nameOf) {
+    const board = computePhaseBoard(phases, projection, numberOf);
+    const px = (x) => round2(x + CANVAS_PAD_X);
+    const py = (y) => round2(y + CANVAS_PAD_TOP);
+    const width = round2(board.width + CANVAS_PAD_X * 2);
+    const height = round2(board.height + CANVAS_PAD_TOP + SEQ_ALT_BOTTOM);
+    const phaseById = new Map(phases.map((ph) => [ph.id, ph]));
+    const messageById = new Map(projection.messages.map((m) => [m.id, m]));
+    const cards = board.cards
+        .map((card) => {
+        const ph = phaseById.get(card.phaseId);
+        const title = `${card.index}. ${ph.label}`;
+        return (`<div class="seq-phase" role="group" aria-label="${escapeHtml(title)}" ` +
+            `style="left:${px(card.x)}px;top:${py(card.y)}px;width:${card.width}px;height:${card.height}px">` +
+            `<h3 title="${escapeHtml(title)}">${escapeHtml(title)}</h3><p class="sp-meta">${phaseMetaText(ph)}</p>` +
+            miniSequenceSvg(card, projection, messageById, nodeById, nameOf) +
+            `</div>`);
+    })
+        .join('');
+    const arrows = board.arrows
+        .map((a) => `<span class="sp-arrow" aria-hidden="true" style="left:${round2(px(a.x) - 18)}px;top:${round2(py(a.y) - 14)}px">→</span>`)
+        .join('');
+    return seqAltSection(levelIdAttr, 'cards', '단계별 카드', projection, width, height, cards + arrows);
+}
+function miniSequenceSvg(card, projection, messageById, nodeById, nameOf) {
+    const s = card.svg;
+    const blocks = s.blocks
+        .map((b) => {
+        const tag = SEQUENCE_BLOCK_TEXT[b.kind];
+        const tagW = textUnits(tag) * 6 + 12;
+        const room = Math.max(0, Math.floor((b.width - tagW - 20) / 6) - 2);
+        const branches = b.branches
+            .map((br) => `<line class="b-branch" x1="${b.x}" x2="${round2(b.x + b.width)}" y1="${br.y}" y2="${br.y}"/>` +
+            (br.label !== ''
+                ? `<text class="b-label" x="${b.x + 8}" y="${round2(br.y + 11)}">[${escapeHtml(clipText(br.label, room))}]</text>`
+                : ''))
+            .join('');
+        return (`<g class="seq-block b-${b.kind}"><rect x="${b.x}" y="${b.y}" width="${b.width}" height="${b.height}" rx="6"/>` +
+            `<path class="b-tab" d="M${b.x} ${round2(b.y + 14)}H${b.x + tagW}L${b.x + tagW + 6} ${round2(b.y + 8)}V${b.y}"/>` +
+            `<text class="b-kind" x="${b.x + 6}" y="${round2(b.y + 11)}">${tag}</text>` +
+            `<text class="b-label" x="${b.x + tagW + 12}" y="${round2(b.y + 11)}"><title>[${escapeHtml(b.label)}]</title>[${escapeHtml(clipText(b.label, room))}]</text>` +
+            `${branches}</g>`);
+    })
+        .join('');
+    const heads = s.heads
+        .map((h) => {
+        const n = nodeById.get(h.id);
+        const name = nameOf(h.id);
+        return (`<line class="sp-life" x1="${h.cx}" x2="${h.cx}" y1="${s.lifeline.y1}" y2="${s.lifeline.y2}"/>` +
+            `<g class="sp-head${n ? ` k-${displayKindOf(n)}` : ''}"><title>${escapeHtml(name)}</title>` +
+            `<rect x="${h.x}" y="${h.y}" width="${h.width}" height="${h.height}" rx="7"/>` +
+            `<text x="${h.cx}" y="${round2(h.y + h.height / 2 + 4)}" text-anchor="middle">${escapeHtml(clipText(name, 17))}</text></g>`);
+    })
+        .join('');
+    const links = s.messages
+        .map((box) => {
+        const m = messageById.get(box.id);
+        const dash = m.lineStyle === 'dashed' ? ` stroke-dasharray="${DASHED_PATTERN}"` : '';
+        const y = box.y;
+        let d;
+        let tip;
+        let labelX;
+        let labelY;
+        if (box.self) {
+            const x = box.x1;
+            const yb = round2(y + 4);
+            d = `M${x} ${round2(y - 6)}H${round2(x + 18)}V${yb}H${round2(x + 2)}`;
+            tip = [
+                `${round2(x + 2)},${yb}`,
+                `${round2(x + 2 + MINI_ARROW)},${round2(yb - MINI_ARROW / 2)}`,
+                `${round2(x + 2 + MINI_ARROW)},${round2(yb + MINI_ARROW / 2)}`,
+            ];
+            labelX = round2(x + 24);
+            labelY = round2(y + 2);
+        }
+        else {
+            const back = round2(box.x2 - (box.x2 > box.x1 ? 1 : -1) * MINI_ARROW);
+            d = `M${box.x1} ${y}H${box.x2}`;
+            tip = [
+                `${box.x2},${y}`,
+                `${back},${round2(y - MINI_ARROW / 2)}`,
+                `${back},${round2(y + MINI_ARROW / 2)}`,
+            ];
+            labelX = round2(Math.min(box.x1, box.x2) + 6);
+            labelY = round2(y - 4);
+        }
+        const name = sequenceMessageName(box.n, m, nameOf);
+        const head = m.reply
+            ? `<polyline class="tip open" points="${tip[1]} ${tip[0]} ${tip[2]}"/>`
+            : `<polygon class="tip" points="${tip.join(' ')}"/>`;
+        return (`<g class="link seq-m${m.reply ? ' reply' : ''}" data-from="${escapeHtml(m.from)}" data-to="${escapeHtml(m.to)}" ` +
+            `data-message-id="${escapeHtml(m.id)}" tabindex="0" role="button" aria-label="${escapeHtml(name)}">` +
+            `<title>${escapeHtml(name)}</title><path class="hit" d="${d}" stroke-width="10"/>` +
+            `<path class="edge" d="${d}" stroke-width="1.2"${dash}/>${head}` +
+            `<text class="m-label" x="${labelX}" y="${labelY}"><tspan class="m-n">${box.n}.</tspan> ${escapeHtml(clipText(m.label, box.labelUnits))}</text></g>`);
+    })
+        .join('');
+    return (`<svg class="sp-seq" xmlns="http://www.w3.org/2000/svg" width="${s.width}" height="${s.height}" viewBox="0 0 ${s.width} ${s.height}" ` +
+        `role="group" aria-label="${escapeHtml(`${projection.title} 메시지`)}">${blocks}${heads}${links}</svg>`);
+}
+/** 따라가기. 순서도 참여자만으로 만든 작은 지도 위에 단계마다 화살표 하나를 켠다. 어느 화살표를 켤지는 클라이언트가 정한다 */
+function renderWalk(levelIdAttr, projection, phases, messages, layout, nodeById, services, whereOf, edges, numberOf) {
+    const sizes = new Map(layout.heads.map((h) => [h.id, { width: h.width, height: h.height }]));
+    const depths = sequenceCallDepths(messages, layout.heads[0]?.id);
+    const walk = computeWalkLayout(phases, messages, depths, (id) => sizes.get(id), new Map(edges.map((e) => [e.id, e])), numberOf);
+    const width = round2(walk.width + CANVAS_PAD_X * 2);
+    const height = round2(walk.height + CANVAS_PAD_TOP + SEQ_ALT_BOTTOM);
+    const tipId = escapeHtml(`walk-tip-${projection.id}`);
+    const bands = walk.bands
+        .map((b) => `<text class="w-band" x="${b.x}" y="${b.y}">${escapeHtml(b.label)}</text>`)
+        .join('');
+    const lines = walk.edges.map((e) => `<path class="w-edge" d="${e.d}"/>`).join('');
+    const steps = walk.steps
+        .map((st) => `<path class="w-step" data-n="${st.n}" data-from="${escapeHtml(st.from)}" data-to="${escapeHtml(st.to)}" ` +
+        `data-message-id="${escapeHtml(st.messageId)}" d="${st.d}" marker-end="url(#${tipId})"/>`)
+        .join('');
+    const svg = `<svg class="links" xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}" viewBox="0 0 ${width} ${height}" ` +
+        `role="group" aria-label="${escapeHtml(`${projection.title} 따라가기 지도`)}">` +
+        `<defs><marker id="${tipId}" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto-start-reverse">` +
+        `<path class="w-tip" d="M0 0L10 5L0 10z"/></marker></defs>` +
+        `<g transform="translate(${CANVAS_PAD_X} ${CANVAS_PAD_TOP})"><g class="w-bands">${bands}</g><g class="w-edges">${lines}</g>` +
+        `<g class="w-steps">${steps}</g></g></svg>`;
+    const cards = viewCards(walk.nodes, nodeById, services, whereOf);
+    return seqAltSection(levelIdAttr, 'walk', '따라가기', projection, width, height, svg + cards);
+}
+/** 순서도 보기 전환 단추와 따라가기 자막. 순서도가 있는 그림에만 싣고 순서도 레벨에서만 보인다 */
+function renderSequenceUi(stepLists) {
+    const mode = (id, text, on) => `<button type="button" class="btn" data-seq-mode="${id}" aria-pressed="${on}">${text}</button>`;
+    return (`<div id="seq-bar" class="seq-bar" hidden>` +
+        `<div class="seq-modes" role="group" aria-label="순서도 보기">` +
+        mode('seq', '순서도', true) +
+        mode('cards', '단계별 카드', false) +
+        mode('walk', '따라가기', false) +
+        `</div>` +
+        `<div class="seq-cap" hidden><span class="sw-say" aria-live="polite"><span class="sw-n"></span><span class="sw-p"></span>` +
+        `<span class="sw-t"></span><span class="sw-b" hidden></span></span>` +
+        `<span class="sw-ctl"><button type="button" class="btn icon sw-prev" aria-label="이전 단계" title="이전 단계 (←)">◀</button>` +
+        `<button type="button" class="btn sw-play" aria-pressed="false">재생</button>` +
+        `<button type="button" class="btn icon sw-next" aria-label="다음 단계" title="다음 단계 (→)">▶</button></span></div>` +
+        `</div>\n` +
+        `<nav id="seq-steps" class="seq-steps" aria-label="단계 목록" hidden>${stepLists.join('')}</nav>`);
+}
 /** 데이터가 어디서 어디로 옮겨 가는지. 선 라벨이 옮겨 가는 데이터 이름이다 */
 function renderDataflowSection(levelId, projection, layout, nodeById, services) {
     const px = (x) => round2(x + CANVAS_PAD_X);
@@ -912,7 +1144,7 @@ function flowPayload(levels, flows, questions) {
         };
     });
 }
-function renderLegend(nodes, edges, drill, generatedAt, nodeCount, edgeCount, hasFlows = false) {
+function renderLegend(nodes, edges, drill, generatedAt, nodeCount, edgeCount, hasFlows = false, hasDecisions = false) {
     const nodeById = new Map(nodes.map((n) => [n.id, n]));
     const line = (extra) => `<svg width="36" height="12" aria-hidden="true"><line x1="3" y1="6" x2="33" y2="6" ${extra}/></svg>`;
     const kinds = [...new Set(nodes.map(displayKindOf))]
@@ -933,6 +1165,9 @@ function renderLegend(nodes, edges, drill, generatedAt, nodeCount, edgeCount, ha
             ? `<li>${line('stroke-width="2" class="side-line"')}주황 선: 흐름에서 정상 흐름을 벗어나는 옆 흐름</li>` +
                 `<li><span class="swatch-step"></span>점선 테두리 카드: 기획 문서로만 확인한 흐름 단계</li>`
             : '') +
+        (hasDecisions
+            ? `<li><span class="swatch-decision"></span>마름모: 조건에 따라 길이 갈리는 갈림길</li>`
+            : '') +
         `</ul>` +
         (kinds ? `<h3>항목</h3><ul class="legend-kinds">${kinds}</ul>` : '') +
         `<p class="foot">만든 시각 ${escapeHtml(generatedAt)}<br>항목 ${nodeCount}개, 연결 ${edgeCount}개</p></div>`);
@@ -1057,8 +1292,8 @@ function renderBar(title, drill, generatedAt, nodeCount, edgeCount, questionCoun
 }
 const clientScripts = new Map();
 /** 칩 글자와 설명, 레인 제목은 IR이 쓰는 팩 것만 싣는다. 팩을 더해도 그 팩을 안 쓰는 그림의 바이트가 그대로다 */
-function clientScriptFor(vocab, rootFlows, views, mixedBundles) {
-    const key = `${vocab.packIds.join(',')}|${rootFlows}|${views}|${mixedBundles}`;
+function clientScriptFor(vocab, rootFlows, views, mixedBundles, sequences, flowBranches) {
+    const key = `${vocab.packIds.join(',')}|${rootFlows}|${views}|${mixedBundles}|${sequences}|${flowBranches}`;
     const hit = clientScripts.get(key);
     if (hit !== undefined)
         return hit;
@@ -1090,6 +1325,8 @@ function clientScriptFor(vocab, rootFlows, views, mixedBundles) {
         rootFlows,
         views,
         mixedBundles,
+        sequences,
+        ...(flowBranches ? { flowBranches } : {}),
         docs: vocab.packIds.includes('knowledge'),
     });
     clientScripts.set(key, script);
@@ -1103,12 +1340,21 @@ function renderViewsPop(views) {
         .join('');
     return `<div id="views" class="pop" role="dialog" aria-label="질문별 그림" tabindex="-1" hidden><h3>질문별 그림</h3><ul class="flow-list view-list">${items}</ul></div>`;
 }
-function renderPage({ ir, payload, sections, drill, flows, views, mixedBundles = false, }) {
+function renderPage({ ir, payload, sections, drill, flows, views, mixedBundles = false, sequences = [], }) {
     const title = viewTitle(ir);
     const vocab = irVocabulary(ir);
     const nodeById = new Map(payload.nodes.map((n) => [n.id, n]));
     const hasFlows = flows !== undefined && flows.flows.length > 0;
     const hasViews = views !== undefined && views.length > 0;
+    const hasSequences = sequences.length > 0;
+    const drawnFlows = flows?.flows ?? [];
+    const hasDecisions = drawnFlows.some((f) => f.steps.some((st) => st.kind === 'decision' && flows.drawnSteps.has(st.id)));
+    // 누른 것과 조건, 갈림길, 행위자 한 명 띠는 그 흐름이 있을 때만 CSS와 코드를 싣는다. 예전 흐름 그림의 바이트를 지키려고서다
+    const flowBranches = hasDecisions ||
+        drawnFlows.some((f) => f.transitions.some((t) => (t.trigger !== undefined || t.condition !== undefined) &&
+            flows.drawnSteps.has(t.from) &&
+            flows.drawnSteps.has(t.to)));
+    const soloActor = drawnFlows.some((f) => f.actors.length === 1);
     return [
         '<!doctype html>',
         '<html lang="ko">',
@@ -1117,7 +1363,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}` : ''}${vocab.packIds.includes('knowledge') ? `\n${DOC_CSS}` : ''}</style>`,
+        `<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>`,
         '</head>',
         '<body>',
         renderIconSprite(vocab),
@@ -1131,19 +1377,20 @@ function renderPage({ ir, payload, sections, drill, flows, views, mixedBundles =
         '</div>',
         '</div>',
         `<p id="hint" class="hint"><span>${drill ? HINT_DRILL : HINT_FLAT}</span>` +
-            `<button type="button" id="hint-close" aria-label="안내 닫기">${iconUse('u-close')}</button></p>`,
+            `<button type="button" id="hint-close" aria-label="안내 닫기">${iconUse('u-close')}</button></p>` +
+            (hasSequences ? `\n${renderSequenceUi(sequences)}` : ''),
         '<details id="sheet" class="sheet" hidden><summary id="sheet-title">세부 연결</summary><div id="sheet-body" class="scroll"></div></details>',
         '<aside id="drawer" class="drawer" role="dialog" aria-modal="false" aria-labelledby="drawer-title" aria-hidden="true" inert>' +
             `<button type="button" id="drawer-close" class="btn icon dr-close" aria-label="닫기">${iconUse('u-close')}</button>` +
             '<div id="panel" class="panel" aria-live="polite"></div></aside>',
         '</div>',
-        renderLegend(payload.nodes, payload.edges, drill, ir.generatedAt, payload.nodes.length, payload.edges.length, hasFlows),
+        renderLegend(payload.nodes, payload.edges, drill, ir.generatedAt, payload.nodes.length, payload.edges.length, hasFlows, hasDecisions),
         renderQuestions(payload.unresolved, nodeById, ir.edges, flows?.flows ?? [], flows?.drawnSteps ?? new Set(), views?.flatMap((v) => v.projection.messages)),
         (hasFlows
             ? '<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)}</script>`,
+        `<script>${clientScriptFor(vocab, hasFlows && flows.flows.some((f) => f.service === undefined), hasViews, mixedBundles, hasSequences, flowBranches)}</script>`,
         '</body>',
         '</html>',
         '',
@@ -1240,6 +1487,7 @@ export function renderDrilldownHtml(validated, drilldown, opts) {
             messages: messagePayload(views, drawnMessages, base.unresolved, ir.edges),
         });
     }
+    const sequenceSteps = [];
     const rootFlowLinks = flowLevels
         .filter(({ flow }) => flow.service === undefined)
         .map(({ level, flow }) => ({ level: level.id, title: flow.title }))
@@ -1288,7 +1536,12 @@ export function renderDrilldownHtml(validated, drilldown, opts) {
             return renderCompareSection(v.level, p, layout, nodeById, base.services);
         }
         const layout = computeSequenceLayout(p, drawnMessages, nodeById, whereOf);
-        return renderSequenceSection(v.level, p, layout, nodeById, base.services, whereOf);
+        const section = renderSequenceSection(v.level, p, layout, nodeById, base.services, whereOf);
+        const alts = renderSequenceAlts(v.level, p, layout, drawnMessages, nodeById, base.services, whereOf, ir.edges);
+        if (!alts)
+            return section;
+        sequenceSteps.push(alts.steps);
+        return `${section}\n${alts.sections}`;
     }))
         .join('\n');
     return renderPage({
@@ -1299,6 +1552,7 @@ export function renderDrilldownHtml(validated, drilldown, opts) {
         ...(flowLevels.length > 0 ? { flows: { flows: drawnFlows, drawnSteps } } : {}),
         ...(views.length > 0 ? { views } : {}),
         mixedBundles: levels.some((l) => l.edges.some((e) => e.inferred !== undefined)),
+        ...(sequenceSteps.length > 0 ? { sequences: sequenceSteps } : {}),
     });
 }
 //# sourceMappingURL=html-renderer.js.map