sellmate-design-system-react 9.0.0-beta.66 → 9.0.0-beta.67

package/dist/index.cjs

@@ -5,7 +5,7 @@ var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
 var react = require('react');
 var jsxRuntime = require('react/jsx-runtime');
-var RPopover12 = require('@radix-ui/react-popover');
+var RPopover13 = require('@radix-ui/react-popover');
 var reactDom = require('react-dom');
 var RCheckbox = require('@radix-ui/react-checkbox');
 var client = require('react-dom/client');
@@ -33,7 +33,7 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var RPopover12__namespace = /*#__PURE__*/_interopNamespace(RPopover12);
+var RPopover13__namespace = /*#__PURE__*/_interopNamespace(RPopover13);
 var RCheckbox__namespace = /*#__PURE__*/_interopNamespace(RCheckbox);
 var RTooltip__namespace = /*#__PURE__*/_interopNamespace(RTooltip);
 var RDropdown5__namespace = /*#__PURE__*/_interopNamespace(RDropdown5);
@@ -3735,6 +3735,57 @@ var SIcon = /* @__PURE__ */ react.forwardRef(function SIcon2({ name, size = 24,
     }
   );
 });
+
+// src/lib/display-name.ts
+function withDisplayName(component, name) {
+  component.displayName = name;
+  return component;
+}
+
+// src/lib/floating-anim.ts
+var FLOATING_SLIDE_ANIM = [
+  "data-[state=open]:data-[side=top]:animate-floating-in-top",
+  "data-[state=delayed-open]:data-[side=top]:animate-floating-in-top",
+  "data-[state=instant-open]:data-[side=top]:animate-floating-in-top",
+  "data-[state=closed]:data-[side=top]:animate-floating-out-top",
+  "data-[state=open]:data-[side=bottom]:animate-floating-in-bottom",
+  "data-[state=delayed-open]:data-[side=bottom]:animate-floating-in-bottom",
+  "data-[state=instant-open]:data-[side=bottom]:animate-floating-in-bottom",
+  "data-[state=closed]:data-[side=bottom]:animate-floating-out-bottom",
+  "data-[state=open]:data-[side=left]:animate-floating-in-left",
+  "data-[state=delayed-open]:data-[side=left]:animate-floating-in-left",
+  "data-[state=instant-open]:data-[side=left]:animate-floating-in-left",
+  "data-[state=closed]:data-[side=left]:animate-floating-out-left",
+  "data-[state=open]:data-[side=right]:animate-floating-in-right",
+  "data-[state=delayed-open]:data-[side=right]:animate-floating-in-right",
+  "data-[state=instant-open]:data-[side=right]:animate-floating-in-right",
+  "data-[state=closed]:data-[side=right]:animate-floating-out-right"
+].join(" ");
+
+// src/lib/hover-preview.ts
+function hoverPreviewOrigin({
+  anchor,
+  size,
+  viewportWidth,
+  viewportHeight,
+  padding = 8
+}) {
+  const startX = anchor.left + anchor.width / 2;
+  const startY = anchor.top + anchor.height / 2;
+  const x = Math.max(padding, Math.min(startX, viewportWidth - size - padding));
+  const y = Math.max(padding, Math.min(startY, viewportHeight - size - padding));
+  return { x, y };
+}
+var PortalContainerContext = /* @__PURE__ */ react.createContext(null);
+var InsideModalContext = /* @__PURE__ */ react.createContext(false);
+var PortalContainerProvider = PortalContainerContext.Provider;
+var InsideModalProvider = InsideModalContext.Provider;
+function usePortalContainer() {
+  return react.useContext(PortalContainerContext) ?? void 0;
+}
+function useInsideModal() {
+  return react.useContext(InsideModalContext);
+}
 var VIEWBOX = 80;
 var RADIUS = 34;
 var STROKE = 12;
