/* =============================================================================
 * design_sections.ts
 * 두 보기가 **함께 쓰는 좌측 칸 정의** — 「구조물 배치」(계획서 24-2b).
 *
 * 한 정의에 `views: ["profile", "cross"]` 를 적어 두 보기가 같은 칸을 같은 자리(맨 위)에 세운다.
 * 칸 알맹이는 페이지가 건네는 부품 `structures`(뿌리 · 아래 고정 영역에 얹을 목록 뿌리)다 —
 * 종단 보기는 배치 콜백, 횡단 보기는 거기에 횡단 조정 콜백을 더해 만들지만 **칸 정의는 하나**다.
 * ========================================================================== */

import { part, registerPanelSection } from "./design_panel";

/** 페이지가 건네는 「구조물 배치」 부품의 모양 — 뿌리와 목록 뿌리만 안다. */
export interface StructuresPart {
  root: HTMLElement;
  listRoot: HTMLElement;
}

export const STRUCTURES_SECTION_ID = "structures";

registerPanelSection({
  id: STRUCTURES_SECTION_ID,
  title: "구조물 배치",
  views: ["profile", "cross"],
  order: 10,
  build: (ctx) => {
    const structures = part<StructuresPart>(ctx, "structures");
    // 구조물 목록은 「구조물 배치」 본문이 아니라 아래 고정 영역에 놓는다 — 본문에 두면
    // 고른 구조물의 폼 길이에 밀려 화면 밖으로 나갔다(2026-08-18 사용자 지시).
    return { root: structures.root, dock: structures.listRoot };
  },
});