@wipco/sdui 0.17.1 → 0.18.1

package/dist/{chunk-WVBU3SZM.js → chunk-J532YYGP.js}

@@ -1,4 +1,5 @@
 import { resolveTreeNodes, TreeView } from './chunk-PYSTET2C.js';
+import { OverlayLayer } from './chunk-XQPTSEJC.js';
 import { Field, Dialog, Icon, Button, Input } from './chunk-WIDDHR7L.js';
 import { boxed } from './chunk-SAN4IX6N.js';
 import { useState, useMemo, useEffect } from 'react';
@@ -99,98 +100,87 @@ function TreePickerImpl({
   return /* @__PURE__ */ jsxs("div", { className: "erp-treepicker", style: { minWidth: 0 }, children: [
     /* @__PURE__ */ jsx("style", { children: PICKER_CSS }),
     label ? /* @__PURE__ */ jsx(Field, { label, children: trigger }) : trigger,
-    open ? /* @__PURE__ */ jsx(
-      "div",
+    open ? /* @__PURE__ */ jsx(OverlayLayer, { onClose: closeDialog, children: /* @__PURE__ */ jsx(
+      Dialog,
       {
-        style: { position: "fixed", inset: 0, zIndex: "var(--wp-z-dialog)" },
-        onClick: (event) => {
-          if (event.target instanceof HTMLElement && event.target.classList.contains("wp-overlay")) {
-            closeDialog();
-          }
-        },
-        children: /* @__PURE__ */ jsx(
-          Dialog,
-          {
-            title: label ?? "\uD56D\uBAA9 \uC120\uD0DD",
-            subtitle: "\uD2B8\uB9AC\uC5D0\uC11C \uD56D\uBAA9\uC744 \uC120\uD0DD\uD55C \uB4A4 [\uC120\uD0DD]\uC744 \uB204\uB974\uC138\uC694.",
-            icon: "git-branch",
-            size: "md",
-            onClose: closeDialog,
-            footer: /* @__PURE__ */ jsxs(Fragment, { children: [
-              /* @__PURE__ */ jsx(Button, { variant: "secondary", onClick: closeDialog, children: "\uCDE8\uC18C" }),
-              /* @__PURE__ */ jsx(
-                Button,
-                {
-                  variant: "primary",
-                  onClick: commit,
-                  disabled: commitDisabled,
-                  title: commitDisabled ? "\uC120\uD0DD\uD560 \uD56D\uBAA9\uC744 \uC9C0\uC815\uD558\uC138\uC694" : void 0,
-                  children: "\uC120\uD0DD"
-                }
-              )
-            ] }),
-            children: /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "var(--wp-space-2)", minWidth: 0 }, children: [
-              allowEmpty ? /* @__PURE__ */ jsxs(
-                "div",
-                {
-                  role: "radio",
-                  "aria-checked": noneSelected,
-                  "aria-current": noneSelected ? "true" : void 0,
-                  tabIndex: 0,
-                  className: "erp-treepicker__none",
-                  style: {
-                    display: "flex",
-                    alignItems: "center",
-                    gap: "var(--wp-space-2)",
-                    minHeight: "var(--wp-row-h-dense)",
-                    padding: "0 var(--wp-space-2)",
-                    borderRadius: "var(--wp-radius-sm)",
-                    cursor: "pointer",
-                    userSelect: "none"
-                  },
-                  onClick: () => setPendingId(null),
-                  onKeyDown: (event) => {
-                    if (event.key === "Enter" || event.key === " ") {
-                      event.preventDefault();
-                      setPendingId(null);
-                    }
-                  },
-                  children: [
-                    /* @__PURE__ */ jsx(
-                      Icon,
-                      {
-                        name: noneSelected ? "circle-dot" : "circle-x",
-                        size: 16,
-                        style: { flexShrink: 0, color: noneSelected ? "var(--wp-text-brand)" : "var(--wp-text-muted)" }
-                      }
-                    ),
-                    /* @__PURE__ */ jsx(
-                      "span",
-                      {
-                        className: "wp-body-sm",
-                        style: { color: noneSelected ? "var(--wp-text-strong)" : "var(--wp-text-muted)" },
-                        children: "(\uC5C6\uC74C)"
-                      }
-                    )
-                  ]
-                }
-              ) : null,
-              /* @__PURE__ */ jsx(
-                TreeView,
-                {
-                  nodes: sourceNodes,
-                  selectedId: pendingId,
-                  onSelect: (id) => setPendingId(id),
-                  searchable: true,
-                  excludeIds,
-                  maxHeight: "320px"
+        title: label ?? "\uD56D\uBAA9 \uC120\uD0DD",
+        subtitle: "\uD2B8\uB9AC\uC5D0\uC11C \uD56D\uBAA9\uC744 \uC120\uD0DD\uD55C \uB4A4 [\uC120\uD0DD]\uC744 \uB204\uB974\uC138\uC694.",
+        icon: "git-branch",
+        size: "md",
+        onClose: closeDialog,
+        footer: /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(Button, { variant: "secondary", onClick: closeDialog, children: "\uCDE8\uC18C" }),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "primary",
+              onClick: commit,
+              disabled: commitDisabled,
+              title: commitDisabled ? "\uC120\uD0DD\uD560 \uD56D\uBAA9\uC744 \uC9C0\uC815\uD558\uC138\uC694" : void 0,
+              children: "\uC120\uD0DD"
+            }
+          )
+        ] }),
+        children: /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "var(--wp-space-2)", minWidth: 0 }, children: [
+          allowEmpty ? /* @__PURE__ */ jsxs(
+            "div",
+            {
+              role: "radio",
+              "aria-checked": noneSelected,
+              "aria-current": noneSelected ? "true" : void 0,
+              tabIndex: 0,
+              className: "erp-treepicker__none",
+              style: {
+                display: "flex",
+                alignItems: "center",
+                gap: "var(--wp-space-2)",
+                minHeight: "var(--wp-row-h-dense)",
+                padding: "0 var(--wp-space-2)",
+                borderRadius: "var(--wp-radius-sm)",
+                cursor: "pointer",
+                userSelect: "none"
+              },
+              onClick: () => setPendingId(null),
+              onKeyDown: (event) => {
+                if (event.key === "Enter" || event.key === " ") {
+                  event.preventDefault();
+                  setPendingId(null);
                 }
-              )
-            ] })
-          }
-        )
+              },
+              children: [
+                /* @__PURE__ */ jsx(
+                  Icon,
+                  {
+                    name: noneSelected ? "circle-dot" : "circle-x",
+                    size: 16,
+                    style: { flexShrink: 0, color: noneSelected ? "var(--wp-text-brand)" : "var(--wp-text-muted)" }
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: "wp-body-sm",
+                    style: { color: noneSelected ? "var(--wp-text-strong)" : "var(--wp-text-muted)" },
+                    children: "(\uC5C6\uC74C)"
+                  }
+                )
+              ]
+            }
+          ) : null,
+          /* @__PURE__ */ jsx(
+            TreeView,
+            {
+              nodes: sourceNodes,
+              selectedId: pendingId,
+              onSelect: (id) => setPendingId(id),
+              searchable: true,
+              excludeIds,
+              maxHeight: "320px"
+            }
+          )
+        ] })
       }
