refactor(M02): 흐름도 — 시험판 Entry 지움 · 패널 「흐름도」 단추 하나(접기 · 펴기) · 끌기 손잡이 늘 보임(사용자 지시)

- M02_DF_Entry.ts · .css 지움(아무도 안 부름) · Paper · 상세 내용 틀이 쓰던 꾸밈 18 규칙은 M02_DF_Paper.css 로 옮김
- Paper 의 시험 로직(DF-) 받기 지움 — 다른 로직은 부르는 쪽 logics 로만
- 패널: 머리 「접기」 · 띠 「흐름도 ▸」 → 「흐름도」 단추 하나(펼치면 머리 · 접으면 띠 · aria-expanded) · 접기 전 너비 기억(펴면 그 너비)
- 끌기 손잡이: 세로 막대 + 가운데 잡이 늘 보임 · 올리면 강조
- typecheck · DataFlow 전부 검사 초록 · 시험 10 통과 · ORCA: 단추 머리 ↔ 띠 · onResize 560 → 40 → 560

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Ly2oHAaTDYRjcniAmHR81z

M02_MasterTemplete/DataFlow/M02_DF_Panel.ts

@@ -16,9 +16,9 @@ import "./M02_DF_Panel.css";
 
 const TEXT = {
   Big: ["크게 보기", "Full screen"],
-  Fold: ["접기", "Collapse"],
-  Strip: ["흐름도 ▸", "Flow ▸"],
-  StripTitle: ["흐름도 펴기", "Open the flow panel"],
+  Toggle: ["흐름도", "Flow"],
+  ToggleOpen: ["흐름도 펴기", "Open the flow panel"],
+  ToggleClose: ["흐름도 접기", "Collapse the flow panel"],
   Close: ["닫기", "Close"],
   Detail: ["상세 내용", "Details"],
   Cost: ["원가 · 검증", "Cost · check"],
@@ -108,6 +108,23 @@ export function mountFlowPanel(host: HTMLElement, opts: FlowPanelOpts): FlowPane
   const sm = (label: string, onClick: () => void, variant: "ghost" | "filled" = "ghost") =>
     createButton({ label, size: "sm", variant, onClick });
 
+  /* 「흐름도」 단추 하나 — 누르면 접고 · 다시 누르면 펼침(펼치면 머리 · 접으면 얇은 띠에 놓임) */
+  const toggle = createButton({
+    label: tf("Toggle"),
+    size: "sm",
+    variant: "ghost",
+    onClick: () => setFolded(!folded),
+  });
+  toggle.classList.add("m02-dfp__toggle");
+  const head = el("header", {
+    className: "m02-dfp__head",
+    children: [
+      toggle,
+      el("strong", { className: "m02-dfp__title", text: opts.title }),
+      sm(tf("Big"), () => expand()),
+    ],
+  });
+
   /* 펼친 패널 */
   const costBox = el("details", {
     className: "m02-dfp__cost",
@@ -117,31 +134,12 @@ export function mountFlowPanel(host: HTMLElement, opts: FlowPanelOpts): FlowPane
   const tools = el("div", { className: "m02-dfp__tools", children: [undo] });
   const open = el("div", {
     className: "m02-dfp__open",
-    children: [
-      el("header", {
-        className: "m02-dfp__head",
-        children: [
-          el("strong", { className: "m02-dfp__title", text: opts.title }),
-          sm(tf("Big"), () => expand()),
-          sm(tf("Fold"), () => setFolded(true)),
-        ],
-      }),
-      tools,
-      note,
-      diagram,
-      detail,
-      costBox,
-    ],
+    children: [head, tools, note, diagram, detail, costBox],
   });
   costBox.append(summary);
 
-  /* 접힌 띠 */
-  const strip = el("button", {
-    className: "m02-dfp__strip",
-    text: tf("Strip"),
-    attrs: { type: "button", title: tf("StripTitle"), "aria-label": tf("StripTitle") },
-  });
-  strip.addEventListener("click", () => setFolded(false));
+  /* 접힌 띠 — 같은 「흐름도」 단추만 */
+  const strip = el("div", { className: "m02-dfp__strip" });
 
   /* 왼쪽 가장자리 — 끌기 · 화살표 키 */
   const grip = el("div", {
@@ -195,12 +193,18 @@ export function mountFlowPanel(host: HTMLElement, opts: FlowPanelOpts): FlowPane
   });
 
   const setFolded = (on: boolean): void => {
+    // 접기 전 너비를 기억 — 끈 적이 없어도 펴면 그 너비로
+    if (on && !folded && width === null && root.isConnected)
+      width = Math.round(root.getBoundingClientRect().width);
     folded = on;
     writeStore(FOLD_KEY, on ? "1" : "0");
     root.classList.toggle("is-folded", on);
     open.hidden = on;
     strip.hidden = !on;
     grip.hidden = on;
+    (on ? strip : head).prepend(toggle);
+    toggle.setAttribute("aria-expanded", String(!on));
+    toggle.title = tf(on ? "ToggleOpen" : "ToggleClose");
     tell();
     if (!on) paper.refit();
   };