sellmate-design-system-react 4.3.0 → 5.0.1

package/dist/index.cjs

@@ -5329,6 +5329,16 @@ var SCircleProgress = /* @__PURE__ */ react.forwardRef(
     );
   }
 );
+
+// src/lib/global-overlay.ts
+var GLOBAL_OVERLAY_ATTR = "data-s-global-overlay";
+var globalOverlayProps = { [GLOBAL_OVERLAY_ATTR]: "" };
+function isFromGlobalOverlay(event) {
+  const detail = event.detail;
+  const target = detail?.originalEvent?.target ?? event.target;
+  const element = target instanceof Element ? target : target instanceof Node ? target.parentElement : null;
+  return !!element?.closest(`[${GLOBAL_OVERLAY_ATTR}]`);
+}
 var SLoadingContainer = /* @__PURE__ */ react.forwardRef(
   function SLoadingContainer2({ open = false, message, zIndex = Z_INDEX.loading, className, style }, ref) {
     const [mounted2, setMounted] = react.useState(false);
@@ -5365,6 +5375,7 @@ var SLoadingContainer = /* @__PURE__ */ react.forwardRef(
       "div",
       {
         ref: setRef,
+        ...globalOverlayProps,
         "aria-hidden": !open,
         className: cn(
           "fixed inset-0 flex items-center justify-center transition-opacity duration-200",
@@ -5572,6 +5583,7 @@ var SDropdownButtonImpl = /* @__PURE__ */ react.forwardRef(
     style
   }, ref) {
     const portalContainer = usePortalContainer();
+    const insideModal = useInsideModal();
     const [open, setOpen] = react.useState(false);
     const splitWrapRef = react.useRef(null);
     const splitToggleRef = react.useRef(null);
@@ -5660,6 +5672,7 @@ var SDropdownButtonImpl = /* @__PURE__ */ react.forwardRef(
     return /* @__PURE__ */ jsxRuntime.jsxs(
       RDropdown__namespace.Root,
       {
+        modal: !insideModal,
         open,
         onOpenChange: (o) => {
           setOpen(o);
@@ -6002,6 +6015,53 @@ function SPortal({
     }
   );
 }
+function SFooter({
+  bg = "white",
+  left,
+  button,
+  children,
+  className,
+  leftClassName,
+  style
+}) {
+  const isGrey = bg === "grey";
+  const hasSlot = left != null || children != null;
+  const hasButton = button != null;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "footer",
+    {
+      className: cn(
+        "relative flex w-full flex-shrink-0 items-center justify-end gap-[var(--cmp-overlay-footer-gap)] overflow-hidden px-[var(--cmp-overlay-footer-paddingX)] py-[var(--cmp-overlay-footer-paddingY)] shadow-[var(--shadow-spread-md)]",
+        isGrey ? "bg-[var(--cmp-overlay-footer-bg-neutral)]" : "bg-[var(--cmp-overlay-footer-bg-default)]",
+        className
+      ),
+      style,
+      children: [
+        hasSlot && /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: cn("flex min-w-px flex-[1_0_0] items-center justify-between", leftClassName),
+            children: [
+              left,
+              children
+            ]
+          }
+        ),
+        hasButton && /* @__PURE__ */ jsxRuntime.jsx(
+          SButton,
+          {
+            color: button.color ?? "primary",
+            outline: button.outline,
+            size: button.size ?? "md",
+            disabled: button.disabled,
+            onClick: () => button.onClick?.(),
+            label: button.label ?? "\uD655\uC778"
+          }
+        )
+      ]
+    }
+  );
+}
 var SPopup = /* @__PURE__ */ react.forwardRef(function SPopup2({
   popupTitle = "",
   type = "default",
@@ -6050,29 +6110,7 @@ var SPopup = /* @__PURE__ */ react.forwardRef(function SPopup2({
             children
           }
         ),
-        useFooter && /* @__PURE__ */ jsxRuntime.jsxs(
-          "footer",
-          {
-            className: "relative z-[1] flex h-[52px] w-full flex-shrink-0 items-center gap-[var(--cmp-overlay-footer-gap)] px-[var(--cmp-overlay-footer-paddingX)] py-[var(--cmp-overlay-footer-paddingY)]",
-            style: {
-              background: "var(--cmp-overlay-footer-bg-default)",
-              boxShadow: "var(--shadow-spread-md)"
-            },
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex min-w-0 flex-1 items-center", children: footerLeft }),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                SButton,
-                {
-                  color: submitButton?.color ?? "primary",
-                  outline: submitButton?.outline,
-                  size: submitButton?.size ?? "md",
-                  onClick: onSubmit,
-                  label: submitButton?.label ?? "\uD655\uC778"
-                }
-              )
-            ]
-          }
-        )
+        useFooter && /* @__PURE__ */ jsxRuntime.jsx(SFooter, { left: footerLeft, button: { ...submitButton, onClick: onSubmit } })
       ]
     }
   );
@@ -6094,6 +6132,7 @@ function SGuide({
   style
 }) {
   const [open, setOpen] = react.useState(false);
+  const portalContainer = usePortalContainer();
   const isNotion = type === "notion";
   const defaultLabel = DEFAULT_LABEL[type];
   const iconName = ICON[type];
@@ -6128,7 +6167,7 @@ function SGuide({
     return /* @__PURE__ */ jsxRuntime.jsx("span", { className, style, children: trigger });
   return /* @__PURE__ */ jsxRuntime.jsxs(RPopover2__namespace.Root, { open, onOpenChange: setOpen, children: [
     /* @__PURE__ */ jsxRuntime.jsx(RPopover2__namespace.Trigger, { asChild: true, children: trigger }),
-    /* @__PURE__ */ jsxRuntime.jsx(RPopover2__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsxs(
+    /* @__PURE__ */ jsxRuntime.jsx(RPopover2__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsxs(
       RPopover2__namespace.Content,
       {
         side: "bottom",
@@ -6226,7 +6265,7 @@ function SModalContainer({
   ariaTitle = "\uBAA8\uB2EC",
   showClose = false,
   onClose,
-  persistent = false,
+  persistent = true,
   width,
   height,
   children,
@@ -6269,6 +6308,13 @@ function SModalContainer({
     e.preventDefault();
     if (stackRegistrationRef.current?.isTop()) triggerShake();
   } : void 0;
+  const guardInteractOutside = (e) => {
+    if (isFromGlobalOverlay(e)) {
+      e.preventDefault();
+      return;
+    }
+    guardClose?.(e);
+  };
   return /* @__PURE__ */ jsxRuntime.jsx(RDialog__namespace.Root, { open, onOpenChange, children: /* @__PURE__ */ jsxRuntime.jsx(RDialog__namespace.Portal, { container: modalHost, forceMount: rendered ? true : void 0, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pointer-events-none absolute inset-0", style: { zIndex: layerIndex ?? 0 }, children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       RDialog__namespace.Overlay,
@@ -6295,8 +6341,8 @@ function SModalContainer({
               contentRef.current?.focus({ preventScroll: true });
             },
             onEscapeKeyDown: guardClose,
-            onPointerDownOutside: guardClose,
-            onInteractOutside: guardClose,
+            onPointerDownOutside: guardInteractOutside,
+            onInteractOutside: guardInteractOutside,
             children: [
               /* @__PURE__ */ jsxRuntime.jsx(RDialog__namespace.Title, { className: "sr-only", children: ariaTitle }),
               /* @__PURE__ */ jsxRuntime.jsxs(
@@ -6447,7 +6493,7 @@ function SConfirmModal({
             )) })
           ] })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-shrink-0 gap-[8px]", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-shrink-0 gap-[var(--cmp-modal-confirm-button-gap)]", children: [
           subButtonLabel && /* @__PURE__ */ jsxRuntime.jsx(
             SButton,
             {
@@ -6478,6 +6524,64 @@ function SConfirmModal({
     }
   );
 }
+function SOverlayHeader({
+  title,
+  description,
+  showClose = false,
+  onClose,
+  reserveCloseSpace = false,
+  className,
+  titleClassName,
+  descriptionClassName,
+  style
+}) {
+  const hasDescription = description != null && description !== "";
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "header",
+    {
+      className: cn(
+        "relative flex w-full flex-shrink-0 items-center",
+        "gap-[var(--cmp-overlay-header-gap)] bg-[var(--cmp-overlay-header-bg)] py-[var(--cmp-overlay-header-paddingY)] pl-[var(--cmp-overlay-header-paddingX)]",
+        showClose || reserveCloseSpace ? "pr-[calc(var(--cmp-overlay-header-paddingX)+20px)]" : "pr-[var(--cmp-overlay-header-paddingX)]",
+        className
+      ),
+      style,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "h2",
+          {
+            className: cn(
+              "m-0 overflow-hidden text-ellipsis whitespace-nowrap",
+              "text-[16px] font-bold leading-[26px]",
+              titleClassName
+            ),
+            style: { color: "var(--cmp-overlay-header-title-color)" },
+            children: title
+          }
+        ),
+        hasDescription && /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: cn(
+              "flex min-w-0 flex-1 items-center gap-sd-2 text-[12px] font-normal leading-[20px] text-[color:var(--color-grey-65)]",
+              descriptionClassName
+            ),
+            children: description
+          }
+        ),
+        showClose && /* @__PURE__ */ jsxRuntime.jsx(
+          SGhostButton,
+          {
+            icon: "close",
+            ariaLabel: "\uB2EB\uAE30",
+            onClick: () => onClose?.(),
+            className: "absolute right-[12px] top-[12px]"
+          }
+        )
+      ]
+    }
+  );
+}
 function SActionModal({
   open,
   onOpenChange,
@@ -6504,35 +6608,9 @@ function SActionModal({
       height,
       className: "w-fit min-w-[min(480px,calc(100dvw-48px))] min-h-[min(320px,calc(100dvh-48px))]",
       children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-h-0 flex-auto flex-col", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("header", { className: "flex flex-shrink-0 items-center gap-[var(--cmp-overlay-header-gap)] py-[var(--cmp-overlay-header-paddingY)] pl-[var(--cmp-overlay-header-paddingX)] pr-[calc(var(--cmp-overlay-header-paddingX)+20px)]", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "whitespace-nowrap text-[16px] font-bold leading-[26px] text-[color:var(--cmp-overlay-header-title-color)]", children: modalTitle }),
-          description != null && description !== "" && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex min-w-0 flex-1 items-center gap-sd-2 text-[12px] font-normal leading-[20px] text-[color:var(--color-grey-65)]", children: description })
-        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(SOverlayHeader, { title: modalTitle, description, reserveCloseSpace: true }),
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-h-0 flex-1 overflow-auto px-[var(--cmp-modal-action-body-paddingX)] pb-[var(--cmp-modal-action-body-paddingBottom)]", children }),
-        (button || footerLeft) && /* @__PURE__ */ jsxRuntime.jsxs(
-          "footer",
-          {
-            className: "flex flex-shrink-0 items-center justify-end gap-[var(--cmp-modal-action-footer-gap)] border-t border-solid px-[var(--cmp-modal-action-footer-paddingX)] py-[var(--cmp-modal-action-footer-paddingY)]",
-            style: {
-              background: "var(--cmp-modal-action-footer-bg)",
-              borderTopColor: "var(--cmp-modal-action-footer-border)"
-            },
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex min-w-0 flex-1 items-center gap-sd-2", children: footerLeft }),
-              button && /* @__PURE__ */ jsxRuntime.jsx(
-                SButton,
-                {
-                  color: button.color ?? "primary",
-                  outline: button.outline,
-                  size: button.size ?? "md",
-                  disabled: button.disabled,
-                  onClick: () => button.onClick?.(),
-                  label: button.label ?? "\uD655\uC778"
-                }
-              )
-            ]
-          }
-        )
+        (button || footerLeft) && /* @__PURE__ */ jsxRuntime.jsx(SFooter, { bg: "grey", left: footerLeft, button })
       ] })
     }
   );
@@ -6601,13 +6679,43 @@ function SLoadingModal({
   );
 }
 var CLOSE_ANIMATION_DURATION2 = 300;
+function toPx(value, percentBase) {
+  if (typeof value === "number") return value;
+  if (typeof value !== "string") return void 0;
+  const normalized = value.trim();
+  if (normalized.endsWith("px")) {
+    const numeric = Number(normalized.slice(0, -2));
+    return Number.isFinite(numeric) ? numeric : void 0;
+  }
+  if (normalized.endsWith("%")) {
+    const numeric = Number(normalized.slice(0, -1));
+    return Number.isFinite(numeric) ? percentBase * numeric / 100 : void 0;
+  }
+  if (normalized.endsWith("vw")) {
+    const numeric = Number(normalized.slice(0, -2));
+    return Number.isFinite(numeric) ? window.innerWidth * numeric / 100 : void 0;
+  }
+  if (normalized.endsWith("vh")) {
+    const numeric = Number(normalized.slice(0, -2));
+    return Number.isFinite(numeric) ? window.innerHeight * numeric / 100 : void 0;
+  }
+  return void 0;
+}
+function clamp3(value, min, max) {
+  const minValue = min ?? Number.NEGATIVE_INFINITY;
+  const maxValue = max ?? Number.POSITIVE_INFINITY;
+  return Math.min(Math.max(value, minValue), maxValue);
+}
 function SDrawer({
   open,
   onOpenChange,
   onClose,
-  persistent = false,
+  persistent = true,
   title = "",
   width = 572,
+  resizable = false,
+  minWidth,
+  maxWidth,
   footerLeft,
   button,
   children,
@@ -6621,7 +6729,13 @@ function SDrawer({
   const backdropPointerDownRef = react.useRef(false);
   const contentRef = react.useRef(null);
   const stackRegistrationRef = react.useRef(null);
+  const resizeCleanupRef = react.useRef(null);
+  const resizeStateRef = react.useRef(null);
   const [layerIndex, setLayerIndex] = react.useState(null);
+  const [currentWidth, setCurrentWidth] = react.useState(width);
+  react.useEffect(() => {
+    setCurrentWidth(width);
+  }, [width]);
   react.useEffect(() => {
     if (open) {
       setRendered(true);
@@ -6631,6 +6745,9 @@ function SDrawer({
     const timer = window.setTimeout(() => setRendered(false), CLOSE_ANIMATION_DURATION2);
     return () => window.clearTimeout(timer);
   }, [open, rendered]);
+  react.useEffect(() => {
+    return () => resizeCleanupRef.current?.();
+  }, []);
   react.useEffect(() => {
     if (!open) {
       setEntered(false);
@@ -6658,6 +6775,13 @@ function SDrawer({
     event.preventDefault();
     if (stackRegistrationRef.current?.isTop()) triggerShake();
   } : void 0;
+  const guardInteractOutside = (e) => {
+    if (isFromGlobalOverlay(e)) {
+      e.preventDefault();
+      return;
+    }
+    guardClose?.(e);
+  };
   const handleBackdropInteraction = () => {
     if (persistent) {
       if (stackRegistrationRef.current?.isTop()) triggerShake();
@@ -6665,6 +6789,40 @@ function SDrawer({
     }
     onOpenChange?.(false);
   };
+  const handleResizeStart = (event) => {
+    event.preventDefault();
+    event.stopPropagation();
+    const panel = contentRef.current?.querySelector("[data-s-drawer-panel]");
+    if (!panel) return;
+    resizeStateRef.current = {
+      startX: event.clientX,
+      startWidth: panel.getBoundingClientRect().width,
+      minWidth: toPx(minWidth, window.innerWidth),
+      maxWidth: toPx(maxWidth, window.innerWidth)
+    };
+    const onMove = (moveEvent) => {
+      const resizeState = resizeStateRef.current;
+      if (!resizeState) return;
+      const nextWidth = resizeState.startWidth + resizeState.startX - moveEvent.clientX;
+      setCurrentWidth(clamp3(nextWidth, resizeState.minWidth, resizeState.maxWidth));
+    };
+    resizeCleanupRef.current?.();
+    const previousCursor = document.body.style.cursor;
+    const previousUserSelect = document.body.style.userSelect;
+    const cleanupResize = () => {
+      resizeStateRef.current = null;
+      document.body.style.cursor = previousCursor;
+      document.body.style.userSelect = previousUserSelect;
+      document.removeEventListener("mousemove", onMove);
+      document.removeEventListener("mouseup", cleanupResize);
+      resizeCleanupRef.current = null;
+    };
+    resizeCleanupRef.current = cleanupResize;
+    document.body.style.cursor = "col-resize";
+    document.body.style.userSelect = "none";
+    document.addEventListener("mousemove", onMove);
+    document.addEventListener("mouseup", cleanupResize);
+  };
   const modalHost = getModalHost();
   return /* @__PURE__ */ jsxRuntime.jsx(RDialog__namespace.Root, { open, onOpenChange, children: /* @__PURE__ */ jsxRuntime.jsx(RDialog__namespace.Portal, { container: modalHost, forceMount: rendered ? true : void 0, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pointer-events-none absolute inset-0", style: { zIndex: layerIndex ?? 0 }, children: [
     /* @__PURE__ */ jsxRuntime.jsx(
@@ -6694,14 +6852,14 @@ function SDrawer({
       {
         forceMount: rendered ? true : void 0,
         ref: contentRef,
-        className: "pointer-events-auto absolute inset-y-0 right-0 w-fit max-w-full outline-none",
+        className: "pointer-events-none absolute inset-y-0 right-0 flex w-fit max-w-full justify-end outline-none",
         onOpenAutoFocus: (event) => {
           event.preventDefault();
           contentRef.current?.focus({ preventScroll: true });
         },
         onEscapeKeyDown: guardClose,
-        onPointerDownOutside: guardClose,
-        onInteractOutside: guardClose,
+        onPointerDownOutside: guardInteractOutside,
+        onInteractOutside: guardInteractOutside,
         children: [
           /* @__PURE__ */ jsxRuntime.jsx(RDialog__namespace.Title, { className: "sr-only", children: title || "Drawer" }),
           /* @__PURE__ */ jsxRuntime.jsxs(
@@ -6712,42 +6870,35 @@ function SDrawer({
                 shaking && "animate-drawer-shake",
                 className
               ),
+              "data-s-drawer-panel": true,
               "data-state": open && entered ? "open" : "closed",
-              style: { width, ...style },
+              style: { width: currentWidth, minWidth, maxWidth, ...style },
               onAnimationEnd: (event) => {
                 if (event.animationName === "drawer-shake") setShaking(false);
               },
               children: [
-                /* @__PURE__ */ jsxRuntime.jsxs("header", { className: "relative flex flex-shrink-0 items-center gap-[var(--cmp-overlay-header-gap)] bg-[var(--cmp-overlay-header-bg)] px-[var(--cmp-overlay-header-paddingX)] py-[var(--cmp-overlay-header-paddingY)]", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "m-0 whitespace-nowrap text-[16px] font-bold leading-[26px] text-[color:var(--cmp-overlay-header-title-color)]", children: title }),
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    SGhostButton,
-                    {
-                      icon: "close",
-                      ariaLabel: "\uB2EB\uAE30",
-                      onClick: () => {
-                        onClose?.();
-                        onOpenChange?.(false);
-                      },
-                      className: "absolute right-[12px] top-[12px]"
+                resizable && /* @__PURE__ */ jsxRuntime.jsx(
+                  "button",
+                  {
+                    type: "button",
+                    "aria-label": "Drawer \uB108\uBE44 \uC870\uC808",
+                    className: "absolute inset-y-0 left-0 z-[1] w-[8px] -translate-x-1/2 cursor-col-resize touch-none border-0 bg-transparent p-0",
+                    onMouseDown: handleResizeStart
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  SOverlayHeader,
+                  {
+                    title,
+                    showClose: true,
+                    onClose: () => {
+                      onClose?.();
+                      onOpenChange?.(false);
                     }
-                  )
-                ] }),
+                  }
+                ),
                 /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-h-0 flex-1 overflow-auto border-t border-solid border-[color:var(--cmp-drawer-body-border)]", children: /* @__PURE__ */ jsxRuntime.jsx(InsideModalProvider, { value: true, children: /* @__PURE__ */ jsxRuntime.jsx(PortalContainerProvider, { value: portalContainer, children }) }) }),
-                (button || footerLeft) && /* @__PURE__ */ jsxRuntime.jsxs("footer", { className: "flex flex-shrink-0 items-center justify-end gap-[var(--cmp-overlay-footer-gap)] bg-[var(--cmp-overlay-footer-bg-default)] px-[var(--cmp-overlay-footer-paddingX)] py-[var(--cmp-overlay-footer-paddingY)] shadow-[var(--shadow-overlay)]", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex min-w-0 flex-1 items-center justify-between", children: footerLeft }),
-                  button && /* @__PURE__ */ jsxRuntime.jsx(
-                    SButton,
-                    {
-                      color: button.color ?? "primary",
-                      outline: button.outline,
-                      size: button.size ?? "md",
-                      disabled: button.disabled,
-                      onClick: () => button.onClick?.(),
-                      label: button.label ?? "\uD655\uC778"
-                    }
-                  )
-                ] })
+                (button || footerLeft) && /* @__PURE__ */ jsxRuntime.jsx(SFooter, { left: footerLeft, leftClassName: "justify-between", button })
               ]
             }
           ),
@@ -7002,6 +7153,80 @@ var SModal = {
     return mount((refImpl) => /* @__PURE__ */ jsxRuntime.jsx(CreateMount, { options, refImpl }));
   }
 };
+var useIsomorphicLayoutEffect = typeof window !== "undefined" ? react.useLayoutEffect : react.useEffect;
+var isSameNav = (a, b) => a === b || !!a && !!b && a.columnWidth === b.columnWidth && a.topHeight === b.topHeight && a.foldMs === b.foldMs && a.requireFullHeader === b.requireFullHeader;
+var SLayoutContext = /* @__PURE__ */ react.createContext(null);
+function useSLayout() {
+  const ctx = react.useContext(SLayoutContext);
+  if (!ctx) throw new Error("useSLayout \uC740 <SLayout> \uC548\uC5D0\uC11C\uB9CC \uC0AC\uC6A9\uD560 \uC218 \uC788\uC2B5\uB2C8\uB2E4.");
+  return ctx;
+}
+var SLayout = /* @__PURE__ */ react.forwardRef(function SLayout2({
+  type = "box",
+  header = "fix",
+  useRail = false,
+  folded,
+  defaultFolded = false,
+  onFoldedChange,
+  className,
+  style,
+  children,
+  ...rest
+}, ref) {
+  const [uncontrolledFolded, setUncontrolledFolded] = react.useState(defaultFolded);
+  const isControlled = folded !== void 0;
+  const currentFolded = isControlled ? folded : uncontrolledFolded;
+  const setFolded = react.useCallback(
+    (next) => {
+      if (!isControlled) setUncontrolledFolded(next);
+      onFoldedChange?.(next);
+    },
+    [isControlled, onFoldedChange]
+  );
+  const [nav, setNav] = react.useState(null);
+  const registerNav = react.useCallback(
+    (next) => setNav((prev) => isSameNav(prev, next) ? prev : next),
+    []
+  );
+  const effectiveHeader = header === "full" || nav?.requireFullHeader ? "full" : "fix";
+  const ctx = react.useMemo(
+    () => ({
+      type,
+      header: effectiveHeader,
+      useRail,
+      folded: currentFolded,
+      setFolded,
+      registerNav
+    }),
+    [type, effectiveHeader, useRail, currentFolded, setFolded, registerNav]
+  );
+  const isFullHeader = effectiveHeader === "full";
+  const frameStyle = isFullHeader ? {
+    // 자식이 좌표가 아니라 이름으로 자리를 잡게 한다 — 열·행이 늘어도 자식을 고칠 일이 없다.
+    gridTemplateAreas: '"header header" "nav page"',
+    gridTemplateColumns: `${currentFolded ? 0 : nav?.columnWidth ?? 0}px 1fr`,
+    gridTemplateRows: `${nav?.topHeight ?? "0px"} 1fr`,
+    // 메뉴가 미끄러지는 동안 페이지 열도 같은 길이로 따라와야 한 덩어리로 읽힌다.
+    // (fix 는 SGnb 가 제 폭을 직접 전환하므로 프레임이 손댈 게 없다)
+    transition: `grid-template-columns ${nav?.foldMs ?? 0}ms ease-out`
+  } : void 0;
+  return /* @__PURE__ */ jsxRuntime.jsx(SLayoutContext.Provider, { value: ctx, children: /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref,
+      "data-type": type,
+      "data-header": effectiveHeader,
+      className: cn(
+        "box-border h-full overflow-hidden",
+        isFullHeader ? "grid" : "flex flex-row",
+        className
+      ),
+      style: { ...frameStyle, ...style },
+      ...rest,
+      children
+    }
+  ) });
+});
 
 // src/components/SGnb/gnb.config.ts
 var gnb = (p) => `var(--cmp-gnb-${p})`;
@@ -7134,6 +7359,21 @@ function findGnbRailValue(items, value) {
   if (items.some((item) => item.value === value)) return value;
   return findGnbAncestors(items, value)[0];
 }
+function findGnbSiblingValues(items, value) {
+  const walk = (list) => {
+    if (list.some((item) => item.value === value)) {
+      return list.filter((item) => item.value !== value).map((item) => item.value);
+    }
+    for (const item of list) {
+      if (item.children) {
+        const found = walk(item.children);
+        if (found) return found;
+      }
+    }
+    return null;
+  };
+  return walk(items) ?? [];
+}
 function findGnbAncestors(items, value) {
   const walk = (list, trail) => {
     for (const item of list) {
@@ -7147,79 +7387,6 @@ function findGnbAncestors(items, value) {
   };
   return walk(items, []) ?? [];
 }
-var SLayoutContext = /* @__PURE__ */ react.createContext(null);
-function useSLayout() {
-  const ctx = react.useContext(SLayoutContext);
-  if (!ctx) throw new Error("useSLayout \uC740 <SLayout> \uC548\uC5D0\uC11C\uB9CC \uC0AC\uC6A9\uD560 \uC218 \uC788\uC2B5\uB2C8\uB2E4.");
-  return ctx;
-}
-var SLayout = /* @__PURE__ */ react.forwardRef(function SLayout2({
-  type = "box",
-  header = "fix",
-  useRail = false,
-  folded,
-  defaultFolded = false,
-  onFoldedChange,
-  className,
-  style,
-  children,
-  ...rest
-}, ref) {
-  const [uncontrolledFolded, setUncontrolledFolded] = react.useState(defaultFolded);
-  const isControlled = folded !== void 0;
-  const currentFolded = isControlled ? folded : uncontrolledFolded;
-  const setFolded = react.useCallback(
-    (next) => {
-      if (!isControlled) setUncontrolledFolded(next);
-      onFoldedChange?.(next);
-    },
-    [isControlled, onFoldedChange]
-  );
-  const [gnbState, setGnbState] = react.useState({ forceFull: false, menuVisible: true });
-  const reportGnbState = react.useCallback(
-    (next) => setGnbState(
-      (prev) => prev.forceFull === next.forceFull && prev.menuVisible === next.menuVisible ? prev : next
-    ),
-    []
-  );
-  const effectiveHeader = header === "full" || gnbState.forceFull ? "full" : "fix";
-  const ctx = react.useMemo(
-    () => ({
-      type,
-      header: effectiveHeader,
-      useRail,
-      folded: currentFolded,
-      setFolded,
-      reportGnbState
-    }),
-    [type, effectiveHeader, useRail, currentFolded, setFolded, reportGnbState]
-  );
-  const isFullHeader = effectiveHeader === "full";
-  const gnbColumnWidth = (useRail ? GNB_RAIL_WIDTH : 0) + (gnbState.menuVisible ? GNB_MENU_WIDTH : 0);
-  const frameStyle = isFullHeader ? {
-    gridTemplateColumns: `${currentFolded ? 0 : gnbColumnWidth}px 1fr`,
-    gridTemplateRows: `${GNB_HEADER[effectiveHeader].topHeight} 1fr`,
-    // 메뉴가 미끄러지는 동안 페이지 열도 같은 길이로 따라와야 한 덩어리로 읽힌다.
-    // (fix 는 SGnb 가 제 폭을 직접 전환하므로 프레임이 손댈 게 없다)
-    transition: `grid-template-columns ${GNB_FOLD_MS}ms ease-out`
-  } : void 0;
-  return /* @__PURE__ */ jsxRuntime.jsx(SLayoutContext.Provider, { value: ctx, children: /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      ref,
-      "data-type": type,
-      "data-header": effectiveHeader,
-      className: cn(
-        "box-border h-full overflow-hidden",
-        isFullHeader ? "grid" : "flex flex-row",
-        className
-      ),
-      style: { ...frameStyle, ...style },
-      ...rest,
-      children
-    }
-  ) });
-});
 var DEPTH_PADDING_LEFT = (M, depth) => depth === 1 ? M.depth1PaddingLeft : depth === 2 ? M.depth2PaddingLeft : M.depth3PaddingLeft;
 var SGnb = /* @__PURE__ */ react.forwardRef(function SGnb2({
   type: typeProp,
@@ -7281,8 +7448,12 @@ var SGnb = /* @__PURE__ */ react.forwardRef(function SGnb2({
   const toggleExpand = (key) => {
     setExpandedKeys((prev) => {
       const next = new Set(prev);
-      if (next.has(key)) next.delete(key);
-      else next.add(key);
+      if (next.has(key)) {
+        next.delete(key);
+      } else {
+        findGnbSiblingValues(items, key).forEach((sibling) => next.delete(sibling));
+        next.add(key);
+      }
       return next;
     });
   };
@@ -7453,16 +7624,30 @@ var SGnb = /* @__PURE__ */ react.forwardRef(function SGnb2({
   const menuItems = useRail ? items.find((item) => item.value === activeRail)?.children ?? [] : items;
   const showMenu = !useRail || menuItems.length > 0;
   const bodyWidth = (useRail ? GNB_RAIL_WIDTH : 0) + (showMenu ? GNB_MENU_WIDTH : 0);
-  react.useEffect(() => {
-    layout?.reportGnbState({ forceFull: railHasLeaf, menuVisible: showMenu });
-  }, [layout, railHasLeaf, showMenu]);
+  const registerNav = layout?.registerNav;
+  useIsomorphicLayoutEffect(() => {
+    if (!registerNav) return;
+    registerNav({
+      columnWidth: bodyWidth,
+      topHeight: H.topHeight,
+      foldMs: GNB_FOLD_MS,
+      requireFullHeader: railHasLeaf
+    });
+    return () => registerNav(null);
+  }, [registerNav, bodyWidth, H.topHeight, railHasLeaf]);
   const railFolded = folded && header === "fix";
-  const rootWidth = header === "full" ? "100%" : folded ? GNB_COMMON.foldWidth : bodyWidth;
+  const isFull = header === "full";
+  const isFullFrame = isFull && !!layout;
   const rightBorder = color === "light" ? `1px solid ${C.topBorder}` : void 0;
-  const rootStyle = {
-    width: rootWidth,
+  const rootStyle = isFullFrame ? { display: "contents", ...style } : isFull ? (
+    // 단독 full — 상단바가 전폭이어야 하므로 루트도 전폭이고, 배경·선은 상단바·메뉴가 각자 그린다.
+    { width: "100%", ...style }
+  ) : {
+    // fix 를 닫으면 48px 레일로 좁혀진다.
+    width: folded ? GNB_COMMON.foldWidth : bodyWidth,
     transition: `width ${GNB_FOLD_MS}ms ease-out`,
-    ...header === "full" ? { gridArea: "1 / 1 / -1 / -1", pointerEvents: "none" } : { backgroundColor: C.panelBg, borderRight: rightBorder },
+    backgroundColor: C.panelBg,
+    borderRight: rightBorder,
     ...style
   };
   const hideAfterSlide = (hidden) => `visibility 0s linear ${hidden ? `${GNB_FOLD_MS}ms` : "0s"}`;
@@ -7535,7 +7720,11 @@ var SGnb = /* @__PURE__ */ react.forwardRef(function SGnb2({
     "div",
     {
       ref,
-      className: cn("box-border flex h-full shrink-0 flex-col overflow-hidden", className),
+      className: cn(
+        "box-border",
+        !isFullFrame && "flex h-full shrink-0 flex-col overflow-hidden",
+        className
+      ),
       style: rootStyle,
       "data-type": type,
       "data-header": header,
@@ -7547,6 +7736,7 @@ var SGnb = /* @__PURE__ */ react.forwardRef(function SGnb2({
           {
             className: "relative box-border flex shrink-0 items-center overflow-hidden",
             style: {
+              ...isFullFrame ? { gridArea: "header" } : null,
               height: H.topHeight,
               // 간격은 컨테이너 gap 대신 각 요소 margin 으로 준다 — 순서가 header 마다 달라
               // 이웃 쌍마다 값이 다르기 때문(위 launcherButton/logoBox 주석).
@@ -7554,7 +7744,6 @@ var SGnb = /* @__PURE__ */ react.forwardRef(function SGnb2({
               padding: `0 ${railFolded ? GNB_RAIL.padding : H.topPaddingX}`,
               borderBottom: `1px solid ${C.topBorder}`,
               backgroundColor: C.panelBg,
-              pointerEvents: "auto",
               transition: `padding ${GNB_FOLD_MS}ms ease-out`,
               // 아이콘 버튼은 자체 ghostButton 토큰을 쓰므로, 이 색은 logo 슬롯 상속용
               color: C.itemColorDefault
@@ -7571,94 +7760,87 @@ var SGnb = /* @__PURE__ */ react.forwardRef(function SGnb2({
             ] })
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsxs(
+        /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
-            className: "flex flex-row",
-            style: {
-              width: bodyWidth,
-              alignSelf: "flex-start",
-              flexGrow: 1,
-              flexShrink: 1,
-              flexBasis: "auto",
-              minHeight: 0,
-              transform: folded ? "translateX(-100%)" : "none",
-              visibility: folded ? "hidden" : "visible",
-              transition: `transform ${GNB_FOLD_MS}ms ease-out, ${hideAfterSlide(folded)}`
-            },
-            children: [
-              useRail && // 레일 컬럼 — 스크롤되는 아이템 목록(nav)과 하단 고정 footer 를 한 컬럼에 담는다.
-              // footer 는 내비게이션이 아니므로 nav(landmark) 밖에 두고, 컬럼 폭·구분선·배경은 이 래퍼가
-              // 전체 높이에 걸쳐 책임진다(그래야 footer 자리까지 배경·오른쪽 선이 이어진다).
-              /* @__PURE__ */ jsxRuntime.jsxs(
-                "div",
-                {
-                  className: "flex shrink-0 flex-col overflow-hidden",
-                  style: {
-                    width: GNB_RAIL_WIDTH,
-                    borderRight: `1px solid ${C.topBorder}`,
-                    backgroundColor: C.panelBg,
-                    pointerEvents: "auto"
-                  },
-                  children: [
-                    /* @__PURE__ */ jsxRuntime.jsx(
-                      "nav",
-                      {
-                        "aria-label": `${ariaLabel} rail`,
-                        className: cn(
-                          "flex min-h-0 flex-1 flex-col overflow-x-hidden overflow-y-auto",
-                          SCROLLBAR_HIDDEN_CLASS
+            className: cn("overflow-hidden", !isFullFrame && "min-h-0 flex-1"),
+            style: isFullFrame ? { gridArea: "nav" } : void 0,
+            children: /* @__PURE__ */ jsxRuntime.jsxs(
+              "div",
+              {
+                className: "flex h-full flex-row",
+                style: {
+                  width: bodyWidth,
+                  transform: folded ? "translateX(-100%)" : "none",
+                  visibility: folded ? "hidden" : "visible",
+                  transition: `transform ${GNB_FOLD_MS}ms ease-out, ${hideAfterSlide(folded)}`
+                },
+                children: [
+                  useRail && // 레일 컬럼 — 스크롤되는 아이템 목록(nav)과 하단 고정 footer 를 한 컬럼에 담는다.
+                  // footer 는 내비게이션이 아니므로 nav(landmark) 밖에 두고, 컬럼 폭·구분선·배경은 이 래퍼가
+                  // 전체 높이에 걸쳐 책임진다(그래야 footer 자리까지 배경·오른쪽 선이 이어진다).
+                  /* @__PURE__ */ jsxRuntime.jsxs(
+                    "div",
+                    {
+                      className: "flex shrink-0 flex-col overflow-hidden",
+                      style: {
+                        width: GNB_RAIL_WIDTH,
+                        borderRight: `1px solid ${C.topBorder}`,
+                        backgroundColor: C.panelBg
+                      },
+                      children: [
+                        /* @__PURE__ */ jsxRuntime.jsx(
+                          "nav",
+                          {
+                            "aria-label": `${ariaLabel} rail`,
+                            className: cn(
+                              "flex min-h-0 flex-1 flex-col overflow-x-hidden overflow-y-auto",
+                              SCROLLBAR_HIDDEN_CLASS
+                            ),
+                            style: { padding: GNB_RAIL.padding },
+                            children: /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "m-0 flex list-none flex-col p-0", style: { gap: GNB_RAIL.gap }, children: railItems.map(renderRailItem) })
+                          }
                         ),
-                        style: { padding: GNB_RAIL.padding },
-                        children: /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "m-0 flex list-none flex-col p-0", style: { gap: GNB_RAIL.gap }, children: railItems.map(renderRailItem) })
-                      }
-                    ),
-                    railFooter && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "shrink-0", children: railFooter })
-                  ]
-                }
-              ),
-              showMenu && /* @__PURE__ */ jsxRuntime.jsxs(
-                "div",
-                {
-                  className: "flex shrink-0 flex-col overflow-hidden",
-                  style: {
-                    width: GNB_MENU_WIDTH,
-                    backgroundColor: C.panelBg,
-                    // full 은 상단바가 전폭이라 루트가 오른쪽 선을 못 그린다 → 메뉴 오른쪽(페이지 경계)이 대신 그린다.
-                    borderRight: header === "full" ? rightBorder : void 0,
-                    pointerEvents: "auto"
-                  },
-                  children: [
-                    /* @__PURE__ */ jsxRuntime.jsx(
-                      "nav",
-                      {
-                        "aria-label": ariaLabel,
-                        className: cn(
-                          "flex min-h-0 flex-1 flex-col overflow-x-hidden overflow-y-auto",
-                          SCROLLBAR_HIDDEN_CLASS
+                        railFooter && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "shrink-0", children: railFooter })
+                      ]
+                    }
+                  ),
+                  showMenu && /* @__PURE__ */ jsxRuntime.jsxs(
+                    "div",
+                    {
+                      className: "flex shrink-0 flex-col overflow-hidden",
+                      style: {
+                        width: GNB_MENU_WIDTH,
+                        backgroundColor: C.panelBg,
+                        // full 은 루트가 오른쪽 선을 못 그리므로(전폭이거나 아예 없다) 메뉴 오른쪽(페이지 경계)이 대신 그린다.
+                        borderRight: isFull ? rightBorder : void 0
+                      },
+                      children: [
+                        /* @__PURE__ */ jsxRuntime.jsx(
+                          "nav",
+                          {
+                            "aria-label": ariaLabel,
+                            className: cn(
+                              "flex min-h-0 flex-1 flex-col overflow-x-hidden overflow-y-auto",
+                              SCROLLBAR_HIDDEN_CLASS
+                            ),
+                            style: {
+                              paddingTop: M.bodyPaddingY,
+                              paddingBottom: M.bodyPaddingY
+                            },
+                            children: /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "m-0 flex list-none flex-col p-0", children: menuItems.map((item) => renderItem(item, 1)) })
+                          }
                         ),
-                        style: {
-                          paddingTop: M.bodyPaddingY,
-                          paddingBottom: M.bodyPaddingY
-                        },
-                        children: /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "m-0 flex list-none flex-col p-0", children: menuItems.map((item) => renderItem(item, 1)) })
-                      }
-                    ),
-                    menuFooter && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "shrink-0", children: menuFooter })
-                  ]
-                }
-              )
-            ]
+                        menuFooter && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "shrink-0", children: menuFooter })
+                      ]
+                    }
+                  )
+                ]
+              }
+            )
           }
         ),
-        railFolded && foldedFooter && /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
-          {
-            className: "flex shrink-0 items-center justify-center mb-[24px]",
-            style: { pointerEvents: "auto" },
-            children: foldedFooter
-          }
-        )
+        railFolded && foldedFooter && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex shrink-0 items-center justify-center mb-[24px]", children: foldedFooter })
       ]
     }
   );
@@ -7670,7 +7852,7 @@ var BACKGROUND_CLASS = {
 };
 var SPage = /* @__PURE__ */ react.forwardRef(function SPage2({ background = "frame", className, style, children, ...rest }, ref) {
   const layout = react.useContext(SLayoutContext);
-  const gridStyle = layout?.header === "full" ? { gridColumn: 2, gridRow: 2 } : void 0;
+  const gridStyle = layout?.header === "full" ? { gridArea: "page" } : void 0;
   return /* @__PURE__ */ jsxRuntime.jsx(
     "main",
     {
@@ -11977,6 +12159,7 @@ var SToastContainer = /* @__PURE__ */ react.forwardRef(
       /* @__PURE__ */ jsxRuntime.jsx(
         "div",
         {
+          ...globalOverlayProps,
           style: {
             position: "fixed",
             zIndex,