-    ) : null
+    ) }) : null
   ] });
 }
 var TreePicker = boxed(TreePickerImpl, "TreePicker");

package/dist/{chunk-J6OHRAPS.js → chunk-WXBOQRD6.js}

@@ -1,3 +1,4 @@
+import { OverlayLayer } from './chunk-XQPTSEJC.js';
 import { includesLooseSearch } from './chunk-GZB6YLUI.js';
 import { Button, Dialog, Input, Tag, Checkbox } from './chunk-WIDDHR7L.js';
 import { boxed } from './chunk-SAN4IX6N.js';
@@ -102,85 +103,74 @@ function SearchableMultiPickerImpl({
   }
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     triggerNode,
-    open ? /* @__PURE__ */ jsx(
-      "div",
+    open ? /* @__PURE__ */ jsx(OverlayLayer, { onClose: closeDialog, children: /* @__PURE__ */ jsx(
+      Dialog,
       {
-        style: { position: "fixed", inset: 0, zIndex: "var(--wp-z-dialog)" },
-        onClick: (event) => {
-          if (event.target instanceof HTMLElement && event.target.classList.contains("wp-overlay")) {
-            closeDialog();
-          }
-        },
-        children: /* @__PURE__ */ jsx(
-          Dialog,
-          {
-            title: title ?? "\uD56D\uBAA9 \uC120\uD0DD",
-            subtitle: `\uC804\uCCB4 ${safeOptions.length}\uAC1C \uC911\uC5D0\uC11C \uC120\uD0DD`,
-            icon: "list-filter",
-            size: "md",
-            onClose: closeDialog,
-            footer: /* @__PURE__ */ jsxs(Fragment, { children: [
-              /* @__PURE__ */ jsx("div", { style: { marginRight: "auto" }, children: /* @__PURE__ */ jsx(
-                Button,
-                {
-                  type: "button",
-                  variant: "ghost",
-                  size: "sm",
-                  icon: "rotate-ccw",
-                  disabled: draft.length === 0,
-                  onClick: () => setDraft([]),
-                  children: "\uC804\uCCB4 \uD574\uC81C"
-                }
-              ) }),
-              /* @__PURE__ */ jsx(Button, { type: "button", variant: "primary", size: "sm", onClick: commit, children: "\uC644\uB8CC" })
+        title: title ?? "\uD56D\uBAA9 \uC120\uD0DD",
+        subtitle: `\uC804\uCCB4 ${safeOptions.length}\uAC1C \uC911\uC5D0\uC11C \uC120\uD0DD`,
+        icon: "list-filter",
+        size: "md",
+        onClose: closeDialog,
+        footer: /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("div", { style: { marginRight: "auto" }, children: /* @__PURE__ */ jsx(
+            Button,
+            {
+              type: "button",
+              variant: "ghost",
+              size: "sm",
+              icon: "rotate-ccw",
+              disabled: draft.length === 0,
+              onClick: () => setDraft([]),
+              children: "\uC804\uCCB4 \uD574\uC81C"
+            }
+          ) }),
+          /* @__PURE__ */ jsx(Button, { type: "button", variant: "primary", size: "sm", onClick: commit, children: "\uC644\uB8CC" })
+        ] }),
+        children: /* @__PURE__ */ jsxs("div", { className: "wp-col", style: { gap: "var(--wp-space-3)" }, children: [
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              icon: "search",
+              placeholder: "\uC774\uB984\xB7\uC124\uBA85\uC73C\uB85C \uAC80\uC0C9",
+              autoFocus: true,
+              value: query,
+              onChange: (event) => setQuery(event.target.value)
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "wp-row", style: { flexWrap: "wrap", gap: "var(--wp-space-1)" }, children: [
+            /* @__PURE__ */ jsxs("span", { className: "wp-caption", style: { flex: "none" }, children: [
+              "\uC120\uD0DD ",
+              draft.length,
+              "\uAC1C"
             ] }),
-            children: /* @__PURE__ */ jsxs("div", { className: "wp-col", style: { gap: "var(--wp-space-3)" }, children: [
-              /* @__PURE__ */ jsx(
-                Input,
+            draftChips.map((chip) => /* @__PURE__ */ jsx(Tag, { onRemove: () => toggle(chip.value, false), children: chip.label }, chip.value))
+          ] }),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "wp-col",
+              style: {
+                maxHeight: 320,
+                overflowY: "auto",
+                gap: "var(--wp-space-1)",
+                borderTop: "var(--wp-border-w) solid var(--wp-divider)",
+                paddingTop: "var(--wp-space-2)"
+              },
+              children: visibleOptions.length === 0 ? /* @__PURE__ */ jsx("div", { className: "wp-caption", style: { padding: "var(--wp-space-2) 0" }, children: "\uACB0\uACFC \uC5C6\uC74C" }) : visibleOptions.map((option) => /* @__PURE__ */ jsx(
+                Checkbox,
                 {
-                  icon: "search",
-                  placeholder: "\uC774\uB984\xB7\uC124\uBA85\uC73C\uB85C \uAC80\uC0C9",
-                  autoFocus: true,
-                  value: query,
-                  onChange: (event) => setQuery(event.target.value)
-                }
-              ),
-              /* @__PURE__ */ jsxs("div", { className: "wp-row", style: { flexWrap: "wrap", gap: "var(--wp-space-1)" }, children: [
-                /* @__PURE__ */ jsxs("span", { className: "wp-caption", style: { flex: "none" }, children: [
-                  "\uC120\uD0DD ",
-                  draft.length,
-                  "\uAC1C"
-                ] }),
-                draftChips.map((chip) => /* @__PURE__ */ jsx(Tag, { onRemove: () => toggle(chip.value, false), children: chip.label }, chip.value))
-              ] }),
-              /* @__PURE__ */ jsx(
-                "div",
-                {
-                  className: "wp-col",
-                  style: {
-                    maxHeight: 320,
-                    overflowY: "auto",
-                    gap: "var(--wp-space-1)",
-                    borderTop: "var(--wp-border-w) solid var(--wp-divider)",
-                    paddingTop: "var(--wp-space-2)"
-                  },
-                  children: visibleOptions.length === 0 ? /* @__PURE__ */ jsx("div", { className: "wp-caption", style: { padding: "var(--wp-space-2) 0" }, children: "\uACB0\uACFC \uC5C6\uC74C" }) : visibleOptions.map((option) => /* @__PURE__ */ jsx(
-                    Checkbox,
-                    {
-                      label: option.label,
-                      description: option.sub,
-                      checked: draft.includes(option.value),
-                      onChange: (event) => toggle(option.value, event.target.checked)
-                    },
-                    option.value
-                  ))
-                }
-              )
-            ] })
-          }
-        )
+                  label: option.label,
+                  description: option.sub,
+                  checked: draft.includes(option.value),
+                  onChange: (event) => toggle(option.value, event.target.checked)
+                },
+                option.value
+              ))
+            }
+          )
+        ] })
       }