@@ -3852,7 +3903,10 @@ var SCircleProgress = /* @__PURE__ */ react.forwardRef(
 var IMAGE_FITS = ["cover", "contain", "fill", "none", "scale-down"];
 var EMPTY_ICON_SIZE = "60cqh";
 var SPINNER_SIZE = "45cqh";
-var SImage = /* @__PURE__ */ react.forwardRef(function SImage2({
+var PREVIEW_HIDE_DELAY_MS = 100;
+var PREVIEW_MAX_SIZE = 200;
+var PREVIEW_VIEWPORT_PADDING = 8;
+var SImageImpl = /* @__PURE__ */ react.forwardRef(function SImageImpl2({
   src,
   alt = "",
   ratio = 1,
@@ -3864,6 +3918,9 @@ var SImage = /* @__PURE__ */ react.forwardRef(function SImage2({
   loadingSlot,
   errorSlot,
   imgProps,
+  previewOnHover = false,
+  previewSrc,
+  previewSize = PREVIEW_MAX_SIZE,
   onLoad,
   onError,
   className,
@@ -3894,16 +3951,94 @@ var SImage = /* @__PURE__ */ react.forwardRef(function SImage2({
     const timer = setTimeout(() => setSpinnerVisible(true), loadingShowDelay);
     return () => clearTimeout(timer);
   }, [status, loadingShowDelay, src]);
+  const portalContainer = usePortalContainer();
+  const [previewOpen, setPreviewOpen] = react.useState(false);
+  const previewHideTimer = react.useRef(void 0);
+  const boxRef = react.useRef(null);
+  const previewSource = previewSrc ?? src;
+  const previewEnabled = previewOnHover && !!previewSource;
+  const previewBoxSize = Math.min(previewSize, PREVIEW_MAX_SIZE);
+  const previewBoxSizeRef = react.useRef(previewBoxSize);
+  previewBoxSizeRef.current = previewBoxSize;
+  const previewAnchorRef = react.useRef(null);
+  if (previewAnchorRef.current == null) {
+    previewAnchorRef.current = {
+      getBoundingClientRect: () => {
+        const anchor = boxRef.current?.getBoundingClientRect();
+        if (!anchor) return new DOMRect(0, 0, 0, 0);
+        const { x, y } = hoverPreviewOrigin({
+          anchor,
+          size: previewBoxSizeRef.current,
+          viewportWidth: window.innerWidth,
+          viewportHeight: window.innerHeight,
+          padding: PREVIEW_VIEWPORT_PADDING
+        });
+        return new DOMRect(x, y, 0, 0);
+      },
+      // autoUpdate 가 스크롤 조상을 찾는 기준 — 없으면 표 안에서 스크롤할 때 위치가 굳는다
+      get contextElement() {
+        return boxRef.current ?? void 0;
+      }
+    };
+  }
+  const cancelPreviewHide = react.useCallback(() => {
+    if (previewHideTimer.current) {
+      clearTimeout(previewHideTimer.current);
+      previewHideTimer.current = void 0;
+    }
+  }, []);
+  const openPreview = () => {
+    cancelPreviewHide();
+    setPreviewOpen(true);
+  };
+  const startPreviewHide = () => {
+    cancelPreviewHide();
+    previewHideTimer.current = setTimeout(() => setPreviewOpen(false), PREVIEW_HIDE_DELAY_MS);
+  };
+  react.useEffect(() => {
+    if (!previewEnabled) {
+      cancelPreviewHide();
+      setPreviewOpen(false);
+    }
+  }, [previewEnabled, cancelPreviewHide]);
+  react.useEffect(() => cancelPreviewHide, [cancelPreviewHide]);
+  const previewContentRef = react.useCallback((node) => {
+    node?.parentElement?.style.setProperty("pointer-events", "none");
+  }, []);
+  const previewHandlers = previewEnabled ? {
+    onMouseEnter: (event) => {
+      rest.onMouseEnter?.(event);
+      openPreview();
+    },
+    onMouseLeave: (event) => {
+      rest.onMouseLeave?.(event);
+      startPreviewHide();
+    },
+    // 소비자가 tabIndex 를 준 썸네일에서는 키보드로도 열린다
+    onFocus: (event) => {
+      rest.onFocus?.(event);
+      openPreview();
+    },
+    onBlur: (event) => {
+      rest.onBlur?.(event);
+      startPreviewHide();
+    }
+  } : void 0;
   const isEmpty = !src;
   const showFallback = isEmpty || status === "error";
   const spinnerShown = !isEmpty && status === "loading" && showSpinner && spinnerVisible;
-  return /* @__PURE__ */ jsxRuntime.jsxs(
+  const box3 = /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      ref,
+      ref: (node) => {
+        boxRef.current = node;
+        if (typeof ref === "function") ref(node);
+        else if (ref) ref.current = node;
+      },
       className: cn("relative overflow-hidden bg-(--cmp-image-bg)", className),
       style: { containerType: "size", aspectRatio: ratio, ...style },
       ...rest,
+      ...previewHandlers,
       children: [
         !isEmpty && /* @__PURE__ */ jsxRuntime.jsx(
           "img",
@@ -3939,7 +4074,47 @@ var SImage = /* @__PURE__ */ react.forwardRef(function SImage2({
       ]
     }
   );
+  if (!previewEnabled) return box3;
+  return /* @__PURE__ */ jsxRuntime.jsxs(RPopover13__namespace.Root, { open: previewOpen, onOpenChange: setPreviewOpen, children: [
+    box3,
+    /* @__PURE__ */ jsxRuntime.jsx(RPopover13__namespace.Anchor, { virtualRef: previewAnchorRef }),
+    /* @__PURE__ */ jsxRuntime.jsx(RPopover13__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
+      RPopover13__namespace.Content,
+      {
+        ref: previewContentRef,
+        side: "bottom",
+        align: "start",
+        sideOffset: 0,
+        alignOffset: 0,
+        avoidCollisions: false,
+        role: "presentation",
+        "aria-hidden": true,
+        className: cn(
+          "z-50 overflow-hidden rounded-[6px] shadow-normal-sm",
+          // 읽기 전용이라 호버 브릿지를 두지 않는다. 그 대신 마우스를 통과시켜,
+          // 목록 위로 뜬 미리보기가 아래 행의 클릭을 가로채지 않게 한다.
+          // (래퍼 쪽은 previewContentRef 가 함께 끈다 — 둘 다 꺼야 깜빡이지 않는다)
+          "pointer-events-none",
+          FLOATING_SLIDE_ANIM
+        ),
+        onOpenAutoFocus: (event) => event.preventDefault(),
+        onCloseAutoFocus: (event) => event.preventDefault(),
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          SImage,
+          {
+            src: previewSource,
+            alt: "",
+            ratio: 1,
+            fit: "contain",
+            loading: "eager",
+            style: { width: previewBoxSize }
+          }
+        )
+      }
+    ) })
+  ] });
 });
+var SImage = /* @__PURE__ */ withDisplayName(SImageImpl, "SImage");
 var BADGE_COLORS = [
   "red",
   "orange",
@@ -4208,42 +4383,6 @@ var SCard = /* @__PURE__ */ react.forwardRef(function SCard2({ bordered = false,
   );
 });
 
-// src/lib/display-name.ts
-function withDisplayName(component, name) {
-  component.displayName = name;
-  return component;
-}
-
-// src/lib/floating-anim.ts
-var FLOATING_SLIDE_ANIM = [
-  "data-[state=open]:data-[side=top]:animate-floating-in-top",
-  "data-[state=delayed-open]:data-[side=top]:animate-floating-in-top",
-  "data-[state=instant-open]:data-[side=top]:animate-floating-in-top",
-  "data-[state=closed]:data-[side=top]:animate-floating-out-top",
-  "data-[state=open]:data-[side=bottom]:animate-floating-in-bottom",
-  "data-[state=delayed-open]:data-[side=bottom]:animate-floating-in-bottom",
-  "data-[state=instant-open]:data-[side=bottom]:animate-floating-in-bottom",
-  "data-[state=closed]:data-[side=bottom]:animate-floating-out-bottom",
-  "data-[state=open]:data-[side=left]:animate-floating-in-left",
-  "data-[state=delayed-open]:data-[side=left]:animate-floating-in-left",
-  "data-[state=instant-open]:data-[side=left]:animate-floating-in-left",
-  "data-[state=closed]:data-[side=left]:animate-floating-out-left",
-  "data-[state=open]:data-[side=right]:animate-floating-in-right",
-  "data-[state=delayed-open]:data-[side=right]:animate-floating-in-right",
-  "data-[state=instant-open]:data-[side=right]:animate-floating-in-right",
-  "data-[state=closed]:data-[side=right]:animate-floating-out-right"
-].join(" ");
-var PortalContainerContext = /* @__PURE__ */ react.createContext(null);
-var InsideModalContext = /* @__PURE__ */ react.createContext(false);
-var PortalContainerProvider = PortalContainerContext.Provider;
-var InsideModalProvider = InsideModalContext.Provider;
-function usePortalContainer() {
-  return react.useContext(PortalContainerContext) ?? void 0;
-}
-function useInsideModal() {
-  return react.useContext(InsideModalContext);
-}
-
 // src/components/STag/tag.config.ts
 var TAG_SHAPES = ["square", "pill"];
 var TAG_SIZES = ["xs", "sm", "md"];
@@ -4431,8 +4570,8 @@ var SGhostButton = /* @__PURE__ */ react.forwardRef(function SGhostButton2({
     }
   );
   if (!hasTooltip) return btn2;
-  return /* @__PURE__ */ jsxRuntime.jsxs(RPopover12__namespace.Root, { open, onOpenChange: setOpen, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(RPopover12__namespace.Anchor, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsxs(RPopover13__namespace.Root, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(RPopover13__namespace.Anchor, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
       "span",
       {
         className: cn("inline-flex", anchorClassName),
@@ -4444,8 +4583,8 @@ var SGhostButton = /* @__PURE__ */ react.forwardRef(function SGhostButton2({
         children: btn2
       }
     ) }),
-    /* @__PURE__ */ jsxRuntime.jsx(RPopover12__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
-      RPopover12__namespace.Content,
+    /* @__PURE__ */ jsxRuntime.jsx(RPopover13__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
+      RPopover13__namespace.Content,
       {
         side: "top",
         sideOffset: 4,
@@ -4634,14 +4773,14 @@ var STooltipImpl = /* @__PURE__ */ react.forwardRef(function STooltip({
     ...style,
     ...contentPropsStyle
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs(RPopover12__namespace.Root, { open, onOpenChange: setOpenState, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(RPopover13__namespace.Root, { open, onOpenChange: setOpenState, children: [
     isNone ? (
       // 트리거 없음: children 을 래퍼 없이 그대로 앵커로 쓴다 (소비자 레이아웃 보존).
       // mouse/focus 핸들러가 없으므로 showClose 없이도 자동 닫힘이 발생하지 않는다.
-      /* @__PURE__ */ jsxRuntime.jsx(RPopover12__namespace.Anchor, { asChild: true, children: triggerNode })
+      /* @__PURE__ */ jsxRuntime.jsx(RPopover13__namespace.Anchor, { asChild: true, children: triggerNode })
     ) : isHover ? (
       // hover: Anchor(위치 기준) + 직접 mouse 핸들러 — 클릭으로 토글되지 않도록 Trigger 미사용
-      /* @__PURE__ */ jsxRuntime.jsx(RPopover12__namespace.Anchor, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+      /* @__PURE__ */ jsxRuntime.jsx(RPopover13__namespace.Anchor, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
         "span",
         {
           className: "inline-flex",
@@ -4652,9 +4791,9 @@ var STooltipImpl = /* @__PURE__ */ react.forwardRef(function STooltip({
           children: triggerNode
         }
       ) })
-    ) : /* @__PURE__ */ jsxRuntime.jsx(RPopover12__namespace.Trigger, { asChild: true, children: triggerNode }),
-    /* @__PURE__ */ jsxRuntime.jsx(RPopover12__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsxs(
-      RPopover12__namespace.Content,
+    ) : /* @__PURE__ */ jsxRuntime.jsx(RPopover13__namespace.Trigger, { asChild: true, children: triggerNode }),
+    /* @__PURE__ */ jsxRuntime.jsx(RPopover13__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsxs(
+      RPopover13__namespace.Content,
       {
         side: placement,
         sideOffset,
@@ -4688,7 +4827,7 @@ var STooltipImpl = /* @__PURE__ */ react.forwardRef(function STooltip({
               }
             )
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsx(RPopover12__namespace.Arrow, { width: 16, height: 12, style: { fill: bg } })
+          /* @__PURE__ */ jsxRuntime.jsx(RPopover13__namespace.Arrow, { width: 16, height: 12, style: { fill: bg } })
         ]
       }
     ) })
@@ -8337,12 +8476,18 @@ var release = (id) => {
   entries = next;
   sync();
 };
+var updateEntry = (id, message) => {
+  const index = entries.findIndex((e) => e.id === id);
+  if (index === -1) return;
+  entries = entries.map((e, i) => i === index ? { ...e, message } : e);
+  sync();
+};
 var subscribe = (cb) => {
   listeners.add(cb);
   return () => listeners.delete(cb);
 };
 var getSnapshot = () => state;
-function SLoadingViewport() {
+function LoadingViewport() {
   const s = react.useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
   return /* @__PURE__ */ jsxRuntime.jsx(SLoadingContainer, { open: s.open, message: s.message });
 }
@@ -8353,39 +8498,56 @@ function ensureMounted() {
   const host = document.createElement("div");
   host.setAttribute("data-sd-loading-root", "");
   document.body.appendChild(host);
-  client.createRoot(host).render(/* @__PURE__ */ jsxRuntime.jsx(SLoadingViewport, {}));
+  client.createRoot(host).render(/* @__PURE__ */ jsxRuntime.jsx(LoadingViewport, {}));
+}
+function showEntry(options = {}) {
+  ensureMounted();
+  const id = ++seq;
+  entries = [...entries, { id, message: options.message }];
+  sync();
+  let released = false;
+  const handle = (() => {
+    if (released) return;
+    released = true;
+    release(id);
+  });
+  handle.update = (next) => {
+    if (released) return;
+    updateEntry(id, next.message);
+  };
+  return handle;
 }
 var loading = {
   /**
    * 로딩 오버레이 표시. 겹쳐 부르면 그만큼 쌓이고 **마지막 하나가 걷힐 때** 닫힌다.
-   * 반환값은 이 호출 하나만 걷는 함수다(두 번 불러도 한 번만 걷힌다) — `hide()` 대신 이것을
-   * 쓰면 짝이 어긋나지 않는다.
+   * 반환값은 이 호출 하나를 걷고 갱신하는 핸들이다(두 번 걷어도 한 번만 걷힌다).
+   *
+   * **걷는 것은 `finally` 에 둔다.** 빠뜨리면 그 즉시 화면이 갇히고, 정상 경로에서는 아무
+   * 표시가 없다.
    *
-   * ⚠️ 메시지만 바꾸려면 `update()` 를 쓴다. `show()` 를 다시 부르면 하나 더 쌓여
-   * `hide()` 한 번으로는 닫히지 않는다.
+   * ```ts
+   * const done = loading.show({ message: '1/2 ...' });
+   * try {
+   *   done.update({ message: '2/2 ...' });   // 이 호출의 메시지만 바뀐다
+   *   await api.submit(payload);
+   * } finally {
+   *   done();                                // 이 호출만 걷는다
+   * }
+   * ```
+   *
+   * ⚠️ **메시지를 바꾸려고 `show()` 를 다시 부르지 않는다.** 하나 더 쌓여 한 번 걷는 것으로는
+   * 닫히지 않는다. 핸들의 `update()` 를 쓴다. (참조 카운트 이전에는 `show()` 를 다시 부르는
+   * 것이 갱신이었다 — Quasar 도 같은 그룹에 다시 show 하면 갱신이다. 그 시절 관행대로 쓰인
+   * 코드는 지금 오버레이를 하나 남긴다.)
    */
   show(options = {}) {
-    ensureMounted();
-    const id = ++seq;
-    entries = [...entries, { id, message: options.message }];
-    sync();
-    return () => release(id);
-  },
-  /** 표시 중인 메시지 갱신 — 쌓인 수는 그대로다 */
-  update(options) {
-    const top = entries[entries.length - 1];
-    if (!top) return;
-    entries = [...entries.slice(0, -1), { ...top, message: options.message }];
-    sync();
-  },
-  /** 가장 나중의 show 하나를 걷는다. 남은 것이 없을 때만 오버레이가 닫힌다 */
-  hide() {
-    const top = entries[entries.length - 1];
-    if (top) release(top.id);
+    return showEntry(options);
   },
   /**
-   * 쌓인 것을 모두 걷고 즉시 닫는다. 화면 전환·에러 복구처럼 진행 중이던 작업의 짝을 더는
-   * 맞출 수 없을 때만 쓴다 — 평소에는 `hide()` 나 `show()` 가 준 함수로 하나씩 걷는다.
+   * 쌓인 것을 모두 걷고 즉시 닫는다. **원본(Quasar)의 인자 없는 `hide()` 가 이것이다.**
+   * 화면 전환·에러 복구처럼 진행 중이던 작업의 짝을 더는 맞출 수 없을 때만 쓴다 — 평소에는
+   * `show()` 가 준 핸들로 걷는다.
+   * 이걸로 걷힌 항목의 주인이 뒤늦게 자기 핸들을 불러도 아무 일도 일어나지 않는다.
    */
   hideAll() {
     if (entries.length === 0) return;
@@ -8907,7 +9069,7 @@ function SPortal({
   const portalContainer = usePortalContainer();
   const { minWidth: styleMinWidth, maxWidth: styleMaxWidth, ...restStyle } = style ?? {};
   return /* @__PURE__ */ jsxRuntime.jsxs(
-    RPopover12__namespace.Root,
+    RPopover13__namespace.Root,
     {
       open,
       onOpenChange: (next) => {
@@ -8915,9 +9077,9 @@ function SPortal({
         if (!next) onClose?.();
       },
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(RPopover12__namespace.Anchor, { virtualRef: anchorRef }),
-        /* @__PURE__ */ jsxRuntime.jsx(RPopover12__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
-          RPopover12__namespace.Content,
+        /* @__PURE__ */ jsxRuntime.jsx(RPopover13__namespace.Anchor, { virtualRef: anchorRef }),
+        /* @__PURE__ */ jsxRuntime.jsx(RPopover13__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
+          RPopover13__namespace.Content,
           {
             side: placement,
             align,
@@ -9668,10 +9830,10 @@ function SPopover({
   const descColor = type === "default" ? "var(--cmp-popover-default-description)" : "var(--cmp-popover-light-description)";
   const leftLinkLabelClass = type === "default" ? "text-[color:var(--cmp-popover-default-subAction)]" : "text-[color:var(--cmp-popover-light-subAction)]";
   const triggerNode = trigger ?? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "inline-flex cursor-pointer", "aria-label": ariaLabel, children: /* @__PURE__ */ jsxRuntime.jsx(SIcon, { name: icon, size: iconSize, color }) });
-  return /* @__PURE__ */ jsxRuntime.jsxs(RPopover12__namespace.Root, { open: actualOpen, onOpenChange: setOpen, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(RPopover12__namespace.Trigger, { asChild: true, children: triggerNode }),
-    /* @__PURE__ */ jsxRuntime.jsx(RPopover12__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsxs(
-      RPopover12__namespace.Content,
+  return /* @__PURE__ */ jsxRuntime.jsxs(RPopover13__namespace.Root, { open: actualOpen, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(RPopover13__namespace.Trigger, { asChild: true, children: triggerNode }),
+    /* @__PURE__ */ jsxRuntime.jsx(RPopover13__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsxs(
+      RPopover13__namespace.Content,
       {
         side: placement,
         sideOffset: 8,
@@ -9737,7 +9899,7 @@ function SPopover({
               ]
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsx(RPopover12__namespace.Arrow, { width: 16, height: 12, style: { fill: bg } })
+          /* @__PURE__ */ jsxRuntime.jsx(RPopover13__namespace.Arrow, { width: 16, height: 12, style: { fill: bg } })
         ]
       }
     ) })
@@ -9855,10 +10017,10 @@ function SGuide({
   );
   if (isNotion)
     return /* @__PURE__ */ jsxRuntime.jsx("span", { className, style, children: trigger });
-  return /* @__PURE__ */ jsxRuntime.jsxs(RPopover12__namespace.Root, { open, onOpenChange: setOpen, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(RPopover12__namespace.Trigger, { asChild: true, children: trigger }),
-    /* @__PURE__ */ jsxRuntime.jsx(RPopover12__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsxs(
-      RPopover12__namespace.Content,
+  return /* @__PURE__ */ jsxRuntime.jsxs(RPopover13__namespace.Root, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(RPopover13__namespace.Trigger, { asChild: true, children: trigger }),
+    /* @__PURE__ */ jsxRuntime.jsx(RPopover13__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsxs(
+      RPopover13__namespace.Content,
       {
         side: "bottom",
         align: "start",
@@ -12351,10 +12513,10 @@ var SGnb = /* @__PURE__ */ react.forwardRef(function SGnb2({
         ),
         header === "fix" && menuResizeHandle,
         launcherListBox,
-        /* @__PURE__ */ jsxRuntime.jsxs(RPopover12__namespace.Root, { open: labelTip !== null, onOpenChange: (open) => !open && setLabelTip(null), children: [
-          /* @__PURE__ */ jsxRuntime.jsx(RPopover12__namespace.Anchor, { virtualRef: labelTipAnchorRef }),
-          /* @__PURE__ */ jsxRuntime.jsx(RPopover12__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
-            RPopover12__namespace.Content,
+        /* @__PURE__ */ jsxRuntime.jsxs(RPopover13__namespace.Root, { open: labelTip !== null, onOpenChange: (open) => !open && setLabelTip(null), children: [
+          /* @__PURE__ */ jsxRuntime.jsx(RPopover13__namespace.Anchor, { virtualRef: labelTipAnchorRef }),
+          /* @__PURE__ */ jsxRuntime.jsx(RPopover13__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
+            RPopover13__namespace.Content,
             {
               side: "right",
               sideOffset: 4,
@@ -14449,7 +14611,7 @@ function SCalendarBoard({
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsxs(
-          RPopover12__namespace.Root,
+          RPopover13__namespace.Root,
           {
             open: openDate !== null,
             onOpenChange: (open) => {
@@ -14493,12 +14655,12 @@ function SCalendarBoard({
                       },
                       cell.date
                     );
-                    return cell.date === openDate ? /* @__PURE__ */ jsxRuntime.jsx(RPopover12__namespace.Anchor, { asChild: true, children: card }, cell.date) : card;
+                    return cell.date === openDate ? /* @__PURE__ */ jsxRuntime.jsx(RPopover13__namespace.Anchor, { asChild: true, children: card }, cell.date) : card;
                   })
                 }
               ),
-              /* @__PURE__ */ jsxRuntime.jsx(RPopover12__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
-                RPopover12__namespace.Content,
+              /* @__PURE__ */ jsxRuntime.jsx(RPopover13__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
+                RPopover13__namespace.Content,
                 {
                   onInteractOutside: (e) => {
                     const target = e.detail.originalEvent.target;
@@ -17001,10 +17163,10 @@ function useTruncatedValueTooltip({
     valueRef: elRef,
     onMouseEnter: active ? onMouseEnter : cancelHide,
     onMouseLeave: active ? startHide : cancelHide,
-    tooltip: active ? /* @__PURE__ */ jsxRuntime.jsxs(RPopover12__namespace.Root, { open, onOpenChange: setOpen, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(RPopover12__namespace.Anchor, { virtualRef: elRef }),
-      /* @__PURE__ */ jsxRuntime.jsx(RPopover12__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
-        RPopover12__namespace.Content,
+    tooltip: active ? /* @__PURE__ */ jsxRuntime.jsxs(RPopover13__namespace.Root, { open, onOpenChange: setOpen, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(RPopover13__namespace.Anchor, { virtualRef: elRef }),
+      /* @__PURE__ */ jsxRuntime.jsx(RPopover13__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
+        RPopover13__namespace.Content,
         {
           side: "top",
           sideOffset: 4,
@@ -18258,8 +18420,8 @@ function SDatePicker({
       disabled,
       className,
       style,
-      children: /* @__PURE__ */ jsxRuntime.jsxs(RPopover12__namespace.Root, { open, onOpenChange: (o) => !disabled && setOpen(o), children: [
-        /* @__PURE__ */ jsxRuntime.jsx(RPopover12__namespace.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
+      children: /* @__PURE__ */ jsxRuntime.jsxs(RPopover13__namespace.Root, { open, onOpenChange: (o) => !disabled && setOpen(o), children: [
+        /* @__PURE__ */ jsxRuntime.jsx(RPopover13__namespace.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
             role: "button",
@@ -18318,8 +18480,8 @@ function SDatePicker({
             ]
           }
         ) }),
-        /* @__PURE__ */ jsxRuntime.jsx(RPopover12__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
-          RPopover12__namespace.Content,
+        /* @__PURE__ */ jsxRuntime.jsx(RPopover13__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
+          RPopover13__namespace.Content,
           {
             side: "bottom",
             align: mode === "date" ? "start" : "center",
@@ -18795,7 +18957,7 @@ function SDateRangePicker({
       className,
       style,
       children: /* @__PURE__ */ jsxRuntime.jsxs(
-        RPopover12__namespace.Root,
+        RPopover13__namespace.Root,
         {
           open,
           onOpenChange: (o) => {
@@ -18804,7 +18966,7 @@ function SDateRangePicker({
             if (!o) setPendingStart(null);
           },
           children: [
-            /* @__PURE__ */ jsxRuntime.jsx(RPopover12__namespace.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
+            /* @__PURE__ */ jsxRuntime.jsx(RPopover13__namespace.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
               "div",
               {
                 role: "button",
@@ -18868,8 +19030,8 @@ function SDateRangePicker({
                 ]
               }
             ) }),
-            /* @__PURE__ */ jsxRuntime.jsx(RPopover12__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
-              RPopover12__namespace.Content,
+            /* @__PURE__ */ jsxRuntime.jsx(RPopover13__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
+              RPopover13__namespace.Content,
               {
                 side: "bottom",
                 align: "start",
@@ -19636,6 +19798,10 @@ var ChartFrame = /* @__PURE__ */ react.forwardRef(function ChartFrame2({ title,
     }
   );
 });
+
+// src/lib/chart/hover-dim.ts
+var CHART_DIM_OPACITY_TRANSITION = "transition-opacity duration-200 ease-out motion-reduce:transition-none";
+var CHART_DIM_COLOR_TRANSITION = "transition-colors duration-200 ease-out motion-reduce:transition-none";
 var DOT_SIZE = 6;
 function ChartLegend({
   items,
@@ -19668,7 +19834,7 @@ function ChartLegend({
               "flex items-center gap-(--cmp-chart-legendItem-gap)",
               "py-(--cmp-chart-legendItem-paddingY)",
               "typo-body-sm-medium text-(--cmp-chart-legendItem-color)",
-              "transition-opacity duration-200 ease-out motion-reduce:transition-none",
+              CHART_DIM_OPACITY_TRANSITION,
               activeIndex != null && activeIndex !== index && "opacity-(--opacity-060)"
             ),
             children: [
@@ -19699,7 +19865,7 @@ function ChartLegend({
             "flex items-center gap-(--cmp-chart-legendItem-gap)",
             "py-(--cmp-chart-legendItem-paddingY)",
             "typo-body-sm-medium text-(--cmp-chart-legendItem-color)",
-            "transition-opacity duration-200 ease-out motion-reduce:transition-none",
+            CHART_DIM_OPACITY_TRANSITION,
             activeIndex != null && activeIndex !== index && "opacity-(--opacity-060)"
           ),
           children: [
@@ -19928,7 +20094,6 @@ var BAR_OPACITY_HOVER = 1;
 var BAR_DATA_LABEL_COLOR = "var(--cmp-chart-dataLabel-color-default)";
 var BAR_DATA_LABEL_TYPO = "typo-body-sm-medium";
 var BAR_DATA_LABEL_TYPO_HOVER = "typo-body-md-bold";
-var BAR_HOVER_TRANSITION = "transition-opacity duration-200 ease-out motion-reduce:transition-none";
 function bandLayout(size, categoryCount, seriesCount, barSizeMax = BAR_SIZE_MAX) {
   const categories = Math.max(1, categoryCount);
   const series = Math.max(1, seriesCount);
@@ -20195,7 +20360,7 @@ var SBarChart = /* @__PURE__ */ react.forwardRef(function SBarChart2({
             "path",
             {
               d: barPath(x, y, width, barHeight, direction, negative),
-              className: BAR_HOVER_TRANSITION,
+              className: CHART_DIM_OPACITY_TRANSITION,
               style: {
                 fill: colorAt(seriesIndex, categoryIndex),
                 opacity,
@@ -20212,7 +20377,7 @@ var SBarChart = /* @__PURE__ */ react.forwardRef(function SBarChart2({
               y: labelY,
               className: cn(
                 hoveredCategory === categoryIndex ? BAR_DATA_LABEL_TYPO_HOVER : BAR_DATA_LABEL_TYPO,
-                BAR_HOVER_TRANSITION
+                CHART_DIM_OPACITY_TRANSITION
               ),
               style: {
                 fill: BAR_DATA_LABEL_COLOR,
@@ -20293,7 +20458,7 @@ var SBarChart = /* @__PURE__ */ react.forwardRef(function SBarChart2({
               width: box3.width,
               height: box3.height,
               clipPath: `url(#${segment.value < 0 ? negativeClip : positiveClip})`,
-              className: BAR_HOVER_TRANSITION,
+              className: CHART_DIM_OPACITY_TRANSITION,
               style: {
                 // 조각과 라벨에 따로 건다 — 묶음(<g>)에 걸면 호버가 없을 때의
                 // 기본 흐림까지 합계 라벨에 묻어 숫자가 늘 옅어진다.
@@ -20318,7 +20483,7 @@ var SBarChart = /* @__PURE__ */ react.forwardRef(function SBarChart2({
             y: labelY,
             className: cn(
               hoveredCategory === categoryIndex ? BAR_DATA_LABEL_TYPO_HOVER : BAR_DATA_LABEL_TYPO,
-              BAR_HOVER_TRANSITION
+              CHART_DIM_OPACITY_TRANSITION
             ),
             style: {
               fill: BAR_DATA_LABEL_COLOR,
@@ -20841,6 +21006,7 @@ var SLineChart = /* @__PURE__ */ react.forwardRef(function SLineChart2({
               cx: point.x,
               cy: point.y,
               r: hovered ? POINT_HOVER_RADIUS : POINT_RADIUS,
+              className: CHART_DIM_COLOR_TRANSITION,
               style: {
                 fill: dimmed ? dimmedColorAt(seriesIndex) : color,
                 cursor: onPointClick ? "pointer" : void 0
@@ -21195,7 +21361,7 @@ var RadialChart = /* @__PURE__ */ react.forwardRef(function RadialChart2({
                   {
                     d: slice(arc2),
                     fillRule: "evenodd",
-                    className: "transition-opacity duration-200 ease-out motion-reduce:transition-none",
+                    className: CHART_DIM_OPACITY_TRANSITION,
                     style: {
                       fill: arc2.color,
                       opacity,
@@ -21228,7 +21394,10 @@ var RadialChart = /* @__PURE__ */ react.forwardRef(function RadialChart2({
                     y: point.y,
                     textAnchor: "middle",
                     dominantBaseline: "central",
-                    className: "pointer-events-none typo-body-sm-bold transition-opacity duration-200 ease-out motion-reduce:transition-none",
+                    className: cn(
+                      "pointer-events-none typo-body-sm-bold",
+                      CHART_DIM_OPACITY_TRANSITION
+                    ),
                     style: {
                       fill: "var(--sys-color-fg-inverse)",
                       opacity: hovered != null && hovered !== arc2.index ? OPACITY_DIMMED : void 0
@@ -23245,10 +23414,10 @@ function EditorToolbarBar({
             },
             item4
           );
-        return /* @__PURE__ */ jsxRuntime.jsxs(RPopover12__namespace.Root, { open: linkOpen, onOpenChange: setLinkOpen, children: [
-          /* @__PURE__ */ jsxRuntime.jsx(RPopover12__namespace.Trigger, { asChild: true, disabled: off, children: /* @__PURE__ */ jsxRuntime.jsx(ToolbarButton, { label: "\uB9C1\uD06C", active: state2.link, disabled: off, children: /* @__PURE__ */ jsxRuntime.jsx(IconLink, { size: ICON_SIZE }) }) }),
-          /* @__PURE__ */ jsxRuntime.jsx(RPopover12__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
-            RPopover12__namespace.Content,
+        return /* @__PURE__ */ jsxRuntime.jsxs(RPopover13__namespace.Root, { open: linkOpen, onOpenChange: setLinkOpen, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(RPopover13__namespace.Trigger, { asChild: true, disabled: off, children: /* @__PURE__ */ jsxRuntime.jsx(ToolbarButton, { label: "\uB9C1\uD06C", active: state2.link, disabled: off, children: /* @__PURE__ */ jsxRuntime.jsx(IconLink, { size: ICON_SIZE }) }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(RPopover13__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
+            RPopover13__namespace.Content,
             {
               sideOffset: 4,
               align: "start",
@@ -24641,8 +24810,8 @@ var SChipFilter = /* @__PURE__ */ react.forwardRef(function SChipFilter2({
           })(),
           hasRightActions && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
             /* @__PURE__ */ jsxRuntime.jsx(Divider, { inset: true }),
-            hasAddButton && /* @__PURE__ */ jsxRuntime.jsxs(RPopover12__namespace.Root, { open: addOpen, onOpenChange: setAddOpen, children: [
-              /* @__PURE__ */ jsxRuntime.jsx(RPopover12__namespace.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
+            hasAddButton && /* @__PURE__ */ jsxRuntime.jsxs(RPopover13__namespace.Root, { open: addOpen, onOpenChange: setAddOpen, children: [
+              /* @__PURE__ */ jsxRuntime.jsx(RPopover13__namespace.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
                 "button",
                 {
                   type: "button",
@@ -24667,8 +24836,8 @@ var SChipFilter = /* @__PURE__ */ react.forwardRef(function SChipFilter2({
                   ]
                 }
               ) }),
-              /* @__PURE__ */ jsxRuntime.jsx(RPopover12__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
-                RPopover12__namespace.Content,
+              /* @__PURE__ */ jsxRuntime.jsx(RPopover13__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
+                RPopover13__namespace.Content,
                 {
                   side: "bottom",
                   align: "start",
@@ -24703,17 +24872,17 @@ var SChipFilter = /* @__PURE__ */ react.forwardRef(function SChipFilter2({
             )
           ] })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs(RPopover12__namespace.Root, { open: openKey != null, onOpenChange: (next) => !next && setOpenKey(null), children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(RPopover13__namespace.Root, { open: openKey != null, onOpenChange: (next) => !next && setOpenKey(null), children: [
           /* @__PURE__ */ jsxRuntime.jsx(
-            RPopover12__namespace.Anchor,
+            RPopover13__namespace.Anchor,
             {
               virtualRef: {
                 current: openKey ? triggerRefs.current.get(openKey) : null
               }
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsx(RPopover12__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
-            RPopover12__namespace.Content,
+          /* @__PURE__ */ jsxRuntime.jsx(RPopover13__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
+            RPopover13__namespace.Content,
             {
               side: "bottom",
               align: "start",
@@ -25306,8 +25475,8 @@ function InlineDatePresetFilter({
     applied && (rangeValue ? (
       // 뱃지 모양은 그대로 두고, 눌렀을 때 캘린더가 열려 기간을 직접 다시 고를 수 있게 한다.
       // 직접 고르면 프리셋 선택은 해제된다.
-      /* @__PURE__ */ jsxRuntime.jsxs(RPopover12__namespace.Root, { open: pickerOpen, onOpenChange: setPickerOpen, children: [
-        /* @__PURE__ */ jsxRuntime.jsx(RPopover12__namespace.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+      /* @__PURE__ */ jsxRuntime.jsxs(RPopover13__namespace.Root, { open: pickerOpen, onOpenChange: setPickerOpen, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(RPopover13__namespace.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
           "button",
           {
             type: "button",
@@ -25316,8 +25485,8 @@ function InlineDatePresetFilter({
             children: badge
           }
         ) }),
-        /* @__PURE__ */ jsxRuntime.jsx(RPopover12__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
-          RPopover12__namespace.Content,
+        /* @__PURE__ */ jsxRuntime.jsx(RPopover13__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
+          RPopover13__namespace.Content,
           {
             side: "bottom",
             align: "start",
@@ -26779,8 +26948,8 @@ function STimePicker({
       disabled,
       className,
       style,
-      children: /* @__PURE__ */ jsxRuntime.jsxs(RPopover12__namespace.Root, { open, onOpenChange: commitOpen, children: [
-        /* @__PURE__ */ jsxRuntime.jsx(RPopover12__namespace.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
+      children: /* @__PURE__ */ jsxRuntime.jsxs(RPopover13__namespace.Root, { open, onOpenChange: commitOpen, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(RPopover13__namespace.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
             ref: triggerRef,
@@ -26840,8 +27009,8 @@ function STimePicker({
             ]
           }
         ) }),
-        /* @__PURE__ */ jsxRuntime.jsx(RPopover12__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
-          RPopover12__namespace.Content,
+        /* @__PURE__ */ jsxRuntime.jsx(RPopover13__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
+          RPopover13__namespace.Content,
           {
             side: "bottom",
             align: "start",
@@ -27249,8 +27418,8 @@ function STimeRangePicker({
       disabled,
       className,
       style,
-      children: /* @__PURE__ */ jsxRuntime.jsxs(RPopover12__namespace.Root, { open, onOpenChange: commitOpen, children: [
-        /* @__PURE__ */ jsxRuntime.jsx(RPopover12__namespace.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
+      children: /* @__PURE__ */ jsxRuntime.jsxs(RPopover13__namespace.Root, { open, onOpenChange: commitOpen, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(RPopover13__namespace.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
             ref: triggerRef,
@@ -27310,8 +27479,8 @@ function STimeRangePicker({
             ]
           }
         ) }),
-        /* @__PURE__ */ jsxRuntime.jsx(RPopover12__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
-          RPopover12__namespace.Content,
+        /* @__PURE__ */ jsxRuntime.jsx(RPopover13__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
+          RPopover13__namespace.Content,
           {
             side: "bottom",
             align: "start",
@@ -27460,7 +27629,6 @@ exports.SList = SList2;
 exports.SListItem = SListItem2;
 exports.SLoadingContainer = SLoadingContainer;
 exports.SLoadingModal = SLoadingModal;
-exports.SLoadingViewport = SLoadingViewport;
 exports.SLoginCard = SLoginCard2;
 exports.SLogo = SLogo;
 exports.SMeatballButton = SMeatballButton2;