@wipco/sdui 1.6.1 → 1.7.1

package/dist/{DatePicker-DX9juElE.d.ts → DatePicker-BOOKdd5x.d.ts}

@@ -1,5 +1,6 @@
 import { S as SduiBoxProps } from './layout-DmRikwZb.js';
 import React__default from 'react';
+import { C as CalendarNavLocale } from './calendar-nav-BSGsgJc4.js';
 
 interface TimePickerProps {
     /** 선택된 시각 (HH:MM, 24시간제). 주어지면 controlled로 동작. */
@@ -24,16 +25,15 @@ interface TimePickerProps {
 /** 바깥에서 온 `style`·`className`을 뿌리에 얹어 내보낸다. 까닭은 {@link ./boxed.tsx}에 있다. */
 declare const TimePicker: React__default.FC<TimePickerProps & SduiBoxProps>;
 
-interface DatePickerLocale {
+/**
+ * 머리글·월·연도 보기의 글자(formatCaption·prevMonthLabel·prevYearLabel …)는 공용 부품의 로캘
+ * {@link CalendarNavLocale} 에서 온다 — 여기는 날짜 격자와 패널에만 있는 자리를 더한다.
+ */
+interface DatePickerLocale extends CalendarNavLocale {
     /** 요일 머리글 — **일요일부터** 7개. 주 시작이 달라도 이 순서로 주면 내부에서 돌린다. */
     weekdays?: readonly string[];
     /** 주 시작 요일 (0=일 … 6=토). */
     weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
-    /** 달력 위 연월 캡션 (month는 1–12). */
-    formatCaption?: (year: number, month: number) => string;
-    /** 이전/다음 달 버튼의 낭독 라벨 */
-    prevMonthLabel?: string;
-    nextMonthLabel?: string;
     /** 달력 패널의 낭독 라벨 */
     calendarLabel?: string;
     /** 기간 달력에서 시작·종료 칸의 낭독 라벨 (DateRangePicker) */

package/dist/calendar-nav-BSGsgJc4.d.ts

@@ -0,0 +1,54 @@
+/**
+ * 달력 머리글 탐색과 월·연도 보기 — DatePicker(날짜·기간 팝업 달력)와 EventCalendar(일정 캘린더)가
+ * **같은 부품**을 쓴다.
+ *
+ * 머리글은 `<< < [제목] > >>` 한 줄이다 — 제목이 가운데, 왼쪽에 큰 걸음·작은 걸음 뒤로, 오른쪽에
+ * 작은 걸음·큰 걸음 앞으로. 예전에는 이전·다음 버튼이 오른쪽에 몰려 있어(기간 달력은 두 달 위에
+ * 한 쌍, 일정 캘린더는 '이전·오늘·다음'이 제목 왼쪽에) 어느 쪽으로 가는 버튼인지 한눈에 안 들어왔고,
+ * 연 단위 이동은 열두 번을 눌러야 했다(사용자 요청 2026-10-01).
+ *
+ * 제목을 누르면 한 단계 넓은 보기로 올라간다(윈도우 달력 방식): 일 → 월(그 해의 1~12월) →
+ * 연도(10년 + 앞뒤 회색 한 해씩). 고르면 한 단계 내려온다. 이 넓은 보기 둘이 `CalendarZoom` 이다 —
+ * 보는 달만 바꾸고 **선택 값은 건드리지 않는다**(값을 정하는 것은 언제나 일 보기의 날짜 칸이다).
+ *
+ * 걸음 폭은 보기 단위를 따른다: 월 보기(1~12월 격자)에서 `< >` 는 1년·`<< >>` 는 10년, 연도 보기에서
+ * `< >` 는 10년·`<< >>` 는 100년. 일 보기의 폭(한 달·한 해, 일정 캘린더의 주·일 보기는 그 단위)은
+ * 호출부가 정한다 — 이 파일은 머리글 모양과 월·연도 격자만 안다.
+ *
+ * 키보드(월·연도 격자): 화살표(좌우 1칸·상하 4칸), Home/End(그 해·그 10년의 처음·끝), PageUp/PageDown
+ * (한 단계 큰 걸음), Enter/Space 고르기, Escape 는 **한 단계 아래 보기로**(연도 → 월 → 호출부의 onExit).
+ * Escape 는 여기서 전파를 멈춘다 — 겹 스택(overlay)이 팝오버 자체를 닫아 버리지 않게.
+ */
+
+/** 머리글·월·연도 보기의 글자. 빠진 자리는 한국어 기본으로 메운다(`resolveCalendarNavLocale`). */
+interface CalendarNavLocale {
+    /** 달력 위 연월 캡션 (month는 1–12). */
+    formatCaption?: (year: number, month: number) => string;
+    /** 월 보기 제목 — '2026년'. */
+    formatYear?: (year: number) => string;
+    /** 월 보기의 칸 — '3월' (month는 1–12). */
+    formatMonth?: (month: number) => string;
+    /** 연도 보기 제목 — '2020~2029'(ERP 기간 구분자와 같은 물결). */
+    formatDecade?: (from: number, to: number) => string;
+    /** 이전/다음 달 버튼의 낭독 라벨 */
+    prevMonthLabel?: string;
+    nextMonthLabel?: string;
+    /** 이전/다음 해 — 일 보기의 `<< >>`, 월 보기의 `< >` */
+    prevYearLabel?: string;
+    nextYearLabel?: string;
+    /** 이전/다음 10년 — 월 보기의 `<< >>`, 연도 보기의 `< >` */
+    prevDecadeLabel?: string;
+    nextDecadeLabel?: string;
+    /** 이전/다음 100년 — 연도 보기의 `<< >>` */
+    prevCenturyLabel?: string;
+    nextCenturyLabel?: string;
+    /** 제목 버튼의 안내(title) — 누르면 넓은 보기로 간다는 뜻 */
+    zoomLabel?: string;
+    /** 월·연도 격자의 낭독 라벨 */
+    monthGridLabel?: string;
+    yearGridLabel?: string;
+}
+/** 네 버튼 — 큰 걸음 뒤·작은 걸음 뒤·작은 걸음 앞·큰 걸음 앞. */
+type CalendarNavStep = 'prevBig' | 'prev' | 'next' | 'nextBig';
+
+export type { CalendarNavLocale as C, CalendarNavStep as a };

package/dist/{chunk-OKNF2SBB.js → chunk-2FHNGMBT.js}

@@ -1,6 +1,6 @@
-import { resolveTreeNodes, TreeView } from './chunk-TWUKNUUQ.js';
-import { OverlayLayer } from './chunk-BITS7UJY.js';
-import { Field, Dialog, Icon, Button, Input } from './chunk-YYAGE733.js';
+import { resolveTreeNodes, TreeView } from './chunk-SGR2QDEG.js';
+import { OverlayLayer } from './chunk-R2ORCOTG.js';
+import { Field, Dialog, Icon, Button, Input } from './chunk-OWM7E55U.js';
 import { boxed } from './chunk-3JTBOABA.js';
 import { useState, useMemo } from 'react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';

package/dist/{chunk-AJ3KDBEE.js → chunk-466W3XNK.js}

@@ -1,4 +1,4 @@
-import { Icon } from './chunk-YYAGE733.js';
+import { Icon } from './chunk-OWM7E55U.js';
 import { boxed } from './chunk-3JTBOABA.js';
 import { useRef, useState, useEffect } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';

package/dist/{chunk-UC725BGW.js → chunk-5FZBH3T5.js}

@@ -1,4 +1,4 @@
-import { formatDisplayValue } from './chunk-YYAGE733.js';
+import { formatDisplayValue } from './chunk-OWM7E55U.js';
 import { mergeStyle, containerLayoutStyle, joinClass, columnsClass, typographyStyle, GAP_CSS } from './chunk-3JTBOABA.js';
 import React from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';

package/dist/{chunk-XUVWIRZJ.js → chunk-5LIFU57A.js}

@@ -1,5 +1,5 @@
-import { Disclosure } from './chunk-OCYJ2ZOV.js';
-import { Icon } from './chunk-YYAGE733.js';
+import { Disclosure } from './chunk-P62INTQ5.js';
+import { Icon } from './chunk-OWM7E55U.js';
 import { boxed } from './chunk-3JTBOABA.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 

package/dist/{chunk-VAXRTBJH.js → chunk-63GM4S25.js}

@@ -1,4 +1,4 @@
-import { isPlainObject } from './chunk-YYAGE733.js';
+import { isPlainObject } from './chunk-OWM7E55U.js';
 
 // src/widgets/shared.ts
 function unwrapRows(payload) {

package/dist/{chunk-KO3EUNWB.js → chunk-7YTZB5LQ.js}

@@ -1,7 +1,7 @@
 import { HoistedStyle } from './chunk-RIZRM7OO.js';
-import { useSduiAdapter, hostFetchOf, defaultAdapter } from './chunk-JHFA5RDN.js';
-import { MOBILE_MEDIA_QUERY } from './chunk-GSM664TX.js';
-import { Icon, Badge, Checkbox, Select, Button } from './chunk-YYAGE733.js';
+import { useSduiAdapter, hostFetchOf, defaultAdapter } from './chunk-ZBX2CAOO.js';
+import { MOBILE_MEDIA_QUERY } from './chunk-TAVKGYH5.js';
+import { Icon, Badge, Checkbox, Select, Button } from './chunk-OWM7E55U.js';
 import { boxed } from './chunk-3JTBOABA.js';
 import { useRef, useEffect, useState, useMemo } from 'react';
 import { jsx, jsxs } from 'react/jsx-runtime';

package/dist/{chunk-SGGIWPP6.js → chunk-7ZCM6XEM.js}

@@ -1,5 +1,5 @@
-import { Text } from './chunk-UC725BGW.js';
-import { Switch, Field, Select, Input } from './chunk-YYAGE733.js';
+import { Text } from './chunk-5FZBH3T5.js';
+import { Switch, Field, Select, Input } from './chunk-OWM7E55U.js';
 import { boxed } from './chunk-3JTBOABA.js';
 import React, { useMemo } from 'react';
 import { jsx, jsxs } from 'react/jsx-runtime';

package/dist/{chunk-IIRVHSNK.js → chunk-A3SO6H47.js}

@@ -1,5 +1,5 @@
-import { useSduiAdapter, hostFetchOf, defaultAdapter } from './chunk-JHFA5RDN.js';
-import { Spinner, Badge, Icon } from './chunk-YYAGE733.js';
+import { useSduiAdapter, hostFetchOf, defaultAdapter } from './chunk-ZBX2CAOO.js';
+import { Spinner, Badge, Icon } from './chunk-OWM7E55U.js';
 import { boxed } from './chunk-3JTBOABA.js';
 import { useState, useEffect } from 'react';
 import { jsx, jsxs } from 'react/jsx-runtime';

package/dist/{chunk-VSNHDHGS.js → chunk-B5MB64YQ.js}

@@ -1,8 +1,9 @@
 import { parseJobPositionRow } from './chunk-XRHR452N.js';
-import { usePanZoomCanvas, MIN_ZOOM } from './chunk-CSZCWBOE.js';
-import { ImageLightbox } from './chunk-3PT5OBOU.js';
-import { useSduiAdapter, hostFetchOf, defaultAdapter } from './chunk-JHFA5RDN.js';
-import { warnOnce, Badge, Button, IconButton, Icon } from './chunk-YYAGE733.js';
+import { MIN_ZOOM, usePanZoomCanvas } from './chunk-XDR6HC4U.js';
+import { ImageLightbox } from './chunk-L6ODTHTX.js';
+import { useSduiAdapter, hostFetchOf, defaultAdapter } from './chunk-ZBX2CAOO.js';
+import { useIsTabletDown } from './chunk-TAVKGYH5.js';
+import { warnOnce, Badge, Button, IconButton, Icon } from './chunk-OWM7E55U.js';
 import { boxed } from './chunk-3JTBOABA.js';
 import { useState, useMemo, useRef, useCallback, useEffect, useLayoutEffect } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
@@ -43,6 +44,13 @@ var TOP_GAP = 58;
 var ROOT_ROW_GAP = 70;
 var DEFAULT_VIEW = { scale: 0.82, x: 48, y: 48 };
 var FIT_PAD = 16;
+var FIT_MIN_ZOOM = 0.1;
+var FLOW_PAD = 16;
+var FLOW_ITEM_WIDTH = 264;
+var FLOW_GAP = 12;
+var FLOW_ROW_GAP = 12;
+var FLOW_BLOCK_GAP = 24;
+var FLOW_TOP = 72;
 function fitCanvasView(viewportWidth, viewportHeight, layoutWidth, layoutHeight) {
   if (!(viewportWidth > 0) || !(viewportHeight > 0) || !(layoutWidth > 0) || !(layoutHeight > 0)) {
     return DEFAULT_VIEW;
@@ -52,7 +60,7 @@ function fitCanvasView(viewportWidth, viewportHeight, layoutWidth, layoutHeight)
     (viewportHeight - FIT_PAD * 2) / layoutHeight,
     1
   );
-  const scale = Math.max(MIN_ZOOM, raw);
+  const scale = Math.max(FIT_MIN_ZOOM, raw);
   const width = layoutWidth * scale;
   const height = layoutHeight * scale;
   return {
@@ -61,6 +69,11 @@ function fitCanvasView(viewportWidth, viewportHeight, layoutWidth, layoutHeight)
     y: height <= viewportHeight - FIT_PAD * 2 ? (viewportHeight - height) / 2 : FIT_PAD
   };
 }
+function fitFlowView(viewportWidth, layoutWidth) {
+  if (!(viewportWidth > 0) || !(layoutWidth > 0)) return { scale: 1, x: 0, y: FLOW_TOP };
+  const scale = Math.max(FIT_MIN_ZOOM, Math.min(1, (viewportWidth - FIT_PAD * 2) / layoutWidth));
+  return { scale, x: (viewportWidth - layoutWidth * scale) / 2, y: FLOW_TOP };
+}
 var DUTY_ORDER = [
   "\uD68C\uC7A5",
   "\uBD80\uD68C\uC7A5",
@@ -135,6 +148,9 @@ var OCB_CSS = `
 @media screen and (max-width: 767.98px) {
   .erp-ocb-viewport { min-height: 320px; height: min(var(--erp-ocb-h, 72vh), 68dvh); }
 }
+/* \uD750\uB984 \uBC30\uCE58(\uD0DC\uBE14\uB9BF \uC774\uD558, \uC804\uCCB4\uD654\uBA74 \uBC16): \uB192\uC774\uB294 \uB0B4\uC6A9\uC744 \uB530\uB77C\uAC04\uB2E4(\uC778\uB77C\uC778 height) \u2014 \uC138\uB85C\uB294 \uD398\uC774\uC9C0\uAC00 \uC2A4\uD06C\uB864\uD55C\uB2E4. */
+.erp-ocb-viewport.erp-ocb-viewport--flow { min-height: 0; }
+.erp-ocb-toggle { flex-shrink: 0; margin-left: auto; opacity: .9; }
 `;
 async function fetchAllPages(api, endpoint, pick) {
   const all = [];
@@ -353,13 +369,20 @@ function leadershipRankOf(employee, leadership) {
 function leadershipEmployees(employees, leadership = LEADERSHIP_MATCH) {
   return employees.map((employee) => ({ employee, rank: leadershipRankOf(employee, leadership) })).filter((entry) => entry.rank >= 0).sort((a, b) => a.rank - b.rank).slice(0, 3).map((entry) => entry.employee);
 }
-function buildCanvasLayout(model, employees, leadershipGroups) {
-  const leadership = leadershipEmployees(employees, leadershipGroups);
-  const leadershipIds = new Set(leadership.map((employee) => employee.id));
+function boardRootsOf(model) {
   const topGroup = model.visibleRoots.length === 1 ? model.visibleRoots[0] : null;
   const topChildren = topGroup ? model.childrenByParent.get(topGroup.id) ?? [] : [];
   const hasCompanyRoot = !!topGroup && topChildren.length > 1;
-  const boardRoots = hasCompanyRoot ? topChildren : model.visibleRoots;
+  return { topGroup, hasCompanyRoot, boardRoots: hasCompanyRoot ? topChildren : model.visibleRoots };
+}
+function flowToggleIds(model) {
+  const { boardRoots } = boardRootsOf(model);
+  return boardRoots.length > 1 ? boardRoots.map((group) => group.id) : [];
+}
+function buildCanvasLayout(model, employees, leadershipGroups) {
+  const leadership = leadershipEmployees(employees, leadershipGroups);
+  const leadershipIds = new Set(leadership.map((employee) => employee.id));
+  const { topGroup, hasCompanyRoot, boardRoots } = boardRootsOf(model);
   const rootBlocks = boardRoots.map(
     (group, index) => buildRootBlock(group, model, leadershipIds, index)
   );
@@ -444,6 +467,118 @@ function buildCanvasLayout(model, employees, leadershipGroups) {
     connectors
   };
 }
+function buildFlowLayout(model, employees, leadershipGroups, expanded, availableWidth) {
+  const leadership = leadershipEmployees(employees, leadershipGroups);
+  const leadershipIds = new Set(leadership.map((employee) => employee.id));
+  const { topGroup, hasCompanyRoot, boardRoots } = boardRootsOf(model);
+  const single = boardRoots.length === 1;
+  const blocks = boardRoots.map(
+    (group, index) => single || expanded.has(group.id) ? buildRootBlock(group, model, leadershipIds, index) : null
+  );
+  const inner = Math.max(FLOW_ITEM_WIDTH, availableWidth - FLOW_PAD * 2);
+  const columns = Math.max(
+    1,
+    Math.min(boardRoots.length, Math.floor((inner + FLOW_GAP) / (FLOW_ITEM_WIDTH + FLOW_GAP)))
+  );
+  const gridWidth = columns * FLOW_ITEM_WIDTH + (columns - 1) * FLOW_GAP;
+  const contentWidth = Math.max(
+    gridWidth,
+    leadership.length > 0 ? LEADER_WIDTH : 0,
+    ...blocks.map((block) => block?.width ?? 0)
+  );
+  const centerX = FLOW_PAD + contentWidth / 2;
+  const groups = [];
+  const placedEmployees = [];
+  const connectors = [];
+  let y = FLOW_PAD;
+  let bottom = FLOW_PAD;
+  if (leadership.length > 0) {
+    leadership.forEach((employee, index) => {
+      placedEmployees.push({
+        employee,
+        x: centerX - LEADER_WIDTH / 2,
+        y: y + index * (LEADER_HEIGHT + EMPLOYEE_GAP),
+        featured: true
+      });
+    });
+    y += leadership.length * LEADER_HEIGHT + (leadership.length - 1) * EMPLOYEE_GAP;
+    bottom = y;
+  }
+  if (hasCompanyRoot && topGroup) {
+    if (leadership.length > 0) {
+      connectors.push({ fromX: centerX, fromY: y, toX: centerX, toY: y + FLOW_BLOCK_GAP });
+      y += FLOW_BLOCK_GAP;
+    }
+    groups.push({
+      group: topGroup,
+      x: centerX - GROUP_WIDTH / 2,
+      y,
+      width: GROUP_WIDTH,
+      color: BOARD_COLORS[0],
+      depth: 0,
+      totalMembers: employeesInGroup(topGroup.id, model).length
+    });
+    y += GROUP_HEIGHT;
+    bottom = y;
+  }
+  if (bottom > FLOW_PAD) y += FLOW_BLOCK_GAP;
+  const gridX = FLOW_PAD + (contentWidth - gridWidth) / 2;
+  let column = 0;
+  const closeRow = (gap) => {
+    if (column === 0) return;
+    y += GROUP_HEIGHT + gap;
+    column = 0;
+  };
+  boardRoots.forEach((group, index) => {
+    const block = blocks[index];
+    if (block) {
+      closeRow(FLOW_BLOCK_GAP);
+      const bx = FLOW_PAD + (contentWidth - block.width) / 2;
+      const by = y;
+      groups.push(
+        ...block.groups.map((item, itemIndex) => ({
+          ...item,
+          x: item.x + bx,
+          y: item.y + by,
+          // 블록의 첫 그룹이 본부 머리다(buildRootBlock) — 거기에 접기 손잡이를 단다.
+          ...itemIndex === 0 && !single ? { toggle: "expanded" } : {}
+        }))
+      );
+      placedEmployees.push(...block.employees.map((item) => ({ ...item, x: item.x + bx, y: item.y + by })));
+      connectors.push(
+        ...block.connectors.map((item) => ({
+          fromX: item.fromX + bx,
+          fromY: item.fromY + by,
+          toX: item.toX + bx,
+          toY: item.toY + by
+        }))
+      );
+      bottom = by + block.height;
+      y = bottom + FLOW_BLOCK_GAP;
+      return;
+    }
+    groups.push({
+      group,
+      x: gridX + column * (FLOW_ITEM_WIDTH + FLOW_GAP),
+      y,
+      width: FLOW_ITEM_WIDTH,
+      color: BOARD_COLORS[index % BOARD_COLORS.length],
+      depth: 0,
+      totalMembers: employeesInGroup(group.id, model).length,
+      toggle: "collapsed"
+    });
+    bottom = y + GROUP_HEIGHT;
+    column += 1;
+    if (column === columns) closeRow(FLOW_ROW_GAP);
+  });
+  return {
+    width: contentWidth + FLOW_PAD * 2,
+    height: bottom + FLOW_PAD,
+    groups,
+    employees: placedEmployees,
+    connectors
+  };
+}
 function buildRootBlock(group, model, leadershipIds, siblingIndex) {
   const teams = model.childrenByParent.get(group.id) ?? [];
   const directEmployees = groupEmployees(group.id, model, leadershipIds);
@@ -755,9 +890,11 @@ var SELECTED_RING = "0 0 0 2px var(--wp-surface-card), 0 0 0 4px var(--wp-accent
 function CanvasGroupNode({
   item,
   selected,
-  onSelect
+  onSelect,
+  onToggle
 }) {
   const height = item.height ?? GROUP_HEIGHT;
+  const toggle = item.toggle && onToggle ? item.toggle : void 0;
   if (item.vertical) {
     return /* @__PURE__ */ jsxs(
       "button",
@@ -832,7 +969,11 @@ function CanvasGroupNode({
         boxShadow: selected ? SELECTED_RING : "var(--wp-shadow-xs)",
         cursor: "pointer"
       },
-      onClick: () => onSelect(item.group.id),
+      "aria-expanded": toggle ? toggle === "expanded" : void 0,
+      onClick: () => {
+        onSelect(item.group.id);
+        if (toggle) onToggle?.(item.group.id);
+      },
       children: [
         /* @__PURE__ */ jsx(Icon, { name: "building-2", size: 16, style: { flexShrink: 0 } }),
         /* @__PURE__ */ jsxs(
@@ -854,7 +995,8 @@ function CanvasGroupNode({
               ")"
             ]
           }
-        )
+        ),
+        toggle ? /* @__PURE__ */ jsx(Icon, { className: "erp-ocb-toggle", name: toggle === "expanded" ? "chevron-up" : "chevron-down", size: 16 }) : null
       ]
     }
   );
@@ -936,6 +1078,10 @@ function OrganizationCanvas({
   onOpenCard,
   height
 }) {
+  const narrow = useIsTabletDown();
+  const [expanded, setExpanded] = useState(() => /* @__PURE__ */ new Set());
+  const [boxWidth, setBoxWidth] = useState(0);
+  const [minScale, setMinScale] = useState(MIN_ZOOM);
   const {
     viewportRef,
     view,
@@ -948,33 +1094,58 @@ function OrganizationCanvas({
     zoomAt,
     toggleFullscreen,
     pointerHandlers
-  } = usePanZoomCanvas({ stopSelector: "[data-org-card]", initialView: DEFAULT_VIEW });
+  } = usePanZoomCanvas({
+    stopSelector: "[data-org-card]",
+    initialView: DEFAULT_VIEW,
+    minScale,
+    // 흐름 배치(전체화면 밖)는 캔버스가 페이지 세로를 덮는다 — 그냥 휠은 페이지 스크롤, Ctrl+휠·트랙패드 핀치만 줌.
+    wheelNeedsCtrl: narrow
+  });
+  const flowAuto = narrow && !isFullscreen;
   const layout = useMemo(
-    () => buildCanvasLayout(model, employees, leadership),
-    [model, employees, leadership]
+    () => narrow ? buildFlowLayout(model, employees, leadership, expanded, Math.max(0, boxWidth - FIT_PAD * 2)) : buildCanvasLayout(model, employees, leadership),
+    [narrow, model, employees, leadership, expanded, boxWidth]
   );
+  const toggleIds = useMemo(() => narrow ? flowToggleIds(model) : [], [narrow, model]);
+  const allExpanded = toggleIds.length > 0 && toggleIds.every((id) => expanded.has(id));
+  const toggleGroup = useCallback((groupId) => {
+    setExpanded((current) => {
+      const next = new Set(current);
+      if (next.has(groupId)) next.delete(groupId);
+      else next.add(groupId);
+      return next;
+    });
+  }, []);
   const fitView = useCallback(() => {
     const el = viewportRef.current;
     if (!el) return;
     interactedRef.current = false;
-    setView(fitCanvasView(el.clientWidth, el.clientHeight, layout.width, layout.height));
-  }, [layout.width, layout.height, setView, viewportRef, interactedRef]);
+    const next = flowAuto ? fitFlowView(el.clientWidth, layout.width) : fitCanvasView(el.clientWidth, el.clientHeight, layout.width, layout.height);
+    setMinScale(Math.min(MIN_ZOOM, next.scale));
+    setView(next);
+  }, [flowAuto, layout.width, layout.height, setView, viewportRef, interactedRef]);
+  useLayoutEffect(() => {
+    const el = viewportRef.current;
+    if (el && el.clientWidth !== boxWidth) setBoxWidth(el.clientWidth);
+  });
   useLayoutEffect(() => {
     fitView();
   }, [fitView]);
   useEffect(() => {
     const el = viewportRef.current;
     if (!el || typeof ResizeObserver === "undefined") return;
-    let last = `${el.clientWidth}x${el.clientHeight}`;
+    const sizeOf = () => flowAuto ? `${el.clientWidth}` : `${el.clientWidth}x${el.clientHeight}`;
+    let last = sizeOf();
     const observer = new ResizeObserver(() => {
-      const size = `${el.clientWidth}x${el.clientHeight}`;
+      const size = sizeOf();
       if (size === last) return;
       last = size;
+      setBoxWidth(el.clientWidth);
       if (!interactedRef.current) fitView();
     });
     observer.observe(el);
     return () => observer.disconnect();
-  }, [fitView, viewportRef, interactedRef]);
+  }, [fitView, flowAuto, viewportRef, interactedRef]);
   const savedScrollRef = useRef([]);
   const rememberScroll = () => {
     const saved = [];
@@ -1013,10 +1184,13 @@ function OrganizationCanvas({
   const viewportClass = [
     "erp-ocb-viewport",
     dragging ? "erp-ocb-viewport--dragging" : "",
-    pseudoFullscreen ? "erp-ocb-viewport--pseudo-fs" : ""
+    pseudoFullscreen ? "erp-ocb-viewport--pseudo-fs" : "",
+    flowAuto ? "erp-ocb-viewport--flow" : ""
   ].filter(Boolean).join(" ");
+  const stageY = flowAuto ? FLOW_TOP : view.y;
   const viewportStyle = {
-    "--erp-ocb-h": typeof height === "number" ? `${height}px` : height
+    "--erp-ocb-h": typeof height === "number" ? `${height}px` : height,
+    ...flowAuto ? { height: Math.ceil(FLOW_TOP + layout.height * view.scale + FIT_PAD) } : null
   };
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     pseudoFullscreen ? /* @__PURE__ */ jsx("div", { "aria-hidden": true, className: "erp-ocb-placeholder", style: { height: flowHeightRef.current } }) : null,
@@ -1054,6 +1228,15 @@ function OrganizationCanvas({
                 ] }),
                 /* @__PURE__ */ jsx(IconButton, { icon: "plus", label: "\uD655\uB300", size: "sm", onClick: () => zoomStep(0.1) }),
                 /* @__PURE__ */ jsx(IconButton, { icon: "locate-fixed", label: "\uD654\uBA74\uC5D0 \uB9DE\uCDA4", size: "sm", onClick: fitView }),
+                toggleIds.length > 0 ? /* @__PURE__ */ jsx(
+                  IconButton,
+                  {
+                    icon: allExpanded ? "folder" : "folder-open",
+                    label: allExpanded ? "\uBCF8\uBD80 \uBAA8\uB450 \uC811\uAE30" : "\uBCF8\uBD80 \uBAA8\uB450 \uD3BC\uCE58\uAE30",
+                    size: "sm",
+                    onClick: () => setExpanded(allExpanded ? /* @__PURE__ */ new Set() : new Set(toggleIds))
+                  }
+                ) : null,
                 /* @__PURE__ */ jsx(
                   IconButton,
                   {
@@ -1081,7 +1264,7 @@ function OrganizationCanvas({
                 top: 0,
                 width: layout.width,
                 height: layout.height,
-                transform: `translate(${view.x}px, ${view.y}px) scale(${view.scale})`,
+                transform: `translate(${view.x}px, ${stageY}px) scale(${view.scale})`,
                 transformOrigin: "0 0"
               },
               children: [
@@ -1108,7 +1291,8 @@ function OrganizationCanvas({
                   {
                     item,
                     selected: selectedGroupId === item.group.id,
-                    onSelect
+                    onSelect,
+                    onToggle: toggleGroup
                   },
                   item.group.id
                 )),
@@ -1328,4 +1512,4 @@ function OrgChartBoardImpl({
 }
 var OrgChartBoard = boxed(OrgChartBoardImpl, "OrgChartBoard");
 
-export { OrgChartBoard, buildModel, compareMembers, fitCanvasView, isUnassignedGroup, leadershipEmployees, orgVocabOf, pickEmployees, pickGroups, pickPositions };
+export { OrgChartBoard, buildFlowLayout, buildModel, compareMembers, fitCanvasView, fitFlowView, flowToggleIds, isUnassignedGroup, leadershipEmployees, orgVocabOf, pickEmployees, pickGroups, pickPositions };

package/dist/{chunk-US3K6Q5T.js → chunk-ENZBX4AR.js}

@@ -1,4 +1,4 @@
-import { Textarea, Icon } from './chunk-YYAGE733.js';
+import { Textarea, Icon } from './chunk-OWM7E55U.js';
 import { boxed } from './chunk-3JTBOABA.js';
 import { useState, useRef, useId, useEffect, useCallback } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';

package/dist/{chunk-CUFGH3LB.js → chunk-FGKBXUUA.js}

@@ -1,4 +1,4 @@
-import { Icon, Badge, Tooltip } from './chunk-YYAGE733.js';
+import { Icon, Badge, Tooltip } from './chunk-OWM7E55U.js';
 import { boxed } from './chunk-3JTBOABA.js';
 import React from 'react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';

package/dist/{chunk-VR5MFUD2.js → chunk-FUNCQCKN.js}

@@ -1,5 +1,5 @@
-import { OverlayLayer } from './chunk-BITS7UJY.js';
-import { Dialog, Button, warnOnce } from './chunk-YYAGE733.js';
+import { OverlayLayer } from './chunk-R2ORCOTG.js';
+import { Dialog, Button, warnOnce } from './chunk-OWM7E55U.js';
 import { createContext, useContext, useMemo, useRef, useCallback, useState } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';