-    ) : null
+    ) }) : null
   ] });
 }
 var SearchableMultiPicker = boxed(SearchableMultiPickerImpl, "SearchableMultiPicker");

package/dist/chunk-XQPTSEJC.js

@@ -0,0 +1,135 @@
+import React, { useRef, useEffect, useSyncExternalStore } from 'react';
+import { createPortal } from 'react-dom';
+import { jsx } from 'react/jsx-runtime';
+
+// src/overlay.tsx
+var OVERLAY_ROOT_ID = "wp-overlay-root";
+var DOCUMENT_POSITION_FOLLOWING = 4;
+function getOverlayRoot() {
+  if (typeof document === "undefined") return null;
+  const existing = document.getElementById(OVERLAY_ROOT_ID);
+  if (existing) return existing;
+  const created = document.createElement("div");
+  created.id = OVERLAY_ROOT_ID;
+  document.body.appendChild(created);
+  return created;
+}
+var layers = [];
+var nextId = 0;
+var subscribers = /* @__PURE__ */ new Set();
+var keyListenerBound = false;
+function emit() {
+  layers = layers.slice();
+  subscribers.forEach((fn) => fn());
+}
+function topLayer(list) {
+  let best;
+  let bestNode = null;
+  for (const layer of list) {
+    const node = layer.node();
+    if (!best) {
+      best = layer;
+      bestNode = node;
+      continue;
+    }
+    if (!node) continue;
+    if (!bestNode) {
+      best = layer;
+      bestNode = node;
+      continue;
+    }
+    if (bestNode.compareDocumentPosition(node) & DOCUMENT_POSITION_FOLLOWING) {
+      best = layer;
+      bestNode = node;
+    }
+  }
+  return best;
+}
+function layerHoldsTop(list, id) {
+  const top = topLayer(list);
+  if (!top) return false;
+  if (top.id === id) return true;
+  const mine = list.find((l) => l.id === id)?.node();
+  const topNode = top.node();
+  return !!mine && !!topNode && mine.contains(topNode);
+}
+function escapeTopmost() {
+  topLayer(layers)?.onEscape();
+}
+function handleKeyDown(event) {
+  if (event.key !== "Escape") return;
+  escapeTopmost();
+}
+function push(layer) {
+  layers.push(layer);
+  if (!keyListenerBound && typeof document !== "undefined") {
+    document.addEventListener("keydown", handleKeyDown);
+    keyListenerBound = true;
+  }
+  emit();
+}
+function remove(id) {
+  layers = layers.filter((l) => l.id !== id);
+  emit();
+}
+function subscribe(fn) {
+  subscribers.add(fn);
+  return () => {
+    subscribers.delete(fn);
+  };
+}
+var snapshot = () => layers;
+var serverSnapshot = () => [];
+function useOverlayLayer(active, onEscape, nodeRef) {
+  const idRef = useRef(0);
+  if (idRef.current === 0) idRef.current = ++nextId;
+  const escapeRef = useRef(onEscape);
+  escapeRef.current = onEscape;
+  const nodeRefRef = useRef(nodeRef);
+  nodeRefRef.current = nodeRef;
+  useEffect(() => {
+    if (!active) return;
+    const id2 = idRef.current;
+    push({
+      id: id2,
+      onEscape: () => escapeRef.current?.(),
+      node: () => nodeRefRef.current?.current ?? null
+    });
+    return () => remove(id2);
+  }, [active]);
+  const current = useSyncExternalStore(subscribe, snapshot, serverSnapshot);
+  const id = idRef.current;
+  return {
+    isTop: active && topLayer(current)?.id === id,
+    holdsTop: active && layerHoldsTop(current, id)
+  };
+}
+var OverlayContainerContext = React.createContext(null);
+function OverlayLayer({
+  onClose,
+  children
+}) {
+  const ref = useRef(null);
+  const container = React.useContext(OverlayContainerContext);
+  const { holdsTop } = useOverlayLayer(true, onClose, ref);
+  useEffect(() => {
+    ref.current?.toggleAttribute("inert", !holdsTop);
+  }, [holdsTop]);
+  const layer = /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: "wp-overlay-layer",
+      onClick: (event) => {
+        if (onClose && event.target instanceof HTMLElement && event.target.classList.contains("wp-overlay")) {
+          onClose();
+        }
+      },
+      children
+    }
+  );
+  const root = container ?? getOverlayRoot();
+  return root ? createPortal(layer, root) : layer;
+}
+
+export { OverlayContainerContext, OverlayLayer, getOverlayRoot, useOverlayLayer };

