@wipco/sdui 1.5.0 → 1.6.1

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

@@ -1,10 +1,10 @@
 import { parseJobPositionRow } from './chunk-XRHR452N.js';
-import { usePanZoomCanvas } from './chunk-MMIGOPO5.js';
-import { ImageLightbox } from './chunk-VY7MVBSE.js';
-import { useSduiAdapter, hostFetchOf, defaultAdapter } from './chunk-KO6OEY3G.js';
-import { warnOnce, Badge, Button, IconButton, Icon } from './chunk-RNOUXUBO.js';
-import { boxed } from './chunk-5WW4MBRO.js';
-import { useState, useMemo, useRef, useCallback, useEffect } from 'react';
+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 { boxed } from './chunk-3JTBOABA.js';
+import { useState, useMemo, useRef, useCallback, useEffect, useLayoutEffect } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 var PAGE_SIZE = 500;
@@ -42,6 +42,25 @@ var LEADER_HEIGHT = 62;
 var TOP_GAP = 58;
 var ROOT_ROW_GAP = 70;
 var DEFAULT_VIEW = { scale: 0.82, x: 48, y: 48 };
+var FIT_PAD = 16;
+function fitCanvasView(viewportWidth, viewportHeight, layoutWidth, layoutHeight) {
+  if (!(viewportWidth > 0) || !(viewportHeight > 0) || !(layoutWidth > 0) || !(layoutHeight > 0)) {
+    return DEFAULT_VIEW;
+  }
+  const raw = Math.min(
+    (viewportWidth - FIT_PAD * 2) / layoutWidth,
+    (viewportHeight - FIT_PAD * 2) / layoutHeight,
+    1
+  );
+  const scale = Math.max(MIN_ZOOM, raw);
+  const width = layoutWidth * scale;
+  const height = layoutHeight * scale;
+  return {
+    scale,
+    x: (viewportWidth - width) / 2,
+    y: height <= viewportHeight - FIT_PAD * 2 ? (viewportHeight - height) / 2 : FIT_PAD
+  };
+}
 var DUTY_ORDER = [
   "\uD68C\uC7A5",
   "\uBD80\uD68C\uC7A5",
@@ -108,6 +127,14 @@ var OCB_CSS = `
 .erp-ocb-member:hover { border-color: var(--wp-border-brand); background: var(--wp-surface-hover); }
 .erp-ocb-group { transition: opacity .15s ease; }
 .erp-ocb-group:hover { opacity: .9; }
+.erp-ocb-viewport { position: relative; height: var(--erp-ocb-h, 72vh); min-height: 620px; overflow: hidden; border-top: var(--wp-border-w) solid var(--wp-border-default); background: var(--wp-surface-page); user-select: none; cursor: grab; touch-action: pan-y; }
+.erp-ocb-viewport--dragging { cursor: grabbing; }
+.erp-ocb-viewport.erp-ocb-viewport--pseudo-fs { position: fixed; inset: 0; z-index: var(--wp-z-dialog); height: 100dvh; min-height: 0; border-top: 0; }
+/* \uC804\uCCB4\uD654\uBA74(\uBE0C\uB77C\uC6B0\uC800\xB7\uB300\uCCB4)\uC5D0\uC11C\uB294 \uC591\uBCF4\uD560 \uD398\uC774\uC9C0\uAC00 \uC5C6\uB2E4 \u2014 \uD55C \uC190\uAC00\uB77D\uB3C4 \uC5B4\uB290 \uBC29\uD5A5\uC774\uB4E0 \uCE94\uBC84\uC2A4\uAC00 \uAC16\uB294\uB2E4. */
+.erp-ocb-viewport.erp-ocb-viewport--pseudo-fs, .erp-ocb-viewport:fullscreen { touch-action: none; }
+@media screen and (max-width: 767.98px) {
+  .erp-ocb-viewport { min-height: 320px; height: min(var(--erp-ocb-h, 72vh), 68dvh); }
+}
 `;
 async function fetchAllPages(api, endpoint, pick) {
   const all = [];
@@ -915,6 +942,8 @@ function OrganizationCanvas({
     setView,
     dragging,
     isFullscreen,
+    pseudoFullscreen,
+    interactedRef,
     viewportCenter,
     zoomAt,
     toggleFullscreen,
@@ -924,118 +953,180 @@ function OrganizationCanvas({
     () => buildCanvasLayout(model, employees, leadership),
     [model, employees, leadership]
   );
+  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]);
+  useLayoutEffect(() => {
+    fitView();
+  }, [fitView]);
   useEffect(() => {
-    setView(DEFAULT_VIEW);
-  }, [layout.width, layout.height, setView]);
-  const zoomStep = (delta) => zoomAt(view.scale + delta, viewportCenter());
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      ref: viewportRef,
-      style: {
-        position: "relative",
-        height,
-        minHeight: 620,
-        overflow: "hidden",
-        borderTop: "var(--wp-border-w) solid var(--wp-border-default)",
-        background: "var(--wp-surface-page)",
-        userSelect: "none",
-        cursor: dragging ? "grabbing" : "grab",
-        touchAction: "none"
-      },
-      ...pointerHandlers,
-      children: [
-        /* @__PURE__ */ jsxs(
-          "div",
-          {
-            "data-org-card": true,
-            style: {
-              position: "absolute",
-              right: 12,
-              top: 12,
-              zIndex: 30,
-              display: "flex",
-              alignItems: "center",
-              gap: 4,
-              borderRadius: "var(--wp-radius-md)",
-              border: "var(--wp-border-w) solid var(--wp-border-default)",
-              background: "var(--wp-surface-card)",
-              padding: 4,
-              boxShadow: "var(--wp-shadow-sm)"
-            },
-            children: [
-              /* @__PURE__ */ jsx(IconButton, { icon: "minus", label: "\uCD95\uC18C", size: "sm", onClick: () => zoomStep(-0.1) }),
-              /* @__PURE__ */ jsxs("div", { style: { width: 48, textAlign: "center", fontSize: 12, fontWeight: 500 }, children: [
-                Math.round(view.scale * 100),
-                "%"
-              ] }),
-              /* @__PURE__ */ jsx(IconButton, { icon: "plus", label: "\uD655\uB300", size: "sm", onClick: () => zoomStep(0.1) }),
-              /* @__PURE__ */ jsx(
-                IconButton,
-                {
-                  icon: isFullscreen ? "minimize" : "maximize",
-                  label: isFullscreen ? "\uC804\uCCB4\uD654\uBA74 \uD574\uC81C" : "\uC804\uCCB4\uD654\uBA74",
-                  size: "sm",
-                  onClick: () => void toggleFullscreen()
-                }
-              )
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsxs(
-          "div",
-          {
-            style: {
-              position: "absolute",
-              left: 0,
-              top: 0,
-              width: layout.width,
-              height: layout.height,
-              transform: `translate(${view.x}px, ${view.y}px) scale(${view.scale})`,
-              transformOrigin: "0 0"
-            },
-            children: [
-              /* @__PURE__ */ jsx(
-                "svg",
-                {
-                  style: { position: "absolute", left: 0, top: 0, pointerEvents: "none" },
-                  width: layout.width,
-                  height: layout.height,
-                  children: layout.connectors.map((connector, index) => /* @__PURE__ */ jsx(
-                    "path",
-                    {
-                      d: connectorPath(connector),
-                      fill: "none",
-                      stroke: "var(--wp-border-default)",
-                      strokeWidth: 2
-                    },
-                    index
-                  ))
-                }
-              ),
-              layout.groups.map((item) => /* @__PURE__ */ jsx(
-                CanvasGroupNode,
-                {
-                  item,
-                  selected: selectedGroupId === item.group.id,
-                  onSelect
-                },
-                item.group.id
-              )),
-              layout.employees.map((item) => /* @__PURE__ */ jsx(
-                CanvasEmployeeNode,
-                {
-                  item,
-                  onOpenCard
-                },
-                `${item.featured ? "leader" : "employee"}-${item.employee.id}`
-              ))
-            ]
-          }
-        )
-      ]
+    const el = viewportRef.current;
+    if (!el || typeof ResizeObserver === "undefined") return;
+    let last = `${el.clientWidth}x${el.clientHeight}`;
+    const observer = new ResizeObserver(() => {
+      const size = `${el.clientWidth}x${el.clientHeight}`;
+      if (size === last) return;
+      last = size;
+      if (!interactedRef.current) fitView();
+    });
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, [fitView, viewportRef, interactedRef]);
+  const savedScrollRef = useRef([]);
+  const rememberScroll = () => {
+    const saved = [];
+    let node = viewportRef.current?.parentElement ?? null;
+    while (node) {
+      if (node.scrollTop > 0) saved.push([node, node.scrollTop]);
+      node = node.parentElement;
     }
-  );
+    if (typeof window !== "undefined" && window.scrollY > 0) {
+      saved.push([document.scrollingElement ?? document.documentElement, window.scrollY]);
+    }
+    savedScrollRef.current = saved;
+  };
+  const fullscreenSeen = useRef(isFullscreen);
+  useEffect(() => {
+    if (fullscreenSeen.current === isFullscreen) return;
+    fullscreenSeen.current = isFullscreen;
+    const restore = () => {
+      for (const [el, top] of savedScrollRef.current) el.scrollTop = top;
+    };
+    const frame = window.requestAnimationFrame(() => {
+      fitView();
+      if (!isFullscreen) restore();
+    });
+    const timer = isFullscreen ? 0 : window.setTimeout(() => {
+      restore();
+      savedScrollRef.current = [];
+    }, 200);
+    return () => {
+      window.cancelAnimationFrame(frame);
+      if (timer) window.clearTimeout(timer);
+    };
+  }, [isFullscreen, fitView]);
+  const zoomStep = (delta) => zoomAt(view.scale + delta, viewportCenter());
+  const flowHeightRef = useRef(0);
+  const viewportClass = [
+    "erp-ocb-viewport",
+    dragging ? "erp-ocb-viewport--dragging" : "",
+    pseudoFullscreen ? "erp-ocb-viewport--pseudo-fs" : ""
+  ].filter(Boolean).join(" ");
+  const viewportStyle = {
+    "--erp-ocb-h": typeof height === "number" ? `${height}px` : height
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    pseudoFullscreen ? /* @__PURE__ */ jsx("div", { "aria-hidden": true, className: "erp-ocb-placeholder", style: { height: flowHeightRef.current } }) : null,
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: viewportRef,
+        className: viewportClass,
+        style: viewportStyle,
+        ...pointerHandlers,
+        children: [
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              "data-org-card": true,
+              style: {
+                position: "absolute",
+                right: 12,
+                top: 12,
+                zIndex: 30,
+                display: "flex",
+                alignItems: "center",
+                gap: 4,
+                borderRadius: "var(--wp-radius-md)",
+                border: "var(--wp-border-w) solid var(--wp-border-default)",
+                background: "var(--wp-surface-card)",
+                padding: 4,
+                boxShadow: "var(--wp-shadow-sm)"
+              },
+              children: [
+                /* @__PURE__ */ jsx(IconButton, { icon: "minus", label: "\uCD95\uC18C", size: "sm", onClick: () => zoomStep(-0.1) }),
+                /* @__PURE__ */ jsxs("div", { style: { width: 48, textAlign: "center", fontSize: 12, fontWeight: 500 }, children: [
+                  Math.round(view.scale * 100),
+                  "%"
+                ] }),
+                /* @__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 }),
+                /* @__PURE__ */ jsx(
+                  IconButton,
+                  {
+                    icon: isFullscreen ? "minimize" : "maximize",
+                    label: isFullscreen ? "\uC804\uCCB4\uD654\uBA74 \uD574\uC81C" : "\uC804\uCCB4\uD654\uBA74",
+                    size: "sm",
+                    onClick: () => {
+                      if (!isFullscreen && viewportRef.current) {
+                        flowHeightRef.current = viewportRef.current.offsetHeight;
+                        rememberScroll();
+                      }
+                      void toggleFullscreen();
+                    }
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              style: {
+                position: "absolute",
+                left: 0,
+                top: 0,
+                width: layout.width,
+                height: layout.height,
+                transform: `translate(${view.x}px, ${view.y}px) scale(${view.scale})`,
+                transformOrigin: "0 0"
+              },
+              children: [
+                /* @__PURE__ */ jsx(
+                  "svg",
+                  {
+                    style: { position: "absolute", left: 0, top: 0, pointerEvents: "none" },
+                    width: layout.width,
+                    height: layout.height,
+                    children: layout.connectors.map((connector, index) => /* @__PURE__ */ jsx(
+                      "path",
+                      {
+                        d: connectorPath(connector),
+                        fill: "none",
+                        stroke: "var(--wp-border-default)",
+                        strokeWidth: 2
+                      },
+                      index
+                    ))
+                  }
+                ),
+                layout.groups.map((item) => /* @__PURE__ */ jsx(
+                  CanvasGroupNode,
+                  {
+                    item,
+                    selected: selectedGroupId === item.group.id,
+                    onSelect
+                  },
+                  item.group.id
+                )),
+                layout.employees.map((item) => /* @__PURE__ */ jsx(
+                  CanvasEmployeeNode,
+                  {
+                    item,
+                    onOpenCard
+                  },
+                  `${item.featured ? "leader" : "employee"}-${item.employee.id}`
+                ))
+              ]
+            }
+          )
+        ]
+      }
+    )
+  ] });
 }
 function OrgChartBoardImpl({
   onMemberClick,
@@ -1237,4 +1328,4 @@ function OrgChartBoardImpl({
 }
 var OrgChartBoard = boxed(OrgChartBoardImpl, "OrgChartBoard");
 
-export { OrgChartBoard, buildModel, compareMembers, isUnassignedGroup, leadershipEmployees, orgVocabOf, pickEmployees, pickGroups, pickPositions };
+export { OrgChartBoard, buildModel, compareMembers, fitCanvasView, isUnassignedGroup, leadershipEmployees, orgVocabOf, pickEmployees, pickGroups, pickPositions };

package/dist/{chunk-2YP5N4VV.js → chunk-VZOQRQAR.js}

@@ -1,4 +1,4 @@
-import { boxed } from './chunk-5WW4MBRO.js';
+import { boxed } from './chunk-3JTBOABA.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 var SUMMARY_TABLE_CSS = `

package/dist/{chunk-AXGF4M57.js → chunk-XAXROQKB.js}

@@ -1,4 +1,4 @@
-import { boxed, containerLayoutStyle } from './chunk-5WW4MBRO.js';
+import { boxed, containerLayoutStyle } from './chunk-3JTBOABA.js';
 import React from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 

package/dist/{chunk-IZ3JA2BR.js → chunk-XFKNU6QN.js}

@@ -1,6 +1,6 @@
-import { useSduiAssetResolver } from './chunk-KO6OEY3G.js';
-import { Spinner, Icon } from './chunk-RNOUXUBO.js';
-import { boxed } from './chunk-5WW4MBRO.js';
+import { useSduiAssetResolver } from './chunk-JHFA5RDN.js';
+import { Spinner, Icon } from './chunk-YYAGE733.js';
+import { boxed } from './chunk-3JTBOABA.js';
 import { useState, useEffect } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 

package/dist/{chunk-GTGS2QRL.js → chunk-XUVWIRZJ.js}

@@ -1,6 +1,6 @@
-import { Disclosure } from './chunk-2HLXCKK7.js';
-import { Icon } from './chunk-RNOUXUBO.js';
-import { boxed } from './chunk-5WW4MBRO.js';
+import { Disclosure } from './chunk-OCYJ2ZOV.js';
+import { Icon } from './chunk-YYAGE733.js';
+import { boxed } from './chunk-3JTBOABA.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
 var TYPE_META = {