@wipco/sdui 1.5.0 → 1.6.0

package/dist/chunk-CSZCWBOE.js

@@ -0,0 +1,256 @@
+import { useRef, useState, useCallback, useEffect } from 'react';
+
+// src/widgets/usePanZoomCanvas.ts
+var MIN_ZOOM = 0.35;
+var MAX_ZOOM = 1.8;
+var PINCH_CLICK_GRACE_MS = 400;
+var PAN_SLOP_PX = 6;
+var clamp = (value, min, max) => Math.min(max, Math.max(min, value));
+function applyZoom(current, nextScale, focal) {
+  const scale = clamp(nextScale, MIN_ZOOM, MAX_ZOOM);
+  return {
+    scale,
+    x: focal.x - (focal.x - current.x) / current.scale * scale,
+    y: focal.y - (focal.y - current.y) / current.scale * scale
+  };
+}
+function applyPinch(start, startDistance, startMid, distance, mid) {
+  const ratio = startDistance > 0 ? distance / startDistance : 1;
+  const zoomed = applyZoom(start, start.scale * ratio, startMid);
+  return { ...zoomed, x: zoomed.x + mid.x - startMid.x, y: zoomed.y + mid.y - startMid.y };
+}
+function usePanZoomCanvas(options) {
+  const { stopSelector, initialView } = options;
+  const viewportRef = useRef(null);
+  const dragRef = useRef(null);
+  const interactedRef = useRef(false);
+  const pointersRef = useRef(/* @__PURE__ */ new Map());
+  const pinchRef = useRef(null);
+  const pendingRef = useRef(null);
+  const gestureEndedAtRef = useRef(0);
+  const dragFromStopRef = useRef(false);
+  const viewRef = useRef(initialView);
+  const [view, setViewState] = useState(initialView);
+  const setView = useCallback((next) => {
+    setViewState((current) => {
+      const resolved = typeof next === "function" ? next(current) : next;
+      viewRef.current = resolved;
+      return resolved;
+    });
+  }, []);
+  const [dragging, setDragging] = useState(false);
+  const [nativeFullscreen, setNativeFullscreen] = useState(false);
+  const [pseudoFullscreen, setPseudoFullscreen] = useState(false);
+  const isFullscreen = nativeFullscreen || pseudoFullscreen;
+  useEffect(() => {
+    const handleFullscreenChange = () => {
+      setNativeFullscreen(document.fullscreenElement === viewportRef.current);
+    };
+    document.addEventListener("fullscreenchange", handleFullscreenChange);
+    return () => document.removeEventListener("fullscreenchange", handleFullscreenChange);
+  }, []);
+  useEffect(() => {
+    if (!pseudoFullscreen) return;
+    const onKey = (event) => {
+      if (event.key === "Escape") setPseudoFullscreen(false);
+    };
+    document.addEventListener("keydown", onKey);
+    return () => document.removeEventListener("keydown", onKey);
+  }, [pseudoFullscreen]);
+  useEffect(() => {
+    const viewport = viewportRef.current;
+    if (!viewport) return;
+    const onTouchMove = (event) => {
+      if (event.touches.length >= 2 && event.cancelable) event.preventDefault();
+    };
+    viewport.addEventListener("touchmove", onTouchMove, { passive: false });
+    return () => viewport.removeEventListener("touchmove", onTouchMove);
+  }, []);
+  useEffect(() => {
+    const viewport = viewportRef.current;
+    if (!viewport) return;
+    const onWheel = (event) => {
+      event.preventDefault();
+      interactedRef.current = true;
+      const rect = viewport.getBoundingClientRect();
+      const focal = { x: event.clientX - rect.left, y: event.clientY - rect.top };
+      setView(
+        (current) => applyZoom(current, current.scale * (event.deltaY > 0 ? 0.9 : 1.1), focal)
+      );
+    };
+    viewport.addEventListener("wheel", onWheel, { passive: false });
+    return () => viewport.removeEventListener("wheel", onWheel);
+  }, []);
+  const viewportCenter = useCallback(() => {
+    const rect = viewportRef.current?.getBoundingClientRect();
+    if (!rect) return { x: 0, y: 0 };
+    return { x: rect.width / 2, y: rect.height / 2 };
+  }, []);
+  const zoomAt = useCallback((nextScale, focal) => {
+    interactedRef.current = true;
+    setView((current) => applyZoom(current, nextScale, focal));
+  }, []);
+  const localPoint = (event) => {
+    const rect = event.currentTarget.getBoundingClientRect();
+    return { x: event.clientX - rect.left, y: event.clientY - rect.top };
+  };
+  const pinchGeometry = () => {
+    const [a, b] = [...pointersRef.current.values()];
+    return {
+      distance: Math.hypot(b.x - a.x, b.y - a.y),
+      mid: { x: (a.x + b.x) / 2, y: (a.y + b.y) / 2 }
+    };
+  };
+  const restartPan = (pointerId, point, event) => {
+    const rect = event.currentTarget.getBoundingClientRect();
+    dragRef.current = {
+      pointerId,
+      startX: point.x + rect.left,
+      startY: point.y + rect.top,
+      originX: viewRef.current.x,
+      originY: viewRef.current.y
+    };
+    dragFromStopRef.current = true;
+  };
+  const capturePointer = (event, pointerId) => {
+    try {
+      event.currentTarget.setPointerCapture(pointerId);
+    } catch {
+    }
+  };
+  const startPan = (event, pointerId, start, fromStop) => {
+    interactedRef.current = true;
+    dragRef.current = {
+      pointerId,
+      startX: start.x,
+      startY: start.y,
+      originX: viewRef.current.x,
+      originY: viewRef.current.y
+    };
+    dragFromStopRef.current = fromStop;
+    setDragging(true);
+    capturePointer(event, pointerId);
+  };
+  const handlePointerDown = (event) => {
+    const onStop = Boolean(event.target.closest(stopSelector));
+    if (onStop && event.pointerType !== "touch") return;
+    pointersRef.current.set(event.pointerId, localPoint(event));
+    if (pointersRef.current.size === 2) {
+      interactedRef.current = true;
+      dragRef.current = null;
+      pendingRef.current = null;
+      const { distance, mid } = pinchGeometry();
+      pinchRef.current = { start: viewRef.current, distance, mid };
+      for (const pointerId of pointersRef.current.keys()) capturePointer(event, pointerId);
+      setDragging(true);
+      return;
+    }
+    if (pointersRef.current.size > 2) return;
+    if (onStop || event.pointerType === "touch" && !isFullscreen) {
+      pendingRef.current = { pointerId: event.pointerId, startX: event.clientX, startY: event.clientY, fromStop: onStop };
+      return;
+    }
+    startPan(event, event.pointerId, { x: event.clientX, y: event.clientY }, false);
+  };
+  const handleClickCapture = (event) => {
+    const dragFromStop = dragRef.current !== null && dragFromStopRef.current;
+    if (pinchRef.current || dragFromStop || Date.now() - gestureEndedAtRef.current < PINCH_CLICK_GRACE_MS) {
+      event.preventDefault();
+      event.stopPropagation();
+    }
+  };
+  const handlePointerMove = (event) => {
+    if (!pointersRef.current.has(event.pointerId)) return;
+    pointersRef.current.set(event.pointerId, localPoint(event));
+    const pinch = pinchRef.current;
+    if (pinch && pointersRef.current.size >= 2) {
+      const { distance, mid } = pinchGeometry();
+      setView(applyPinch(pinch.start, pinch.distance, pinch.mid, distance, mid));
+      return;
+    }
+    const pending = pendingRef.current;
+    if (pending && pending.pointerId === event.pointerId) {
+      const dx = event.clientX - pending.startX;
+      const dy = event.clientY - pending.startY;
+      if (Math.hypot(dx, dy) < PAN_SLOP_PX) return;
+      pendingRef.current = null;
+      if (!isFullscreen && Math.abs(dy) > Math.abs(dx)) return;
+      startPan(event, event.pointerId, { x: pending.startX, y: pending.startY }, pending.fromStop);
+    }
+    const drag = dragRef.current;
+    if (!drag || drag.pointerId !== event.pointerId) return;
+    setView((current) => ({
+      ...current,
+      x: drag.originX + event.clientX - drag.startX,
+      y: drag.originY + event.clientY - drag.startY
+    }));
+  };
+  const handlePointerUp = (event) => {
+    if (!pointersRef.current.has(event.pointerId)) return;
+    pointersRef.current.delete(event.pointerId);
+    if (event.currentTarget.hasPointerCapture(event.pointerId)) {
+      event.currentTarget.releasePointerCapture(event.pointerId);
+    }
+    if (pendingRef.current?.pointerId === event.pointerId) pendingRef.current = null;
+    if (pinchRef.current && pointersRef.current.size < 2) {
+      pinchRef.current = null;
+      gestureEndedAtRef.current = Date.now();
+      const rest = [...pointersRef.current.entries()][0];
+      if (rest) restartPan(rest[0], rest[1], event);
+    }
+    if (dragRef.current?.pointerId === event.pointerId) {
+      if (dragFromStopRef.current) gestureEndedAtRef.current = Date.now();
+      dragRef.current = null;
+      dragFromStopRef.current = false;
+    }
+    if (pointersRef.current.size === 0) {
+      dragRef.current = null;
+      dragFromStopRef.current = false;
+      setDragging(false);
+    }
+  };
+  const toggleFullscreen = async () => {
+    const viewport = viewportRef.current;
+    if (!viewport) return;
+    if (pseudoFullscreen) {
+      setPseudoFullscreen(false);
+      return;
+    }
+    if (document.fullscreenElement === viewport) {
+      try {
+        await document.exitFullscreen();
+      } catch {
+      }
+      return;
+    }
+    try {
+      if (typeof viewport.requestFullscreen !== "function") throw new Error("unsupported");
+      await viewport.requestFullscreen();
+    } catch {
+      setPseudoFullscreen(true);
+    }
+  };
+  return {
+    viewportRef,
+    view,
+    setView,
+    dragging,
+    isFullscreen,
+    /** 브라우저 전체화면 대신 화면을 덮는 고정 배치로 들어가 있는가(위젯이 배치 클래스를 붙인다). */
+    pseudoFullscreen,
+    interactedRef,
+    viewportCenter,
+    zoomAt,
+    toggleFullscreen,
+    /** 뷰포트 div에 그대로 spread — 패닝 4종 + 핀치 직후 click 차단. */
+    pointerHandlers: {
+      onPointerDown: handlePointerDown,
+      onPointerMove: handlePointerMove,
+      onPointerUp: handlePointerUp,
+      onPointerCancel: handlePointerUp,
+      onClickCapture: handleClickCapture
+    }
+  };
+}
+
+export { MAX_ZOOM, MIN_ZOOM, usePanZoomCanvas };