package/dist/{chunk-Q2EUB5UV.js → chunk-YJSOC5KM.js}

@@ -1,3 +1,4 @@
+import { useOverlayLayer } from './chunk-XQPTSEJC.js';
 import { Icon } from './chunk-WIDDHR7L.js';
 import { boxed } from './chunk-SAN4IX6N.js';
 import { createContext, useState, useRef, useMemo, useCallback, useEffect, useLayoutEffect, useContext } from 'react';
@@ -281,16 +282,12 @@ function useDismiss(open, hostRef, onDismiss) {
       if (event.target instanceof Node && hostRef.current?.contains(event.target)) return;
       onDismiss("outside");
     };
-    const handleKeyDown = (event) => {
-      if (event.key === "Escape") onDismiss("escape");
-    };
     document.addEventListener("pointerdown", handlePointerDown);
-    document.addEventListener("keydown", handleKeyDown);
     return () => {
       document.removeEventListener("pointerdown", handlePointerDown);
-      document.removeEventListener("keydown", handleKeyDown);
     };
   }, [open, hostRef, onDismiss]);
+  useOverlayLayer(open, () => onDismiss("escape"), hostRef);
 }
 function triggerClassName(size, invalid) {
   const classes = ["wp-input", "wp-dp-trigger"];

package/dist/index.d.ts

@@ -1361,6 +1361,9 @@ declare function Divider({ style, className }: SduiBoxProps): React__default.JSX
 
 /**
  * Dialog + 표준 닫기 UX(Escape·배경 클릭). 레지스트리의 "Dialog"는 이 래퍼다.
+ *
+ * 겹침 처리는 전부 OverlayLayer가 맡는다 — 단일 오버레이 루트로 포털해 조상
+ * CSS에 휘둘리지 않고, Escape는 맨 위 한 겹만 닫는다(overlay.tsx 주석 참고).
  */
 declare function SduiDialog(props: DialogProps): React.JSX.Element;
 
@@ -1746,6 +1749,38 @@ declare function useSduiRuntime(): SduiRuntime;
 
 declare function boxed<P extends object>(Inner: React__default.ComponentType<P>, displayName?: string): React__default.FC<P & SduiBoxProps>;
 
+/** 모달이 사는 단일 컨테이너. 없으면 만든다(비어 있으면 CSS가 display:none). */
+declare function getOverlayRoot(): HTMLElement | null;
+/**
+ * 이 겹이 스택에 있는 동안 Escape를 받을 자격을 관리한다.
+ * `active`가 참인 동안만 스택에 오르고, **맨 위일 때만** `onEscape`가 불린다.
+ *
+ * 포털을 쓰지 않는 팝오버(DatePicker)도 이 훅만 쓰면 순서가 맞는다.
+ * `nodeRef`를 주면 문서 순서 판정에 쓰고, 없으면 등록 순서로 떨어진다.
+ */
+declare function useOverlayLayer(active: boolean, onEscape?: () => void, nodeRef?: React__default.RefObject<HTMLElement | null>): {
+    isTop: boolean;
+    holdsTop: boolean;
+};
+/**
+ * 겹을 담을 곳을 바꾼다. 기본은 body 밑 단일 루트지만, **화면 일부에 페이지를
+ * 그려 보이는 곳**(편집기 미리보기·뷰어)은 자기 상자를 지정해야 한다 — 안 그러면
+ * 미리본 다이얼로그의 오버레이가 편집기 전체를 덮는다(0.17.1에서 겪은 그 문제).
+ * 그 상자에 `contain: paint`가 걸려 있으면 오버레이는 상자 안에 갇힌다.
+ */
+declare const OverlayContainerContext: React__default.Context<HTMLElement | null>;
+/**
+ * 모달 한 겹. 자식(보통 `<Dialog>`)을 단일 오버레이 루트로 포털한다.
+ *
+ * - 배경(.wp-overlay) 클릭 시 닫기 — 내용 클릭은 무시한다
+ * - Escape는 맨 위 겹에서만 먹는다
+ * - 아래 겹은 `inert`로 잠근다 — 탭·클릭이 가려진 창으로 새지 않게
+ */
+declare function OverlayLayer({ onClose, children, }: {
+    onClose?: () => void;
+    children: React__default.ReactNode;
+}): React__default.ReactElement | null;
+
 interface Props {
     name: string;
     children: React__default.ReactNode;
@@ -1795,4 +1830,4 @@ interface ImageViewerProps {
  */
 declare function ImageViewer({ src, alt, open, onClose }: ImageViewerProps): React__default.ReactPortal | null;
 
-export { Actions, type ActionsProps, Alert, type AlertProps, Avatar, type AvatarProps, Badge, type BadgeProps, type BadgeTone, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, Button, type ButtonProps, Can, type CanProps, Card, type CardProps, type CascadingSearchOption, Checkbox, type CheckboxProps, Col, type ColProps, type CustomActionHandler, type CustomValidator, DatePickerProps, DateRangePickerProps, Dialog, type DialogProps, Divider, EmptyState, type EmptyStateProps, Field, type FieldProps, Grid, type GridCardConfig, type GridCardRow, type GridProps, Icon, IconButton, type IconButtonProps, type IconProps, ImageViewer, type ImageViewerProps, Input, type InputProps, type Justify, type KeyValueItem, KeyValueList, type KeyValueListProps, type MeterTone, NodeErrorBoundary, PageHead, type PageHeadProps, Pagination, type PaginationProps, ProgressBar, type ProgressBarProps, Radio, type RadioProps, RemoteSearchResults, type RemoteSearchResultsProps, ResultTable, type ResultTableColumn, type ResultTableProps, Row, type RowProps, SduiAction, type SduiAdapter, type SduiAssetContext, type SduiAssetResolver, type SduiBadgeCell, SduiBoxProps, type SduiCanFn, type SduiCanQuery, type SduiCanSetting, type SduiCell, SduiColumnsScale, SduiContainerLayoutProps, type SduiDateCell, SduiDialog, type SduiDispatch, SduiForm, type SduiFormConfig, type SduiFormProps, SduiGapScale, type SduiGridCard, type SduiGridCardAction, type SduiGridCardRow, type SduiIconCell, type SduiImageCell, type SduiLinkCell, type SduiNumberCell, SduiPage, SduiPermissionProvider, type SduiProgressCell, SduiPropValue, type SduiRegistry, SduiRenderer, type SduiRendererProps, type SduiRowCondition, SduiRule, type SduiRuntime, type SduiSearchAction, type SduiSearchColumn, SduiSearchDataProvider, SduiSearchResults, type SduiSearchResultsProps, type SduiTagCell, SduiTextAlignScale, type SduiTextCell, type SduiUseSpec, SduiWeightScale, type SearchAction, type SearchColumn, type SearchFetcher, type SearchField, type SearchFilter, type SearchOption, type SearchPage, SearchResults, type SearchResultsProps, type SearchRow, SearchToolbar, type SearchValues, type SearchViewItem, Section, type SectionProps, SegmentedControl, type SegmentedControlProps, type SegmentedItem, Select, type SelectOption, type SelectOptionRecord, type SelectProps, Show, type ShowProps, SidebarNav, type SidebarNavItem, type SidebarNavProps, type SidebarNavSection, type SortDir, SortHandle, type SortHandleProps, SortableList, type SortableListProps, Spacer, type SpacerProps, type SpecIssue, Spinner, type SpinnerProps, StatCard, type StatCardProps, Switch, type SwitchProps, type TabItem, Table, type TableColumn, type TableProps, Tabs, type TabsProps, Tag, type TagProps, Text, type TextPreset, type TextProps, Textarea, type TextareaProps, Toast, type ToastProps, Tooltip, type TooltipProps, boxed, cascadingValuePaths, cellRenderer, cleanSearchValues, createRegistry, defaultAdapter, defaultRegistry, imageRenderer, includesLooseSearch, joinMultiValue, normalizePageSizes, normalizeSearchText, searchFieldKeys, searchValuesFromParams, sortableDropIndex, sortableMove, splitMultiValue, useRemoteSearchPage, useSduiAssetResolver, useSduiCan, useSduiDispatch, useSduiRuntime, useSduiSandbox, useSearchFetcher, validateSpec };
+export { Actions, type ActionsProps, Alert, type AlertProps, Avatar, type AvatarProps, Badge, type BadgeProps, type BadgeTone, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, Button, type ButtonProps, Can, type CanProps, Card, type CardProps, type CascadingSearchOption, Checkbox, type CheckboxProps, Col, type ColProps, type CustomActionHandler, type CustomValidator, DatePickerProps, DateRangePickerProps, Dialog, type DialogProps, Divider, EmptyState, type EmptyStateProps, Field, type FieldProps, Grid, type GridCardConfig, type GridCardRow, type GridProps, Icon, IconButton, type IconButtonProps, type IconProps, ImageViewer, type ImageViewerProps, Input, type InputProps, type Justify, type KeyValueItem, KeyValueList, type KeyValueListProps, type MeterTone, NodeErrorBoundary, OverlayContainerContext, OverlayLayer, PageHead, type PageHeadProps, Pagination, type PaginationProps, ProgressBar, type ProgressBarProps, Radio, type RadioProps, RemoteSearchResults, type RemoteSearchResultsProps, ResultTable, type ResultTableColumn, type ResultTableProps, Row, type RowProps, SduiAction, type SduiAdapter, type SduiAssetContext, type SduiAssetResolver, type SduiBadgeCell, SduiBoxProps, type SduiCanFn, type SduiCanQuery, type SduiCanSetting, type SduiCell, SduiColumnsScale, SduiContainerLayoutProps, type SduiDateCell, SduiDialog, type SduiDispatch, SduiForm, type SduiFormConfig, type SduiFormProps, SduiGapScale, type SduiGridCard, type SduiGridCardAction, type SduiGridCardRow, type SduiIconCell, type SduiImageCell, type SduiLinkCell, type SduiNumberCell, SduiPage, SduiPermissionProvider, type SduiProgressCell, SduiPropValue, type SduiRegistry, SduiRenderer, type SduiRendererProps, type SduiRowCondition, SduiRule, type SduiRuntime, type SduiSearchAction, type SduiSearchColumn, SduiSearchDataProvider, SduiSearchResults, type SduiSearchResultsProps, type SduiTagCell, SduiTextAlignScale, type SduiTextCell, type SduiUseSpec, SduiWeightScale, type SearchAction, type SearchColumn, type SearchFetcher, type SearchField, type SearchFilter, type SearchOption, type SearchPage, SearchResults, type SearchResultsProps, type SearchRow, SearchToolbar, type SearchValues, type SearchViewItem, Section, type SectionProps, SegmentedControl, type SegmentedControlProps, type SegmentedItem, Select, type SelectOption, type SelectOptionRecord, type SelectProps, Show, type ShowProps, SidebarNav, type SidebarNavItem, type SidebarNavProps, type SidebarNavSection, type SortDir, SortHandle, type SortHandleProps, SortableList, type SortableListProps, Spacer, type SpacerProps, type SpecIssue, Spinner, type SpinnerProps, StatCard, type StatCardProps, Switch, type SwitchProps, type TabItem, Table, type TableColumn, type TableProps, Tabs, type TabsProps, Tag, type TagProps, Text, type TextPreset, type TextProps, Textarea, type TextareaProps, Toast, type ToastProps, Tooltip, type TooltipProps, boxed, cascadingValuePaths, cellRenderer, cleanSearchValues, createRegistry, defaultAdapter, defaultRegistry, getOverlayRoot, imageRenderer, includesLooseSearch, joinMultiValue, normalizePageSizes, normalizeSearchText, searchFieldKeys, searchValuesFromParams, sortableDropIndex, sortableMove, splitMultiValue, useOverlayLayer, useRemoteSearchPage, useSduiAssetResolver, useSduiCan, useSduiDispatch, useSduiRuntime, useSduiSandbox, useSearchFetcher, validateSpec };

package/dist/index.js

@@ -1,7 +1,9 @@
-import { DEV, HoistedStyle, isSafeNavigationTarget, useSduiAdapter, hostFetchOf, DateRangePicker, DatePicker, useSduiSandbox, resolveAdapter, assetResolverOf, SduiAdapterContext } from './chunk-Q2EUB5UV.js';
-export { DatePicker, DateRangePicker, defaultAdapter, useSduiAssetResolver, useSduiSandbox } from './chunk-Q2EUB5UV.js';
+import { DEV, HoistedStyle, isSafeNavigationTarget, useSduiAdapter, hostFetchOf, DateRangePicker, DatePicker, useSduiSandbox, resolveAdapter, assetResolverOf, SduiAdapterContext } from './chunk-YJSOC5KM.js';
+export { DatePicker, DateRangePicker, defaultAdapter, useSduiAssetResolver, useSduiSandbox } from './chunk-YJSOC5KM.js';
 import { ImageViewer } from './chunk-THEP3VWY.js';
 export { ImageViewer } from './chunk-THEP3VWY.js';
+import { OverlayLayer } from './chunk-XQPTSEJC.js';
+export { OverlayContainerContext, OverlayLayer, getOverlayRoot, useOverlayLayer } from './chunk-XQPTSEJC.js';
 import { normalizeSearchFields, searchValuesFromParams, splitMultiValue, includesLooseSearch, cascadingValuePaths, SearchToolbar, searchFieldKeys, Popover } from './chunk-GZB6YLUI.js';
 export { SearchToolbar, cascadingValuePaths, cleanSearchValues, includesLooseSearch, joinMultiValue, normalizeSearchText, searchFieldKeys, searchValuesFromParams, splitMultiValue } from './chunk-GZB6YLUI.js';
 import { EmptyState, Button, Checkbox, SegmentedControl, Spinner, Select, Pagination, Icon, Card, Badge, ProgressBar, Tag, Toast, Textarea, Tabs, Table, Switch, StatCard, Input, IconButton, Field, Alert, warnOnce, Dialog } from './chunk-WIDDHR7L.js';
@@ -1356,27 +1358,7 @@ function RemoteSearchResultsImpl({
 var SduiSearchResults = boxed(SduiSearchResultsImpl, "SduiSearchResults");
 var RemoteSearchResults = boxed(RemoteSearchResultsImpl, "RemoteSearchResults");
 function SduiDialog(props) {
-  const { onClose } = props;
-  useEffect(() => {
-    if (!onClose) return;
-    const onKeyDown = (event) => {
-      if (event.key === "Escape") onClose();
-    };
-    document.addEventListener("keydown", onKeyDown);
-    return () => document.removeEventListener("keydown", onKeyDown);
-  }, [onClose]);
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      style: { position: "fixed", inset: 0, zIndex: "var(--wp-z-dialog)" },
-      onClick: (event) => {
-        if (onClose && event.target instanceof HTMLElement && event.target.classList.contains("wp-overlay")) {
-          onClose();
-        }
-      },
-      children: /* @__PURE__ */ jsx(Dialog, { ...props })
-    }
-  );
+  return /* @__PURE__ */ jsx(OverlayLayer, { onClose: props.onClose, children: /* @__PURE__ */ jsx(Dialog, { ...props }) });
 }
 var SduiRuntimeContext = createContext(null);
 function useSduiRuntime() {

package/dist/rich.js

@@ -1,5 +1,6 @@
-import { useSduiAssetResolver, HoistedStyle } from './chunk-Q2EUB5UV.js';
-export { DatePicker, DateRangePicker } from './chunk-Q2EUB5UV.js';
+import { useSduiAssetResolver, HoistedStyle } from './chunk-YJSOC5KM.js';
+export { DatePicker, DateRangePicker } from './chunk-YJSOC5KM.js';
+import './chunk-XQPTSEJC.js';
 import { Spinner, EmptyState } from './chunk-WIDDHR7L.js';
 import './chunk-SAN4IX6N.js';
 import { useRef, useCallback, useMemo, useState, useEffect, useLayoutEffect } from 'react';

package/dist/styles.css

@@ -794,6 +794,16 @@
 .wp-pager__gap { color: var(--wp-text-subtle); padding: 0 4px; }
 
 /* ---------- 다이얼로그 ---------- */
+/* 겹쳐 뜨는 것들이 모이는 단일 컨테이너(overlay.tsx가 body에 만든다).
+   비어 있으면 아예 없는 것처럼 굴어야 페이지가 평소대로 보인다 — :empty로 끄고,
+   떠 있을 때도 pointer-events는 겹(.wp-overlay-layer)에서만 살린다.
+   z-index는 여기 한 번만 건다. 겹끼리는 문서 순서대로 쌓인다(나중 것이 위). */
+#wp-overlay-root {
+  position: fixed; inset: 0; z-index: var(--wp-z-dialog); pointer-events: none;
+}
+#wp-overlay-root:empty { display: none; }
+.wp-overlay-layer { position: fixed; inset: 0; pointer-events: auto; }
+
 .wp-overlay {
   position: absolute; inset: 0; background: var(--wp-surface-overlay);
   display: flex; align-items: flex-start; justify-content: center;

package/dist/widgets/SearchableMultiPicker.js

@@ -1,4 +1,5 @@
-export { SearchableMultiPicker } from '../chunk-J6OHRAPS.js';
+export { SearchableMultiPicker } from '../chunk-WXBOQRD6.js';
+import '../chunk-XQPTSEJC.js';
 import '../chunk-GZB6YLUI.js';
 import '../chunk-WIDDHR7L.js';
 import '../chunk-SAN4IX6N.js';

package/dist/widgets/TreePicker.js

@@ -1,5 +1,6 @@
-export { TreePicker } from '../chunk-WVBU3SZM.js';
+export { TreePicker } from '../chunk-J532YYGP.js';
 import '../chunk-PYSTET2C.js';
+import '../chunk-XQPTSEJC.js';
 import '../chunk-GZB6YLUI.js';
 import '../chunk-WIDDHR7L.js';
 import '../chunk-SAN4IX6N.js';

package/dist/widgets/index.js

@@ -1,5 +1,5 @@
-import { SearchableMultiPicker } from '../chunk-J6OHRAPS.js';
-export { SearchableMultiPicker } from '../chunk-J6OHRAPS.js';
+import { SearchableMultiPicker } from '../chunk-WXBOQRD6.js';
+export { SearchableMultiPicker } from '../chunk-WXBOQRD6.js';
 import { SecureScreen } from '../chunk-IIRENCDS.js';
 export { SecureScreen } from '../chunk-IIRENCDS.js';
 import { StackedMeter } from '../chunk-BMZKZGJF.js';
@@ -12,8 +12,8 @@ import { TagMultiSelect } from '../chunk-QDEZXA34.js';
 export { TagMultiSelect } from '../chunk-QDEZXA34.js';
 import { Timeline } from '../chunk-EFYEOT47.js';
 export { Timeline } from '../chunk-EFYEOT47.js';
-import { TreePicker } from '../chunk-WVBU3SZM.js';
-export { TreePicker } from '../chunk-WVBU3SZM.js';
+import { TreePicker } from '../chunk-J532YYGP.js';
+export { TreePicker } from '../chunk-J532YYGP.js';
 import { TreeView } from '../chunk-PYSTET2C.js';
 export { TreeView, buildTreeNodes } from '../chunk-PYSTET2C.js';
 import { EventCalendar } from '../chunk-C3JY6GA3.js';
@@ -33,6 +33,7 @@ export { PeriodFilter } from '../chunk-M3TDEPD2.js';
 import { PrintSheet } from '../chunk-MYJ2KEIP.js';
 export { PrintSheet } from '../chunk-MYJ2KEIP.js';
 import '../chunk-THEP3VWY.js';
+import '../chunk-XQPTSEJC.js';
 export { AutocompleteField, toAutocompleteOptions } from '../chunk-3MS4UWWZ.js';
 import '../chunk-GZB6YLUI.js';
 import { ColumnBoard } from '../chunk-C4JRSZGS.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wipco/sdui",
-  "version": "0.17.1",
+  "version": "0.18.1",
   "description": "WIPCO 서버 주도 UI(SDUI) 렌더러 — JSON 페이지 스펙을 React 컴포넌트로 렌더링",
   "keywords": [
     "sdui",