Merge remote-tracking branch 'origin/sub_laptop_6' into sub_desktop_1

M01_MasterData/M01_MasterData_UI_LogicLab.ts

@@ -39,7 +39,6 @@ import { setLogicOpener } from "./M01_MasterData_UI_LogicLab_Modal";
 import { openCopyScreen } from "./M01_MasterData_UI_LogicLab_Copy";
 import { tl } from "./M01_MasterData_UI_LogicLab_Text";
 import {
-  buildSplit,
   emptyFlow,
   designFields,
   examplesOf,
@@ -128,10 +127,8 @@ export async function mountM01LogicLab(
     .catch(() => false);
   let recalc: number | undefined;
   const editor = el("div", { className: "m01-logic__editor" });
-  // 로직 상세 두 칸 — 왼쪽 지금 내용 · 오른쪽 흐름도(패널 자리) · 너비 비율 기억
-  const split = buildSplit(editor);
-  // 오른쪽 두 패널(흐름도 · 원문) — 하나만 열림 · 흐름도는 이 칸 안에 띄움
-  const panes = buildLogicSide(split);
+  // 로직 상세 — 왼쪽 지금 내용 · 오른쪽 접는 패널 둘(흐름도 · 원문 · 하나만 열림 · 폭 공유)
+  const panes = buildLogicSide(editor);
   const errors = el("div", { className: "m01-logic__reasons", attrs: { hidden: "" } });
   const calc = el("div", { className: "m01lab__calc" });
   const filterHost = el("div");
@@ -228,7 +225,7 @@ export async function mountM01LogicLab(
     const listing = !opened;
     list.root.hidden = !listing || !loaded;
     waiting.hidden = loaded;
-    split.root.hidden = !opened;
+    panes.root.hidden = !opened;
     back.hidden = listing;
     if (!opened) return;
     if (!opened.row) {
@@ -570,7 +567,7 @@ export async function mountM01LogicLab(
       children: [
         el("main", {
           className: "m01-logic__main",
-          children: [bar, errors, waiting, list.root, split.root],
+          children: [bar, errors, waiting, list.root, panes.root],
         }),
       ],
     }),

M01_MasterData/M01_MasterData_UI_LogicLab_Flow.css

@@ -1,35 +1,3 @@
-/* 로직 상세 두 칸 — 왼쪽 지금 내용 · 끌기 막대 · 오른쪽 흐름도 */
-.m01lab-flow {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
-  align-items: start;
-  gap: 0;
-}
-
-.m01lab-flow[hidden] {
-  display: none;
-}
-
-.m01lab-flow__left,
-.m01lab-flow__right {
-  min-width: 0;
-}
-
-.m01lab-flow__bar {
-  align-self: stretch;
-  width: 8px;
-  margin: 0 var(--spacing-4);
-  border-radius: var(--radius-sm);
-  background: var(--color-border);
-  cursor: col-resize;
-  touch-action: none;
-}
-
-.m01lab-flow__bar:hover,
-.m01lab-flow__bar:focus-visible {
-  background: var(--color-primary);
-}
-
 .m01lab-flow__wait {
   margin: 0;
   padding: var(--spacing-16);
@@ -39,10 +7,6 @@
   text-align: center;
 }
 
-.m01lab-flow__bar[hidden] {
-  display: none;
-}
-
 .m01lab-flow__note {
   margin: 0 0 var(--spacing-8);
   color: var(--color-text-secondary);

M01_MasterData/M01_MasterData_UI_LogicLab_Flow.ts

@@ -1,7 +1,6 @@
 /* =============================================================================
  * M01_MasterData_UI_LogicLab_Flow.ts
- * 로직 상세 두 칸 — 왼쪽 지금 내용(보기) · 가운데 끌기 막대 · 오른쪽 흐름도 패널
- * 너비 — 패널이 없으면 두 칸 비율(끌기 막대 · localStorage) · 패널이 있으면 패널이 알린 너비(px · 패널 가장자리 끌기)
+ * 로직 상세 오른쪽 흐름도 — 칸 · 폭은 오른쪽 접는 패널(LogicLab_Side) 몫
  * 잇기(mountLogicFlow) — 패널(M02_DF_Panel) · 왼쪽 보기(LogicLab_FlowView) · 입력 값 · 다른 로직 흐름 받기
  * DataFlow 파일은 import() 로 늦게(엔진이 M01 첫 묶음에 안 들어가게). 정함 `docs/raw/M01_쉬운단가/흐름도_적용_정함.md` 2 · 5 · 6 · 7
  * ========================================================================== */
@@ -14,7 +13,6 @@ import type { CfValues } from "../M02_MasterTemplete/DataFlow/M02_DF_Eval";
 import "./M01_MasterData_UI_LogicLab_Flow.css";
 
 const TEXT = {
-  Resize: ["두 칸 너비 — 끌어서 조절", "Drag to resize the two columns"],
   New: ["신규 로직", "New logic"],
   Waiting: ["흐름도 불러오는 중", "Loading the flow diagram"],
   Converted: [
@@ -27,93 +25,13 @@ const TEXT = {
 export const tf = (key: keyof typeof TEXT, v = ""): string =>
   TEXT[key][currentLanguageIndex === 1 ? 1 : 0].replace("{v}", v);
 
-const STORE = "m01.logic.flowRatio";
-const MIN = 0.25;
-const MAX = 0.75;
-
-const clamp = (r: number): number => Math.min(MAX, Math.max(MIN, r));
-
-function readRatio(): number {
-  try {
-    const r = Number(localStorage.getItem(STORE));
-    return r ? clamp(r) : 0.5;
-  } catch {
-    return 0.5;
-  }
-}
-
 export interface SplitHandle {
-  root: HTMLElement;
   /** 오른쪽 칸 — 흐름도 패널을 붙이는 곳 */
   right: HTMLElement;
-  /** 패널이 정한 너비(px) — 끌기 막대는 숨김(패널 가장자리로 조절) · null = 비율로 돌아감 */
+  /** 패널이 알린 너비(px) · null = 패널 내림 */
   setRight(px: number | null): void;
 }
 
-/** 두 칸 만들기 — left 는 지금 화면 그대로 왼쪽에 둠 */
-export function buildSplit(left: HTMLElement): SplitHandle {
-  const right = el("div", { className: "m01lab-flow__right" });
-  const bar = el("div", {
-    className: "m01lab-flow__bar",
-    attrs: {
-      role: "separator",
-      "aria-orientation": "vertical",
-      "aria-label": tf("Resize"),
-      title: tf("Resize"),
-      tabindex: "0",
-    },
-  });
-  const leftCol = el("div", { className: "m01lab-flow__left", children: [left] });
-  const root = el("div", { className: "m01lab-flow", children: [leftCol, bar, right] });
-  let ratio = readRatio();
-  let panelPx: number | null = null;
-  const apply = (): void => {
-    root.style.gridTemplateColumns =
-      panelPx === null
-        ? `minmax(0, ${ratio}fr) auto minmax(0, ${1 - ratio}fr)`
-        : `minmax(0, 1fr) ${panelPx}px`;
-  };
-  const keep = (): void => {
-    try {
-      localStorage.setItem(STORE, String(ratio));
-    } catch {
-      /* 기억 못 해도 지금 화면은 그대로 */
-    }
-  };
-  bar.addEventListener("pointerdown", (ev) => {
-    if (ev.button !== 0) return;
-    ev.preventDefault();
-    const box = root.getBoundingClientRect();
-    const move = (m: PointerEvent): void => {
-      ratio = clamp((m.clientX - box.left) / box.width);
-      apply();
-    };
-    const up = (): void => {
-      window.removeEventListener("pointermove", move);
-      window.removeEventListener("pointerup", up);
-      keep();
-    };
-    window.addEventListener("pointermove", move);
-    window.addEventListener("pointerup", up);
-  });
-  // 키보드 — 왼쪽 · 오른쪽 화살표로 조금씩
-  bar.addEventListener("keydown", (ev) => {
-    const step = ev.key === "ArrowLeft" ? -0.05 : ev.key === "ArrowRight" ? 0.05 : 0;
-    if (!step) return;
-    ev.preventDefault();
-    ratio = clamp(ratio + step);
-    apply();
-    keep();
-  });
-  const setRight = (px: number | null): void => {
-    panelPx = px;
-    bar.hidden = px !== null;
-    apply();
-  };
-  apply();
-  return { root, right, setRight };
-}
-
 /* ── 흐름 받기 · 잇기 ─────────────────────────────────────────────────── */
 
 export interface FlowAnswer {

M01_MasterData/M01_MasterData_UI_LogicLab_Side.css

@@ -1,15 +1,11 @@
-/* 로직 상세 오른쪽 두 패널 — 흐름도 · 원문 · 공용 접기 카드(접힌 카드 = 제목 행) */
-.m01lab-side {
-  min-width: 0;
-}
-
-.m01lab-side__card,
+/* 로직 상세 오른쪽 두 패널(흐름도 · 원문) — 공용 오른쪽 접는 패널 안 */
 .m01lab-side__slot {
   min-width: 0;
 }
 
-/* 카드 제목 행이 접기 단추 — 흐름도 패널 자체 접기 단추 · 테두리는 뺌 */
-.m01lab-side .m02-dfp__toggle {
+/* 접기 · 폭은 공용 패널 몫 — 흐름도 패널 자체 접기 단추 · 끌기 경계 · 테두리는 뺌 */
+.m01lab-side .m02-dfp__toggle,
+.m01lab-side .m02-dfp__grip {
   display: none;
 }
 

M01_MasterData/M01_MasterData_UI_LogicLab_Side.ts

@@ -1,16 +1,14 @@
 /* =============================================================================
  * M01_MasterData_UI_LogicLab_Side.ts
- * 로직 상세 오른쪽 두 패널 — 「흐름도」(다이어그램 · 상세 내용 = M02_DF_Panel) · 「원문」(품셈 본문 절)
- * 공용 접기 카드(`ui-collapsible` · 제목 행 누름 · 캐럿) 두 장 — attachCollapsible 토글 위에 하나만 열림 규칙
- * 둘 다 접기 됨 · 접힌 카드 = 제목 행만
- * 열린 패널은 계정 취향(`m01-logic-panel`)으로 기억 · 원문은 출처 글로 서버가 찾음(`GET /m01/logic/source`)
+ * 로직 상세 — 왼쪽 지금 내용 · 오른쪽 접는 패널 둘 「흐름도」(M02_DF_Panel) · 「원문」(품셈 본문 절)
+ * 공용 오른쪽 접는 패널(ui_template_side_panels) — 하나만 열림 · 모두 접힘 됨 · 폭 공유 · 접힌 패널 = 세로 글 띠
+ * 열린 패널 · 폭은 취향 키(`m01-logic-side`) · 원문은 출처 글로 서버가 찾음(`GET /m01/logic/source`)
  * ========================================================================== */
 
 import { currentLanguageIndex } from "@ui/ui_template_locale";
-import { attachCollapsible } from "@ui/ui_template_collapsible";
+import { createSidePanels } from "@ui/ui_template_side_panels";
 import { el } from "@ui/ui_template_elements";
 import { API_BASE_URL } from "@config/config_frontend";
-import { readStateRaw, writeStateRaw } from "../A00_Common/b_page_state";
 import type { SplitHandle } from "./M01_MasterData_UI_LogicLab_Flow";
 import "../M02_MasterTemplete/DataFlow/M02_DF_Panel.css";
 import "./M01_MasterData_UI_LogicLab_Side.css";
@@ -28,9 +26,6 @@ const TEXT = {
 const ts = (key: keyof typeof TEXT, v = ""): string =>
   TEXT[key][currentLanguageIndex === 1 ? 1 : 0].replace("{v}", v);
 
-/** 둘 다 접힘 — 제목 행 둘이 들어가는 칸 너비 */
-const FOLDED = 140;
-
 export type PanelPick = "flow" | "source" | "none";
 
 interface Block {
@@ -47,7 +42,9 @@ interface Found {
 }
 
 export interface LogicSide {
-  /** 흐름도 패널에 넘길 칸 — right = 흐름도 자리 · setRight = 흐름도 패널이 알린 너비 */
+  /** [왼쪽 지금 내용, 오른쪽 패널] 칸 */
+  root: HTMLElement;
+  /** 흐름도 패널에 넘길 칸 — right = 흐름도 자리 · 폭은 오른쪽 패널 몫(setRight 안 씀) */
   flowSplit: SplitHandle;
   flowFolded(): boolean;
   pick(next: PanelPick): void;
@@ -57,11 +54,6 @@ export interface LogicSide {
   showSource(src: string): void;
 }
 
-const readPick = (): PanelPick => {
-  const got = readStateRaw("m01-logic-panel");
-  return got === "source" || got === "none" ? got : "flow";
-};
-
 function blockNode(b: Block): HTMLElement {
   if (b.table)
     return el("div", {
@@ -83,59 +75,38 @@ function blockNode(b: Block): HTMLElement {
   return el("p", { className: "m01lab-src__p", text: b.p ?? "" });
 }
 
-export function buildLogicSide(split: SplitHandle): LogicSide {
+export function buildLogicSide(left: HTMLElement): LogicSide {
   const flowSlot = el("div", { className: "m01lab-side__slot" });
   const body = el("div", { className: "m01lab-src__body" });
   const title = el("strong", { className: "m02-dfp__title" });
-  const card = (label: string, inner: HTMLElement): HTMLElement =>
-    el("section", {
-      className: "m01lab-side__card ui-collapsible ui-sidebar-section ui-sidebar-card",
-      children: [el("h3", { className: "ui-collapsible__title", text: label }), inner],
-    });
-  const flowCard = card(ts("Flow"), flowSlot);
-  const sourceCard = card(
-    ts("Source"),
-    el("div", { className: "m01lab-src", children: [title, body] }),
-  );
-  const side = el("div", {
-    className: "m01lab-side ui-sidebar-panel",
-    children: [flowCard, sourceCard],
+  const sp = createSidePanels({
+    prefKey: "m01-logic-side",
+    defaultWidth: 520,
+    minWidth: 320,
+    panels: [
+      { id: "flow", title: ts("Flow"), body: flowSlot },
+      {
+        id: "source",
+        title: ts("Source"),
+        body: el("div", { className: "m01lab-src", children: [title, body] }),
+      },
+    ],
+    onChange: () => {
+      flowFold?.(sp.current() !== "flow"); // 다시 펴면 흐름도 판을 폭에 맞춤
+      load();
+    },
   });
-  attachCollapsible(side);
-  // 공용 토글 뒤 — 연 카드만 남기고 다른 카드는 접음(접었으면 둘 다 닫힘)
-  side.addEventListener("click", (ev) => {
-    const at = (ev.target as HTMLElement).closest(".ui-collapsible__title")?.parentElement;
-    if (at !== flowCard && at !== sourceCard) return;
-    pick(at.classList.contains("is-collapsed") ? "none" : at === flowCard ? "flow" : "source");
+  const root = el("div", {
+    className: "m01lab-side ui-side-panels-row",
+    children: [left, sp.root],
   });
-  split.right.replaceChildren(side);
 
-  let now = readPick();
-  let flowPx: number | null = null;
   let flowFold: ((on: boolean) => void) | null = null;
   let want = "";
   let shown: string | null = null;
 
-  /** 카드 안팎 여백(좌우 안쪽 + 테두리) — 흐름도 패널 너비에 더함 */
-  const pad = (): number => {
-    const s = getComputedStyle(flowCard);
-    return ["paddingLeft", "paddingRight", "borderLeftWidth", "borderRightWidth"].reduce(
-      (n, k) => n + (parseFloat(s[k as "paddingLeft"]) || 0),
-      0,
-    );
-  };
-  /** 칸 너비 — 원문(또는 흐름도가 아직 안 뜸) = 두 칸 비율 · 흐름도 = 패널 너비 + 카드 여백 · 둘 다 접힘 = 제목 행 */
-  const width = (): void =>
-    split.setRight(
-      now === "source" || (now === "flow" && flowPx === null)
-        ? null
-        : now === "flow"
-          ? (flowPx ?? 0) + pad()
-          : FOLDED,
-    );
-
   const load = (): void => {
-    if (now !== "source" || shown === want) return;
+    if (sp.current() !== "source" || shown === want) return;
     const src = (shown = want);
     title.textContent = src || ts("NoSource");
     body.replaceChildren(el("p", { className: "m01-logic__muted", text: ts("Loading") }));
@@ -165,28 +136,11 @@ export function buildLogicSide(split: SplitHandle): LogicSide {
       });
   };
 
-  const pick = (next: PanelPick): void => {
-    if (next !== now) writeStateRaw("m01-logic-panel", next);
-    now = next;
-    flowFold?.(now !== "flow"); // 칸을 줄이기 전에 — 흐름도 패널이 접기 전 너비를 재어 둠
-    flowCard.classList.toggle("is-collapsed", now !== "flow");
-    sourceCard.classList.toggle("is-collapsed", now !== "source");
-    width();
-    load();
-  };
-
-  pick(now);
   return {
-    flowSplit: {
-      root: split.root,
-      right: flowSlot,
-      setRight: (px) => {
-        flowPx = px;
-        width();
-      },
-    },
-    flowFolded: () => now !== "flow",
-    pick,
+    root,
+    flowSplit: { right: flowSlot, setRight: () => undefined },
+    flowFolded: () => sp.current() !== "flow",
+    pick: (next) => sp.open(next === "none" ? null : next),
     bindFlow: (f) => {
       flowFold = f;
     },

resources/tester/ui_checks/47-3_로직상세_오른쪽패널.js

@@ -0,0 +1,141 @@
+/* 47-3 M01 단가산출 로직 상세 오른쪽 패널 — `orca eval --expression "$(cat 이 파일)"` 한 번에 돎 · JSON 돌려줌.
+ *
+ * 시작 화면: M01 마스터 데이터(#/m01-master-data · 시스템 관리자 로그인) · 아무 화면이나.
+ *   로직 GC000277(건설품셈 토목 1-1-2 유도선 설치 및 해체)을 엶 · 고치지 않음 · 끝에 열린 패널 · 폭을 처음 값으로 되돌림.
+ * 기대 수치:
+ *   panels = ["흐름도","원문"] · 패널 몸 = 공용 패널(.ui-side-panels) · 왼쪽 칸 오른쪽에 붙음(sideRight)
+ *   flow   = {open:["flow"], strips:["원문"]} · 흐름도 판 보임 · 흐름도 패널 자체 접기 단추 · 끌기 경계 안 보임(inner 0)
+ *   source = {open:["source"], strips:["흐름도"]} · 폭 = flow 폭(공유) · srcHead 에 「1-1-2 유도선」 · srcTable true
+ *   none   = {open:[], strips:["흐름도","원문"]} · 띠 너비 < 40
+ *   back   = {open:["flow"]}(흐름도 띠로 다시 폄)
+ *   drag   = 왼쪽 경계를 100px 왼쪽으로 끌면 폭 +100 · 원문으로 바꿔도 같은 폭 · key = 화살표 ← 한 번 +20
+ *   noLink = 「원문 연결 없음」 + 「출처 · …」(서버가 빈 목록을 줄 때 · fetch 를 잠시 바꿔 봄)
+ *   restored = 처음 취향 값과 같음
+ */
+(async () => {
+  const W = (ms) => new Promise((r) => setTimeout(r, ms));
+  const $ = (s, root = document) => root.querySelector(s);
+  const $$ = (s, root = document) => [...root.querySelectorAll(s)];
+  const until = async (f, ms = 15000) => {
+    for (let t = 0; t < ms; t += 200) {
+      const v = f();
+      if (v) return v;
+      await W(200);
+    }
+    return null;
+  };
+  const PREF = "aislo:pref:m01-logic-side";
+  const first = localStorage.getItem(PREF);
+  const out = {};
+  const openLogic = async (key) => {
+    sessionStorage.setItem("m01.logic.pending", key);
+    const tab = $$(".ui-collapsible__title").find((h) => h.innerText.trim() === "단가산출 로직");
+    if (!tab) return false;
+    if (!tab.closest(".ui-collapsible").classList.contains("is-collapsed")) tab.click();
+    tab.click();
+    return until(() => {
+      const t = $(".m02-dfp__title")?.innerText ?? "";
+      return !$(".m01lab-side")?.hidden && $(".m01lab-side .m02-dfp") && t;
+    });
+  };
+  if (!(await openLogic("GC000277"))) return JSON.stringify({ error: "로직 못 엶" });
+  await W(800);
+  const shown = (n) => !!n && n.getBoundingClientRect().height > 0;
+  const panel = (id) => $(`.m01lab-side .ui-side-panels__panel[data-panel="${id}"]`);
+  const strip = (title) =>
+    $$(".m01lab-side .ui-side-panels__strip").find((s) => s.innerText.replace(/\s/g, "") === title);
+  const wOf = (n) => Math.round(n.getBoundingClientRect().width);
+  const state = () => ({
+    open: ["flow", "source"].filter((id) => shown(panel(id))),
+    strips: $$(".m01lab-side .ui-side-panels__strip")
+      .filter(shown)
+      .map((s) => s.innerText.replace(/\s/g, "")),
+    width: ["flow", "source"].filter((id) => shown(panel(id))).map((id) => wOf(panel(id)))[0] ?? 0,
+  });
+  const pref = () => JSON.parse(localStorage.getItem(PREF) ?? "{}");
+  out.panels = $$(".m01lab-side .ui-side-panels__title").map((t) => t.innerText.trim());
+  const editor = $(".m01lab-side > .m01-logic__editor").getBoundingClientRect();
+  const side = $(".m01lab-side .ui-side-panels").getBoundingClientRect();
+  out.sideRight = Math.round(side.left - editor.right);
+  // 처음 = 흐름도 열림으로 맞춤
+  if (!shown(panel("flow"))) {
+    strip("흐름도").click();
+    await W(400);
+  }
+  out.flow = state();
+  out.flowDiagram = shown($(".m02-dfp__open", panel("flow")));
+  out.inner = $$(".m01lab-side .m02-dfp__toggle, .m01lab-side .m02-dfp__grip").filter(shown).length;
+  // 끌기 — 왼쪽 경계를 100px 왼쪽으로
+  const grip = $(".ui-side-panels__grip", panel("flow"));
+  const g = grip.getBoundingClientRect();
+  const x0 = g.left + g.width / 2;
+  const y0 = g.top + 50;
+  const w0 = state().width;
+  grip.dispatchEvent(
+    new PointerEvent("pointerdown", { bubbles: true, button: 0, clientX: x0, clientY: y0 }),
+  );
+  window.dispatchEvent(new PointerEvent("pointermove", { clientX: x0 - 50, clientY: y0 }));
+  window.dispatchEvent(new PointerEvent("pointerup", { clientX: x0 - 100, clientY: y0 }));
+  await W(200);
+  out.drag = { before: w0, after: state().width, pref: pref().width };
+  // 원문 — 폭 공유
+  strip("원문").click();
+  await until(() => $(".m01lab-src__head"));
+  out.source = state();
+  out.srcHead = $(".m01lab-src__head")?.innerText;
+  out.srcTable = $$(".m01lab-src__table td").some((td) => td.innerText === "특별인부");
+  // 키보드 — ← 한 번 = +20 · → 한 번 = 되돌림
+  const sg = $(".ui-side-panels__grip", panel("source"));
+  sg.dispatchEvent(new KeyboardEvent("keydown", { key: "ArrowLeft", bubbles: true }));
+  const k1 = state().width;
+  sg.dispatchEvent(new KeyboardEvent("keydown", { key: "ArrowRight", bubbles: true }));
+  out.key = { left: k1 - out.source.width, back: state().width - out.source.width };
+  // 모두 접기 — 원문 머리 ▸
+  $(".ui-side-panels__fold", panel("source")).click();
+  await W(300);
+  out.none = { ...state(), stripW: wOf(strip("흐름도")), pref: pref().open };
+  strip("흐름도").click();
+  await W(600);
+  out.back = { ...state(), pref: pref().open };
+  // 원문 연결 없음 — 서버가 빈 목록을 줄 때
+  strip("원문").click();
+  const real = window.fetch;
+  window.fetch = (u, o) =>
+    String(u).includes("/m01/logic/source")
+      ? Promise.resolve(new Response(JSON.stringify({ found: [] }), { status: 200 }))
+      : real(u, o);
+  try {
+    await openLogic("GC000338");
+    await until(() => $(".m01lab-src__none"));
+    out.noLink = [
+      $(".m01lab-src__none")?.innerText,
+      $(".m01lab-src__body .m01-logic__muted")?.innerText,
+    ];
+  } finally {
+    window.fetch = real;
+  }
+  // 되돌림 — 폭(끈 만큼 ←→ 화살표로) · 열린 패널
+  const was = JSON.parse(first ?? "{}");
+  const want = was.open === undefined ? "flow" : was.open;
+  const now = () => ["flow", "source"].find((id) => shown(panel(id))) ?? null;
+  if (now() !== want) {
+    if (want === null) $(".ui-side-panels__fold", panel(now())).click();
+    else strip(want === "flow" ? "흐름도" : "원문").click();
+    await W(300);
+  }
+  const target = was.width ?? w0;
+  const anyGrip = $$(".m01lab-side .ui-side-panels__grip")[0];
+  for (let i = 0; i < 40 && pref().width !== target; i++) {
+    const d = target - pref().width;
+    anyGrip.dispatchEvent(
+      new KeyboardEvent("keydown", {
+        key: d > 0 ? "ArrowLeft" : "ArrowRight",
+        shiftKey: Math.abs(d) >= 80,
+        bubbles: true,
+      }),
+    );
+  }
+  out.restored = first === null ? pref() : localStorage.getItem(PREF) === first;
+  out.first = first;
+  return JSON.stringify(out);
+})();

ui_template/ui_template_side_panels.css

@@ -7,6 +7,10 @@
   min-width: 0;
 }
 
+.ui-side-panels-row[hidden] {
+  display: none;
+}
+
 .ui-side-panels-row > :first-child {
   flex: 1 1 auto;
   min-width: 0;