package/dist/{chunk-JIV4YHCZ.js → chunk-EJIWOD7W.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 resolveColor = (color, index) => {

package/dist/{chunk-JZXU22PE.js → chunk-FEKKOBPX.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-KZ6U6FKB.js';
+import { useSduiAdapter, hostFetchOf, defaultAdapter } from './chunk-YNEEJCSZ.js';
+import { warnOnce, Badge, Button, IconButton, Icon } from './chunk-BLFJMMBW.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-GSM664TX.js

@@ -0,0 +1,38 @@
+import { useSyncExternalStore } from 'react';
+
+// src/env.ts
+var DEV = (() => {
+  try {
+    const meta = import.meta;
+    return Boolean(meta.env?.DEV);
+  } catch {
+    return false;
+  }
+})();
+var MOBILE_MEDIA_QUERY = "screen and (max-width: 767.98px)";
+function mobileQueryList() {
+  if (typeof window === "undefined" || typeof window.matchMedia !== "function") return null;
+  return window.matchMedia(MOBILE_MEDIA_QUERY);
+}
+function subscribeMobile(onChange) {
+  const list = mobileQueryList();
+  if (!list) return () => {
+  };
+  if (typeof list.addEventListener === "function") {
+    list.addEventListener("change", onChange);
+    return () => list.removeEventListener("change", onChange);
+  }
+  list.addListener(onChange);
+  return () => list.removeListener(onChange);
+}
+function mobileSnapshot() {
+  return mobileQueryList()?.matches ?? false;
+}
+function mobileServerSnapshot() {
+  return false;
+}
+function useIsMobile() {
+  return useSyncExternalStore(subscribeMobile, mobileSnapshot, mobileServerSnapshot);
+}
+
+export { DEV, MOBILE_MEDIA_QUERY, useIsMobile };

package/dist/{chunk-JYAR7D5U.js → chunk-HRHKQOOF.js}

@@ -1,5 +1,5 @@
-import { Icon, Badge } from './chunk-RNOUXUBO.js';
-import { boxed } from './chunk-5WW4MBRO.js';
+import { Icon, Badge } from './chunk-BLFJMMBW.js';
+import { boxed } from './chunk-3JTBOABA.js';
 import React from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 

package/dist/{chunk-CXW6KT6X.js → chunk-HXLQSO66.js}

@@ -1,6 +1,6 @@
-import { Text } from './chunk-WPSK2CB5.js';
-import { Field, Input, Select, IconButton, Button } from './chunk-RNOUXUBO.js';
-import { boxed } from './chunk-5WW4MBRO.js';
+import { Text } from './chunk-LIZTK3HO.js';
+import { Field, Input, Select, IconButton, Button } from './chunk-BLFJMMBW.js';
+import { boxed } from './chunk-3JTBOABA.js';
 import { useMemo } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';