@stn-uiux/pub-ui-react 0.1.90 → 0.1.91

package/dist/index.js

@@ -57,7 +57,7 @@ function buildPaginationItems(page, count, siblingCount = 1, boundaryCount = 1)
 }
 
 // src/StnProvider.tsx
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useContext as useContext2, useEffect, useState } from "react";
 
 // src/StnContext.tsx
 import { createContext, useContext } from "react";
@@ -94,10 +94,13 @@ function StnProvider({
   applyThemeToDocument,
   className
 }) {
-  const [internalMode, setInternalMode] = useState(defaultMode);
-  const mode = modeProp ?? internalMode;
-  const [internalTheme, setInternalTheme] = useState(defaultTheme);
-  const theme = themeProp ?? internalTheme;
+  const parentCtx = useContext2(StnContext);
+  const resolvedModeProp = modeProp ?? (themeProp === "light" || themeProp === "dark" ? themeProp : void 0);
+  const fallbackDefaultMode = parentCtx?.mode ?? defaultMode;
+  const [internalMode, setInternalMode] = useState(fallbackDefaultMode);
+  const mode = resolvedModeProp ?? (parentCtx ? parentCtx.mode : internalMode);
+  const [internalTheme, setInternalTheme] = useState(defaultTheme ?? parentCtx?.theme);
+  const theme = (themeProp === "light" || themeProp === "dark" ? void 0 : themeProp) ?? internalTheme;
   const setMode = useCallback(
     (next) => {
       if (modeProp === void 0) setInternalMode(next);
@@ -892,6 +895,7 @@ var StnPopover = forwardRef5(function StnPopover2({
   anchorPosition,
   anchorOrigin = DEFAULT_ANCHOR_ORIGIN,
   transformOrigin = DEFAULT_TRANSFORM_ORIGIN,
+  offset = 0,
   marginThreshold = 16,
   className,
   style,
@@ -959,8 +963,24 @@ var StnPopover = forwardRef5(function StnPopover2({
     } else if (typeof transformOrigin.horizontal === "number") {
       transformLeft = transformOrigin.horizontal;
     }
-    let top = anchorTop - transformTop;
-    let left = anchorLeft - transformLeft;
+    let offsetX = 0;
+    let offsetY = 0;
+    if (typeof offset === "number") {
+      if (anchorReference === "anchorPosition") {
+        offsetX = offset;
+        offsetY = offset;
+      } else {
+        if (anchorOrigin.vertical === "bottom") offsetY += offset;
+        else if (anchorOrigin.vertical === "top") offsetY -= offset;
+        if (anchorOrigin.horizontal === "right") offsetX += offset;
+        else if (anchorOrigin.horizontal === "left") offsetX -= offset;
+      }
+    } else if (offset && typeof offset === "object") {
+      offsetX = offset.x ?? 0;
+      offsetY = offset.y ?? 0;
+    }
+    let top = anchorTop - transformTop + offsetY;
+    let left = anchorLeft - transformLeft + offsetX;
     const viewportWidth = window.innerWidth;
     const viewportHeight = window.innerHeight;
     const maxTop = viewportHeight - paperRect.height - marginThreshold;
@@ -980,7 +1000,8 @@ var StnPopover = forwardRef5(function StnPopover2({
     anchorOrigin.horizontal,
     transformOrigin.vertical,
     transformOrigin.horizontal,
-    marginThreshold
+    marginThreshold,
+    offset
   ]);
   useEffect2(() => {
     if (!open) return;
@@ -1253,7 +1274,7 @@ var StnModal = forwardRef7(function StnModal2({
 var StnPopup = StnModal;
 
 // src/components/StnDrawer.tsx
-import { forwardRef as forwardRef8, useEffect as useEffect4, useId as useId2 } from "react";
+import { forwardRef as forwardRef8, useEffect as useEffect4, useId as useId2, useState as useState5, useRef as useRef2 } from "react";
 import { createPortal as createPortal3 } from "react-dom";
 import { jsx as jsx11, jsxs as jsxs7 } from "react/jsx-runtime";
 var SIZE_CLASS2 = {
@@ -1274,29 +1295,48 @@ function StnDrawerHeader({
   headerExtra,
   onClose,
   showClose = true,
+  padding,
   className,
+  style,
   children,
   ...rest
 }) {
-  return /* @__PURE__ */ jsxs7("div", { className: cn("stn-drawer__head", className), ...rest, children: [
-    /* @__PURE__ */ jsxs7("div", { className: "stn-drawer__head-text", children: [
-      title ? /* @__PURE__ */ jsx11("h4", { className: "stn-drawer__head-title", children: title }) : null,
-      subtitle ? /* @__PURE__ */ jsx11("p", { className: "stn-drawer__subtitle", children: subtitle }) : null,
-      children
-    ] }),
-    headerExtra ? /* @__PURE__ */ jsx11("div", { className: "stn-drawer__head-extra", children: headerExtra }) : null,
-    showClose && onClose ? /* @__PURE__ */ jsx11(
-      StnButton,
-      {
-        icon: "line/x",
-        variant: "ghost",
-        size: "sm",
-        className: "stn-drawer__close",
-        "aria-label": "\uB2EB\uAE30",
-        onClick: onClose
-      }
-    ) : null
-  ] });
+  const isScalePadding = typeof padding === "string" && ["none", "xs", "sm", "md", "lg", "xl"].includes(padding);
+  const computedPadding = isScalePadding ? void 0 : typeof padding === "number" ? `var(--stn-space-${padding}, ${padding}px)` : padding;
+  return /* @__PURE__ */ jsxs7(
+    "div",
+    {
+      className: cn(
+        "stn-drawer__head",
+        isScalePadding && `padding-${padding}`,
+        className
+      ),
+      style: {
+        ...computedPadding ? { padding: computedPadding } : {},
+        ...style
+      },
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsxs7("div", { className: "stn-drawer__head-text", children: [
+          title ? /* @__PURE__ */ jsx11("h4", { className: "stn-drawer__head-title", children: title }) : null,
+          subtitle ? /* @__PURE__ */ jsx11("p", { className: "stn-drawer__subtitle", children: subtitle }) : null,
+          children
+        ] }),
+        headerExtra ? /* @__PURE__ */ jsx11("div", { className: "stn-drawer__head-extra", children: headerExtra }) : null,
+        showClose && onClose ? /* @__PURE__ */ jsx11(
+          StnButton,
+          {
+            icon: "line/x",
+            variant: "ghost",
+            size: "sm",
+            className: "stn-drawer__close",
+            "aria-label": "\uB2EB\uAE30",
+            onClick: onClose
+          }
+        ) : null
+      ]
+    }
+  );
 }
 function resolveScaleGap(gap, spacing) {
   if (gap && ["none", "xs", "sm", "md", "lg", "xl"].includes(gap)) return gap;
@@ -1345,7 +1385,16 @@ function StnDrawerBody({
     }
   );
 }
-function StnDrawerFooter({ align = "right", className, children, ...rest }) {
+function StnDrawerFooter({
+  align = "right",
+  padding,
+  className,
+  style,
+  children,
+  ...rest
+}) {
+  const isScalePadding = typeof padding === "string" && ["none", "xs", "sm", "md", "lg", "xl"].includes(padding);
+  const computedPadding = isScalePadding ? void 0 : typeof padding === "number" ? `var(--stn-space-${padding}, ${padding}px)` : padding;
   return /* @__PURE__ */ jsx11(
     "div",
     {
@@ -1354,8 +1403,13 @@ function StnDrawerFooter({ align = "right", className, children, ...rest }) {
         align === "right" && "stn-drawer__footer--right",
         align === "center" && "stn-drawer__footer--center",
         align === "between" && "stn-drawer__footer--between",
+        isScalePadding && `padding-${padding}`,
         className
       ),
+      style: {
+        ...computedPadding ? { padding: computedPadding } : {},
+        ...style
+      },
       ...rest,
       children
     }
@@ -1370,32 +1424,67 @@ var StnDrawerRoot = forwardRef8(function StnDrawer({
   placement = "right",
   size = "md",
   padding,
+  headerPadding,
+  footerPadding,
   gap,
   surface,
   dim = false,
   closeOnScrimClick = false,
   closeOnEsc = true,
   portal = true,
+  motionDuration,
   actions,
   actionAlign = "right",
   className,
   children,
   role = "dialog",
+  style,
   ...rest
 }, ref) {
   const generatedId = useId2();
   const drawerId = rest.id ?? generatedId;
   const titleId = `${drawerId}-title`;
+  const motionDurationMs = motionDuration ?? 400;
+  const [isMounted, setIsMounted] = useState5(open);
+  const [isOpenState, setIsOpenState] = useState5(false);
+  const closeTimerRef = useRef2(null);
   useEffect4(() => {
-    if (!open || !portal || !dim) return;
+    if (open) {
+      if (closeTimerRef.current !== null) {
+        window.clearTimeout(closeTimerRef.current);
+        closeTimerRef.current = null;
+      }
+      setIsMounted(true);
+      const raf = requestAnimationFrame(() => {
+        requestAnimationFrame(() => {
+          setIsOpenState(true);
+        });
+      });
+      return () => cancelAnimationFrame(raf);
+    } else {
+      setIsOpenState(false);
+      closeTimerRef.current = window.setTimeout(() => {
+        setIsMounted(false);
+        closeTimerRef.current = null;
+      }, motionDurationMs + 30);
+      return () => {
+        if (closeTimerRef.current !== null) {
+          window.clearTimeout(closeTimerRef.current);
+          closeTimerRef.current = null;
+        }
+      };
+    }
+  }, [open, motionDurationMs]);
+  useEffect4(() => {
+    if (!isOpenState || !portal || !dim) return;
     const prev = document.body.style.overflow;
     document.body.style.overflow = "hidden";
     return () => {
       document.body.style.overflow = prev;
     };
-  }, [open, portal, dim]);
+  }, [isOpenState, portal, dim]);
   useEffect4(() => {
-    if (!open || !closeOnEsc) return;
+    if (!isOpenState || !closeOnEsc) return;
     const handleKeyDown = (e) => {
       if (e.key === "Escape") {
         onClose();
@@ -1403,9 +1492,10 @@ var StnDrawerRoot = forwardRef8(function StnDrawer({
     };
     window.addEventListener("keydown", handleKeyDown);
     return () => window.removeEventListener("keydown", handleKeyDown);
-  }, [open, closeOnEsc, onClose]);
-  if (!open) return null;
+  }, [isOpenState, closeOnEsc, onClose]);
+  if (!isMounted) return null;
   const hasShorthandHeader = Boolean(title || subtitle || headerExtra);
+  const motionStyle = motionDuration ? { "--stn-drawer-motion-duration": `${motionDuration}ms` } : void 0;
   const drawerPanel = /* @__PURE__ */ jsxs7(
     "div",
     {
@@ -1421,6 +1511,10 @@ var StnDrawerRoot = forwardRef8(function StnDrawer({
         gap && `gap-${gap}`,
         className
       ),
+      style: {
+        ...motionStyle,
+        ...style
+      },
       ...rest,
       children: [
         hasShorthandHeader ? /* @__PURE__ */ jsx11(
@@ -1430,11 +1524,12 @@ var StnDrawerRoot = forwardRef8(function StnDrawer({
             title,
             subtitle,
             headerExtra,
+            padding: headerPadding,
             onClose
           }
         ) : null,
         hasShorthandHeader || actions ? /* @__PURE__ */ jsx11(StnDrawerBody, { surface, children }) : children,
-        actions ? /* @__PURE__ */ jsx11(StnDrawerFooter, { align: actionAlign, children: actions }) : null
+        actions ? /* @__PURE__ */ jsx11(StnDrawerFooter, { align: actionAlign, padding: footerPadding, children: actions }) : null
       ]
     }
   );
@@ -1443,9 +1538,10 @@ var StnDrawerRoot = forwardRef8(function StnDrawer({
     {
       className: cn(
         "stn-drawer-stack",
-        open && "is-open",
+        isOpenState && "is-open",
         dim ? "stn-drawer-stack--dim" : "stn-drawer-stack--no-dim"
       ),
+      style: motionStyle,
       children: [
         dim ? /* @__PURE__ */ jsx11(
           "div",
@@ -1537,7 +1633,7 @@ function StnToastIcon({
 import {
   forwardRef as forwardRef9,
   useEffect as useEffect5,
-  useRef as useRef2
+  useRef as useRef3
 } from "react";
 import { jsx as jsx14, jsxs as jsxs8 } from "react/jsx-runtime";
 var StnProgressBar = forwardRef9(function StnProgressBar2({
@@ -1559,7 +1655,7 @@ var StnProgressBar = forwardRef9(function StnProgressBar2({
   className,
   ...rest
 }, ref) {
-  const fillRef = useRef2(null);
+  const fillRef = useRef3(null);
   const isCountdown = duration != null && duration > 0;
   const pct = max <= 0 ? 0 : Math.min(100, Math.max(0, value / max * 100));
   const pctNum = pct / 100;
@@ -1811,10 +1907,10 @@ import {
   Children,
   forwardRef as forwardRef14,
   createContext as createContext2,
-  useContext as useContext2,
+  useContext as useContext3,
   useEffect as useEffect8,
-  useRef as useRef5,
-  useState as useState7
+  useRef as useRef6,
+  useState as useState8
 } from "react";
 
 // src/components/StnCheckbox.tsx
@@ -1823,7 +1919,7 @@ import {
   useEffect as useEffect6,
   useId as useId4,
   useImperativeHandle as useImperativeHandle2,
-  useRef as useRef3
+  useRef as useRef4
 } from "react";
 import { jsx as jsx16, jsxs as jsxs10 } from "react/jsx-runtime";
 var StnCheckbox = forwardRef11(function StnCheckbox2({
@@ -1846,7 +1942,7 @@ var StnCheckbox = forwardRef11(function StnCheckbox2({
 }, forwardedRef) {
   const autoId = useId4();
   const id = idProp ?? autoId;
-  const innerRef = useRef3(null);
+  const innerRef = useRef4(null);
   useImperativeHandle2(forwardedRef, () => innerRef.current);
   useEffect6(() => {
     if (innerRef.current) {
@@ -1925,8 +2021,8 @@ import {
   useCallback as useCallback4,
   useEffect as useEffect7,
   useId as useId5,
-  useRef as useRef4,
-  useState as useState5
+  useRef as useRef5,
+  useState as useState6
 } from "react";
 import { Fragment, jsx as jsx17, jsxs as jsxs11 } from "react/jsx-runtime";
 function assignRef(ref, value) {
@@ -1957,8 +2053,8 @@ var StnScroll = forwardRef12(function StnScroll2({
 }, ref) {
   const rawId = useId5();
   const customId = `stn-scr-${rawId.replace(/[^a-zA-Z0-9_-]/g, "")}`;
-  const innerRef = useRef4(null);
-  const [edges, setEdges] = useState5({ top: true, bottom: false, left: true, right: false });
+  const innerRef = useRef5(null);
+  const [edges, setEdges] = useState6({ top: true, bottom: false, left: true, right: false });
   const hasArrows = variant === "arrows" || showArrows;
   const hasCustomStyling = Boolean(thumbColor || trackColor || scrollWidth != null);
   const showY = orientation !== "horizontal";
@@ -2127,7 +2223,7 @@ function ScrollArrow({
 // src/components/StnStatus.tsx
 import {
   forwardRef as forwardRef13,
-  useState as useState6
+  useState as useState7
 } from "react";
 import { Fragment as Fragment2, jsx as jsx18, jsxs as jsxs12 } from "react/jsx-runtime";
 var StnStatusDot = forwardRef13(function StnStatusDot2({
@@ -2211,7 +2307,7 @@ var StnStatusSwitch = forwardRef13(function StnStatusSwitch2({
   style,
   ...rest
 }, ref) {
-  const [internalChecked, setInternalChecked] = useState6(defaultChecked);
+  const [internalChecked, setInternalChecked] = useState7(defaultChecked);
   const isChecked = checkedProp !== void 0 ? checkedProp : internalChecked;
   const widthProps = resolveButtonWidthProps(fullWidth, width, 80);
   const handleClick = () => {
@@ -2444,8 +2540,8 @@ function StnTableBase({
   onColumnReorder,
   className
 }) {
-  const [visitedRowId, setVisitedRowId] = useState7(null);
-  const wrapperRef = useRef5(null);
+  const [visitedRowId, setVisitedRowId] = useState8(null);
+  const wrapperRef = useRef6(null);
   useEffect8(() => {
     const wrapper = wrapperRef.current;
     if (!wrapper) return;
@@ -2648,7 +2744,7 @@ var StnTableBody = forwardRef14(
   }
 );
 var StnTableRow = forwardRef14(function StnTableRow2({ className, hoverable = false, selected = false, visited = false, highlighted = false, clickable = false, pressed = false, rowId, children, onClick, ...rest }, ref) {
-  const ctx = useContext2(StnTableContext);
+  const ctx = useContext3(StnTableContext);
   const isTrackedVisited = ctx?.trackVisited && ctx.visitedRowId != null && ctx.visitedRowId === rowId;
   const finalVisited = visited || isTrackedVisited;
   const handleClick = (e) => {
@@ -2684,7 +2780,7 @@ function tableColWidthClass(width) {
   return `stn-table__col--${width}`;
 }
 var StnTableTh = forwardRef14(function StnTableTh2({ className, check = false, align, pressed = false, width, style, children, scope = "col", resizable, draggable, name, groupCols, ...rest }, ref) {
-  const ctx = useContext2(StnTableContext);
+  const ctx = useContext3(StnTableContext);
   const colWidthClass = tableColWidthClass(width);
   const finalResizable = resizable ?? ctx?.resizable;
   const finalDraggable = draggable ?? ctx?.draggable;
@@ -2812,10 +2908,10 @@ StnTable.Flow = StnStatusFlow;
 import {
   createContext as createContext3,
   forwardRef as forwardRef16,
-  useContext as useContext3,
+  useContext as useContext4,
   useEffect as useEffect9,
-  useRef as useRef6,
-  useState as useState8
+  useRef as useRef7,
+  useState as useState9
 } from "react";
 
 // src/components/StnDivider.tsx
@@ -2874,7 +2970,7 @@ var StnListContext = createContext3({
   disablePadding: false,
   indent: 0
 });
-var useStnList = () => useContext3(StnListContext);
+var useStnList = () => useContext4(StnListContext);
 var StnListBase = forwardRef16(function StnList({
   size = "md",
   padding,
@@ -3054,8 +3150,8 @@ var StnListItemAction = forwardRef16(
 );
 var StnListCollapse = forwardRef16(
   function StnListCollapse2({ in: inProp, component: Component = "li", className, children, ...rest }, ref) {
-    const innerRef = useRef6(null);
-    const [maxHeight, setMaxHeight] = useState8(inProp ? void 0 : 0);
+    const innerRef = useRef7(null);
+    const [maxHeight, setMaxHeight] = useState9(inProp ? void 0 : 0);
     useEffect9(() => {
       if (inProp) {
         const h = innerRef.current?.scrollHeight ?? 500;
@@ -3097,7 +3193,7 @@ var StnListVirtual = forwardRef16(
     className,
     ...rest
   }, ref) {
-    const [scrollTop, setScrollTop] = useState8(0);
+    const [scrollTop, setScrollTop] = useState9(0);
     const handleScroll = (e) => {
       setScrollTop(e.currentTarget.scrollTop);
     };
@@ -3175,7 +3271,7 @@ import {
   createContext as createContext4,
   forwardRef as forwardRef18,
   isValidElement as isValidElement3,
-  useContext as useContext4
+  useContext as useContext5
 } from "react";
 
 // src/components/StnRadio.tsx
@@ -3242,7 +3338,7 @@ import { jsx as jsx23, jsxs as jsxs16 } from "react/jsx-runtime";
 var StnMenuContext = createContext4({
   size: "md"
 });
-var useStnMenu = () => useContext4(StnMenuContext);
+var useStnMenu = () => useContext5(StnMenuContext);
 var DEFAULT_MENU_ANCHOR_ORIGIN = {
   vertical: "bottom",
   horizontal: "left"
@@ -3564,7 +3660,7 @@ import {
   forwardRef as forwardRef20,
   useCallback as useCallback5,
   useMemo as useMemo2,
-  useState as useState9
+  useState as useState10
 } from "react";
 
 // src/components/StnTreeNode.tsx
@@ -4037,7 +4133,7 @@ var StnTreeItem = StnTreeNode;
 // src/components/StnTree.tsx
 import { jsx as jsx25, jsxs as jsxs18 } from "react/jsx-runtime";
 function useControllableSet(controlled, defaultIds, defaultExpandAll, allExpandable) {
-  const [internal, setInternal] = useState9(() => {
+  const [internal, setInternal] = useState10(() => {
     if (defaultIds != null) return defaultIds;
     if (defaultExpandAll) return allExpandable;
     return [];
@@ -4096,12 +4192,12 @@ var StnTree = forwardRef20(function StnTree2({
     defaultExpandAll,
     expandableIds
   );
-  const [internalSelected, setInternalSelected] = useState9(defaultSelectedId);
+  const [internalSelected, setInternalSelected] = useState10(defaultSelectedId);
   const selected = selectedId ?? internalSelected;
-  const [internalHidden, setInternalHidden] = useState9(() => defaultHiddenIds ?? []);
+  const [internalHidden, setInternalHidden] = useState10(() => defaultHiddenIds ?? []);
   const hidden = controlledHiddenIds ?? internalHidden;
   const isCheckboxEnabled = showCheckbox ?? checkable ?? false;
-  const [internalChecked, setInternalChecked] = useState9(() => {
+  const [internalChecked, setInternalChecked] = useState10(() => {
     if (defaultCheckedIds != null) {
       if (cascadeCheck) {
         return computeInitialCascade(nodes, defaultCheckedIds).checkedIds;
@@ -4111,7 +4207,7 @@ var StnTree = forwardRef20(function StnTree2({
     return [];
   });
   const checked = controlledCheckedIds ?? internalChecked;
-  const [internalIndeterminate, setInternalIndeterminate] = useState9(() => {
+  const [internalIndeterminate, setInternalIndeterminate] = useState10(() => {
     if (defaultIndeterminateIds != null) return defaultIndeterminateIds;
     if (cascadeCheck && defaultCheckedIds != null) {
       return computeInitialCascade(nodes, defaultCheckedIds).indeterminateIds;
@@ -5370,7 +5466,7 @@ function StnChip(props) {
 // src/components/StnToggleButton.tsx
 import {
   forwardRef as forwardRef30,
-  useState as useState10
+  useState as useState11
 } from "react";
 import { Fragment as Fragment3, jsx as jsx36, jsxs as jsxs29 } from "react/jsx-runtime";
 var StnToggleButton = forwardRef30(
@@ -5395,7 +5491,7 @@ var StnToggleButton = forwardRef30(
     ...rest
   }, ref) {
     const isControlled = pressedProp !== void 0;
-    const [internalPressed, setInternalPressed] = useState10(defaultPressed);
+    const [internalPressed, setInternalPressed] = useState11(defaultPressed);
     const isPressed = isControlled ? Boolean(pressedProp) : internalPressed;
     const hasGradient = gradient && gradient !== "none";
     const isKnownTone = [
@@ -5718,19 +5814,19 @@ function StnSegmented(props) {
 // src/components/tabs/StnTabs.tsx
 import {
   forwardRef as forwardRef34,
-  useState as useState11,
-  useRef as useRef7,
+  useState as useState12,
+  useRef as useRef8,
   useEffect as useEffect10,
   useCallback as useCallback6,
   useLayoutEffect
 } from "react";
 
 // src/components/tabs/StnTabContext.tsx
-import { createContext as createContext5, useContext as useContext5 } from "react";
+import { createContext as createContext5, useContext as useContext6 } from "react";
 import { jsx as jsx40 } from "react/jsx-runtime";
 var StnTabsContext = createContext5(null);
 function useStnTabsContext() {
-  return useContext5(StnTabsContext);
+  return useContext6(StnTabsContext);
 }
 function StnTabContextProvider({
   value,
@@ -5871,7 +5967,7 @@ var StnTabsRoot = forwardRef34(function StnTabs({
   ...rest
 }, ref) {
   const context = useStnTabsContext();
-  const [internalValue, setInternalValue] = useState11(() => {
+  const [internalValue, setInternalValue] = useState12(() => {
     return controlledValue ?? context?.value ?? defaultValue ?? (items && items.length > 0 ? items[0].value : "");
   });
   const activeValue = controlledValue ?? context?.value ?? internalValue;
@@ -5887,12 +5983,12 @@ var StnTabsRoot = forwardRef34(function StnTabs({
   );
   const resolvedSize = propSize ?? context?.size ?? "md";
   const resolvedVariant = propVariant ?? context?.variant ?? "line";
-  const scrollerRef = useRef7(null);
-  const listRef = useRef7(null);
-  const [indicatorStyle, setIndicatorStyle] = useState11({ left: 0, width: 0, opacity: 0 });
-  const [canScrollStart, setCanScrollStart] = useState11(false);
-  const [canScrollEnd, setCanScrollEnd] = useState11(false);
-  const [isScrollable, setIsScrollable] = useState11(false);
+  const scrollerRef = useRef8(null);
+  const listRef = useRef8(null);
+  const [indicatorStyle, setIndicatorStyle] = useState12({ left: 0, width: 0, opacity: 0 });
+  const [canScrollStart, setCanScrollStart] = useState12(false);
+  const [canScrollEnd, setCanScrollEnd] = useState12(false);
+  const [isScrollable, setIsScrollable] = useState12(false);
   const updateIndicator = useCallback6(() => {
     const list = listRef.current;
     if (!list) return;
@@ -6089,8 +6185,8 @@ import {
   useCallback as useCallback7,
   useEffect as useEffect11,
   useId as useId10,
-  useRef as useRef8,
-  useState as useState12
+  useRef as useRef9,
+  useState as useState13
 } from "react";
 import { jsx as jsx44, jsxs as jsxs34 } from "react/jsx-runtime";
 function resolveGlyph(node) {
@@ -6122,7 +6218,7 @@ function variantClass(variant = "outline") {
   return "outline";
 }
 function useControllable(controlled, defaultValue, onChange) {
-  const [internal, setInternal] = useState12(defaultValue);
+  const [internal, setInternal] = useState13(defaultValue);
   const value = controlled ?? internal;
   const setValue = useCallback7(
     (next) => {
@@ -6164,8 +6260,8 @@ function StnDropdown({
   const autoId = useId10();
   const rootId = idProp ?? `stn-dropdown-${autoId.replace(/:/g, "")}`;
   const [value, setValue] = useControllable(valueProp, defaultValue, onChange);
-  const [open, setOpen] = useState12(false);
-  const rootRef = useRef8(null);
+  const [open, setOpen] = useState13(false);
+  const rootRef = useRef9(null);
   const selected = options.find((o) => o.value === value);
   const hasValue = selected !== void 0 && value !== "";
   const displayLabel = hasValue ? selected.label : placeholder ?? (options[0]?.label ?? "");
@@ -6505,7 +6601,7 @@ var StnTextField = forwardRef35(function StnTextField2({
 import {
   forwardRef as forwardRef36,
   useId as useId12,
-  useState as useState13
+  useState as useState14
 } from "react";
 import { jsx as jsx47, jsxs as jsxs36 } from "react/jsx-runtime";
 function normalizeSize2(size) {
@@ -6560,7 +6656,7 @@ var StnTextArea = forwardRef36(function StnTextArea2({
   const autoId = useId12();
   const id = idProp ?? autoId;
   const isControlled = value !== void 0;
-  const [uncontrolledLength, setUncontrolledLength] = useState13(() => {
+  const [uncontrolledLength, setUncontrolledLength] = useState14(() => {
     if (defaultValue != null) return String(defaultValue).length;
     return 0;
   });
@@ -6802,7 +6898,7 @@ var StnDateRangeField = forwardRef37(function StnDateRangeField2({
 // src/components/StnLabelPrefix.tsx
 import {
   useId as useId14,
-  useState as useState14,
+  useState as useState15,
   isValidElement as isValidElement6,
   cloneElement as cloneElement4
 } from "react";
@@ -6846,7 +6942,7 @@ function StnLabelPrefix({
   const isError = error || invalid || color === "error";
   const hasHelper = helperText != null && helperText !== "";
   const helperId = hasHelper ? `${id}-helper` : void 0;
-  const [internalChecked, setInternalChecked] = useState14(defaultChecked ?? false);
+  const [internalChecked, setInternalChecked] = useState15(defaultChecked ?? false);
   const isChecked = checked !== void 0 ? checked : internalChecked;
   const handleCheckboxChange = (nextChecked) => {
     if (checked === void 0) {
@@ -7104,14 +7200,14 @@ import {
   useCallback as useCallback9,
   useEffect as useEffect13,
   useLayoutEffect as useLayoutEffect3,
-  useRef as useRef10,
-  useState as useState16
+  useRef as useRef11,
+  useState as useState17
 } from "react";
 import { createPortal as createPortal4 } from "react-dom";
 import { formatStnDateRangeFieldValue as formatStnDateRangeFieldValue2 } from "@stn-uiux/pub-ui/data/stnDateRangeField";
 
 // src/components/datePicker/StnDateRangePicker.tsx
-import { useCallback as useCallback8, useEffect as useEffect12, useId as useId15, useLayoutEffect as useLayoutEffect2, useMemo as useMemo3, useRef as useRef9, useState as useState15 } from "react";
+import { useCallback as useCallback8, useEffect as useEffect12, useId as useId15, useLayoutEffect as useLayoutEffect2, useMemo as useMemo3, useRef as useRef10, useState as useState16 } from "react";
 import {
   STN_DATE_PICKER_WEEKDAYS
 } from "@stn-uiux/pub-ui/data/stnDatePicker";
@@ -7187,7 +7283,7 @@ function sameStamp(a, b, withTime) {
   return a.getHours() === b.getHours() && a.getMinutes() === b.getMinutes() && a.getSeconds() === b.getSeconds();
 }
 function useDraftRange(value, open) {
-  const [draft, setDraft] = useState15(value);
+  const [draft, setDraft] = useState16(value);
   useEffect12(() => {
     if (open) setDraft(value);
   }, [open, value]);
@@ -7263,7 +7359,7 @@ function TimeList({
   stacked,
   onSelect
 }) {
-  const listRef = useRef9(null);
+  const listRef = useRef10(null);
   useLayoutEffect2(() => {
     const list = listRef.current;
     const scroll = list?.closest(".stn-scroll");
@@ -7338,8 +7434,8 @@ function StnDateRangePicker({
   const titleId = useId15();
   const pickerSize = normalizePickerSize(size);
   const [draft, setDraft] = useDraftRange(value, open);
-  const [hoverDay, setHoverDay] = useState15(null);
-  const [leftMonth, setLeftMonth] = useState15(() => startOfMonth(draft.start ?? draft.end ?? /* @__PURE__ */ new Date()));
+  const [hoverDay, setHoverDay] = useState16(null);
+  const [leftMonth, setLeftMonth] = useState16(() => startOfMonth(draft.start ?? draft.end ?? /* @__PURE__ */ new Date()));
   useEffect12(() => {
     if (!open) return;
     const anchor = value.start ?? value.end ?? /* @__PURE__ */ new Date();
@@ -7589,7 +7685,7 @@ function StnDateRangePicker({
 // src/components/datePicker/StnDateRangePickerField.tsx
 import { jsx as jsx52, jsxs as jsxs41 } from "react/jsx-runtime";
 function useControllableRange(controlled, defaultValue, onChange) {
-  const [internal, setInternal] = useState16(defaultValue);
+  const [internal, setInternal] = useState17(defaultValue);
   const value = controlled ?? internal;
   const setValue = useCallback9(
     (next) => {
@@ -7630,11 +7726,11 @@ function StnDateRangePickerField({
   const format = formatProp ?? (showTime ? formatStnDateRangeFieldValue2 : formatDateOnly);
   const [value, setValue] = useControllableRange(valueProp, defaultValue, onChange);
   const oneDay = mode === "single" && isOneCalendarDay(value.start, value.end);
-  const [open, setOpen] = useState16(false);
-  const [anchorRect, setAnchorRect] = useState16(null);
-  const rootRef = useRef10(null);
-  const triggerRef = useRef10(null);
-  const panelRef = useRef10(null);
+  const [open, setOpen] = useState17(false);
+  const [anchorRect, setAnchorRect] = useState17(null);
+  const rootRef = useRef11(null);
+  const triggerRef = useRef11(null);
+  const panelRef = useRef11(null);
   const pickerSize = size === "sm" || size === "s" ? "sm" : size === "lg" || size === "l" || size === "xl" ? "lg" : "md";
   const updateAnchor = useCallback9(() => {
     setAnchorRect(triggerRef.current?.getBoundingClientRect() ?? null);
@@ -8608,11 +8704,11 @@ function topologyShapePoints(shape, cx, cy, r) {
   return polygonPoints(cx, cy, r, 32, 0);
 }
 var TOPOLOGY_LINK_LABEL_SPEC = {
-  baseFontSize: 4.6,
-  minFontSize: 4,
-  maxFontSize: 5.2,
-  offsetY: 3.2,
-  haloStrokeWidth: 1.2
+  baseFontSize: 10,
+  minFontSize: 8.5,
+  maxFontSize: 11.5,
+  offsetY: 5.5,
+  haloStrokeWidth: 2.2
 };
 var TOPOLOGY_NODE_CURRENT_RING_SPEC = {
   circleOffset: 5.5,
@@ -9143,13 +9239,13 @@ StnTopologyRing.Node = StnTopologyRingNode;
 
 // src/components/topology/StnTopologyGraph.tsx
 import {
-  useState as useState17,
-  useRef as useRef11,
+  useState as useState18,
+  useRef as useRef12,
   useCallback as useCallback10,
   useEffect as useEffect14,
   useMemo as useMemo4,
   createContext as createContext6,
-  useContext as useContext6,
+  useContext as useContext7,
   Children as Children6,
   isValidElement as isValidElement9,
   forwardRef as forwardRef39,
@@ -9391,6 +9487,7 @@ function StnTopologyLinkGlyph({
   width,
   height,
   strokeWidth = 2.5,
+  dashed = false,
   className,
   style
 }) {
@@ -9399,7 +9496,7 @@ function StnTopologyLinkGlyph({
   const h = height ?? px;
   const halfW = w / 2;
   const halfH = h / 2;
-  const dashArray = variant === "dot" ? "2 2" : void 0;
+  const dashArray = dashed ? "3 3" : variant === "dot" ? "2 2" : void 0;
   return /* @__PURE__ */ jsx62(
     "svg",
     {
@@ -9517,7 +9614,7 @@ function project3DCoordinate(x, y, z, yaw, pitch, zoom) {
 }
 var StnTopologyGraphContext = createContext6(null);
 function useStnTopologyGraph() {
-  const ctx = useContext6(StnTopologyGraphContext);
+  const ctx = useContext7(StnTopologyGraphContext);
   if (!ctx) {
     throw new Error("useStnTopologyGraph must be used within <StnTopologyGraph>");
   }
@@ -9529,7 +9626,7 @@ function StnTopologyGraphModeToggle({
   className,
   style
 }) {
-  const ctx = useContext6(StnTopologyGraphContext);
+  const ctx = useContext7(StnTopologyGraphContext);
   const viewMode = ctx?.viewMode ?? "3D";
   const handleSwitchMode = ctx?.handleSwitchMode ?? (() => {
   });
@@ -9903,7 +10000,6 @@ function StnTopologyGraphViewport({ className, style, viewBox: customViewBox })
     zoom,
     fixedNodeSize,
     calibrateScreenPixels,
-    screenPixelsRatio = 1,
     dynamicViewBox,
     selectedId,
     onNodeClick,
@@ -9911,6 +10007,7 @@ function StnTopologyGraphViewport({ className, style, viewBox: customViewBox })
     onLinkClick,
     onLinkHover,
     linkLabelMode,
+    multiLinkMode,
     onCanvasClick,
     onBackgroundClick,
     handleNodeMouseDown,
@@ -9921,11 +10018,12 @@ function StnTopologyGraphViewport({ className, style, viewBox: customViewBox })
     renderNodeLabel,
     hoveredNodeId,
     setHoveredNodeId,
-    hasDraggedRef
+    hasDraggedRef,
+    pan
   } = useStnTopologyGraph();
-  const calibration = calibrateScreenPixels && screenPixelsRatio > 0 ? 1 / screenPixelsRatio : 1;
-  const activeViewBox = customViewBox ?? dynamicViewBox ?? "-250 -250 500 500";
-  const [hoveredLinkKey, setHoveredLinkKey] = useState17(null);
+  const calibration = 1;
+  const activeViewBox = customViewBox ?? dynamicViewBox ?? "-400 -300 800 600";
+  const [hoveredLinkKey, setHoveredLinkKey] = useState18(null);
   const isAnyLinkHovered = hoveredLinkKey !== null;
   return /* @__PURE__ */ jsxs50(
     "svg",
@@ -9944,430 +10042,472 @@ function StnTopologyGraphViewport({ className, style, viewBox: customViewBox })
           /* @__PURE__ */ jsx63("stop", { offset: "0%", stopColor: "color-mix(in srgb, var(--stn-primary) 70%, var(--stn-static-white))" }),
           /* @__PURE__ */ jsx63("stop", { offset: "100%", stopColor: "var(--stn-primary)" })
         ] }) }),
-        renderGridLines(),
-        /* @__PURE__ */ jsx63(
-          "g",
-          {
-            className: cn(
-              "stn-topology-links-group",
-              isAnyLinkHovered && "is-link-hovered",
-              `stn-topology-links-group--label-${linkLabelMode}`
-            ),
-            children: projectedLinks.map((link, idx) => {
-              if (!link.n1 || !link.n2) return null;
-              const { n1, n2 } = link;
-              const depthScale = 550 / (550 + link.avgDepth);
-              const baseOpacity = Math.max(0.65, Math.min(1, depthScale));
-              const opacity = resolveTopologyOpacity(link.opacity, baseOpacity);
-              const linkKey = String(link.id ?? `${link.source}-${link.target}-${idx}`);
-              const isThisLinkHovered = hoveredLinkKey === linkKey;
-              const effectiveLineOpacity = isThisLinkHovered ? 1 : opacity;
-              const isLabelVisible = linkLabelMode === "always" || linkLabelMode === "hover" && isAnyLinkHovered;
-              const isDot = link.variant === "dot";
-              const effectiveStatus = link.status ?? (isDot ? n1.status === "critical" || n2.status === "critical" ? "critical" : n1.status === "major" || n2.status === "major" ? "major" : n1.status === "minor" || n2.status === "minor" ? "minor" : n1.status === "warning" || n2.status === "warning" ? "warning" : void 0 : void 0);
-              const statusColor = effectiveStatus === "critical" ? "var(--stn-grade-critical)" : effectiveStatus === "major" ? "var(--stn-grade-major)" : effectiveStatus === "minor" ? "var(--stn-grade-minor)" : effectiveStatus === "warning" ? "var(--stn-grade-warning)" : effectiveStatus === "primary" || effectiveStatus === "point" ? "var(--stn-primary)" : null;
-              let dotElement = null;
-              if (isDot) {
-                const midSX = (n1.sx + n2.sx) / 2;
-                const midSY = (n1.sy + n2.sy) / 2;
-                const avgScale = n1 && n2 ? (n1.scale + n2.scale) / 2 : 1;
-                const dotRadius = fixedNodeSize ? 3 * calibration : Math.max(1.5, 3 * avgScale * calibration);
-                const dotFill = link.color ?? statusColor ?? "var(--stn-topology-node-normal)";
-                dotElement = /* @__PURE__ */ jsx63("circle", { cx: midSX, cy: midSY, r: dotRadius, fill: dotFill, opacity: effectiveLineOpacity });
-              }
-              const lineColor = link.color ?? (!isDot && statusColor ? statusColor : "var(--stn-topology-link-line)");
-              const effectiveStrokeWidth = resolveTopologyStrokeWidth(
-                link.strokeWidth,
-                depthScale,
-                zoom,
-                viewMode === "2D"
-              );
-              let labelElement = null;
-              if (link.label) {
-                const midX = (n1.sx + n2.sx) / 2;
-                const midY = (n1.sy + n2.sy) / 2;
-                const dx = n2.sx - n1.sx;
-                const dy = n2.sy - n1.sy;
-                const angleDeg = Math.atan2(dy, dx) * 180 / Math.PI;
-                let rotation = angleDeg;
-                if (rotation > 90) {
-                  rotation -= 180;
-                } else if (rotation < -90) {
-                  rotation += 180;
+        /* @__PURE__ */ jsxs50("g", { className: "stn-topology-viewport-pan", transform: `translate(${pan.x.toFixed(1)}, ${pan.y.toFixed(1)})`, children: [
+          renderGridLines(),
+          /* @__PURE__ */ jsx63(
+            "g",
+            {
+              className: cn(
+                "stn-topology-links-group",
+                isAnyLinkHovered && "is-link-hovered",
+                `stn-topology-links-group--label-${linkLabelMode}`
+              ),
+              children: projectedLinks.map((link, idx) => {
+                if (!link.n1 || !link.n2) return null;
+                const { n1, n2, multiLinkIndex = 0, multiLinkTotal = 1 } = link;
+                const depthScale = 550 / (550 + link.avgDepth);
+                const baseOpacity = Math.max(0.65, Math.min(1, depthScale));
+                const opacity = resolveTopologyOpacity(link.opacity, baseOpacity);
+                const linkKey = String(link.id ?? `${link.source}-${link.target}-${idx}`);
+                const isThisLinkHovered = hoveredLinkKey === linkKey;
+                const effectiveLineOpacity = isThisLinkHovered ? 1 : opacity;
+                const isLabelVisible = linkLabelMode === "always" || linkLabelMode === "hover" && isAnyLinkHovered;
+                const x1 = n1.sx;
+                const y1 = n1.sy;
+                const x2 = n2.sx;
+                const y2 = n2.sy;
+                const midX = (x1 + x2) / 2;
+                const midY = (y1 + y2) / 2;
+                const dx = x2 - x1;
+                const dy = y2 - y1;
+                const lineLength = Math.hypot(dx, dy);
+                let cx = midX;
+                let cy = midY;
+                let peakX = midX;
+                let peakY = midY;
+                let isCurved = false;
+                let lx1 = x1;
+                let ly1 = y1;
+                let lx2 = x2;
+                let ly2 = y2;
+                if (multiLinkTotal > 1 && lineLength > 0) {
+                  const nx = -dy / lineLength;
+                  const ny = dx / lineLength;
+                  const isCanonical = String(link.source) < String(link.target);
+                  const orientedNx = isCanonical ? nx : -nx;
+                  const orientedNy = isCanonical ? ny : -ny;
+                  if (multiLinkMode !== "parallel") {
+                    const baseArch = Math.min(36, Math.max(18, lineLength * 0.16));
+                    const step = multiLinkIndex - (multiLinkTotal - 1) / 2;
+                    const curveDistance = step * (multiLinkTotal === 2 ? baseArch * 2 : baseArch);
+                    if (Math.abs(curveDistance) > 0.5) {
+                      cx = midX + orientedNx * curveDistance;
+                      cy = midY + orientedNy * curveDistance;
+                      peakX = 0.5 * midX + 0.5 * cx;
+                      peakY = 0.5 * midY + 0.5 * cy;
+                      isCurved = true;
+                    }
+                  } else {
+                    const spacing = multiLinkTotal === 2 ? 8 : 7;
+                    const offsetDistance = (multiLinkIndex - (multiLinkTotal - 1) / 2) * spacing;
+                    const offsetX = orientedNx * offsetDistance;
+                    const offsetY = orientedNy * offsetDistance;
+                    lx1 = x1 + offsetX;
+                    ly1 = y1 + offsetY;
+                    lx2 = x2 + offsetX;
+                    ly2 = y2 + offsetY;
+                    peakX = (lx1 + lx2) / 2;
+                    peakY = (ly1 + ly2) / 2;
+                  }
+                }
+                const isDot = link.variant === "dot";
+                const effectiveStatus = link.status ?? (isDot ? n1.status === "critical" || n2.status === "critical" ? "critical" : n1.status === "major" || n2.status === "major" ? "major" : n1.status === "minor" || n2.status === "minor" ? "minor" : n1.status === "warning" || n2.status === "warning" ? "warning" : void 0 : void 0);
+                const statusColor = effectiveStatus === "critical" ? "var(--stn-grade-critical)" : effectiveStatus === "major" ? "var(--stn-grade-major)" : effectiveStatus === "minor" ? "var(--stn-grade-minor)" : effectiveStatus === "warning" ? "var(--stn-grade-warning)" : effectiveStatus === "primary" || effectiveStatus === "point" ? "var(--stn-primary)" : null;
+                let dotElement = null;
+                if (isDot) {
+                  const avgScale = n1 && n2 ? (n1.scale + n2.scale) / 2 : 1;
+                  const dotRadius = fixedNodeSize ? 3 * calibration : Math.max(1.5, 3 * avgScale * calibration);
+                  const dotFill = link.color ?? statusColor ?? "var(--stn-topology-node-normal)";
+                  dotElement = /* @__PURE__ */ jsx63("circle", { cx: peakX, cy: peakY, r: dotRadius, fill: dotFill, opacity: effectiveLineOpacity });
                 }
-                const offsetY = -(TOPOLOGY_LINK_LABEL_SPEC.offsetY + effectiveStrokeWidth / 2);
-                const fontSize = Math.max(
-                  TOPOLOGY_LINK_LABEL_SPEC.minFontSize,
-                  Math.min(TOPOLOGY_LINK_LABEL_SPEC.maxFontSize, TOPOLOGY_LINK_LABEL_SPEC.baseFontSize * depthScale)
+                const lineColor = link.color ?? (!isDot && statusColor ? statusColor : "var(--stn-topology-link-line)");
+                const effectiveStrokeWidth = resolveTopologyStrokeWidth(
+                  link.strokeWidth,
+                  depthScale,
+                  zoom,
+                  viewMode === "2D"
                 );
-                const labelColor = link.labelColor ?? "var(--stn-topology-link-label-fg, var(--stn-text-secondary))";
-                labelElement = /* @__PURE__ */ jsx63(
-                  "g",
-                  {
-                    className: "stn-topology-link__label",
-                    transform: `translate(${midX}, ${midY}) rotate(${rotation})`,
-                    opacity: isLabelVisible ? 1 : 0,
-                    children: /* @__PURE__ */ jsx63(
-                      "text",
-                      {
-                        x: 0,
-                        y: offsetY,
-                        textAnchor: "middle",
-                        dominantBaseline: "alphabetic",
-                        fill: labelColor,
-                        stroke: "var(--stn-topology-link-label-halo, var(--stn-elevation-surface-0))",
-                        strokeWidth: TOPOLOGY_LINK_LABEL_SPEC.haloStrokeWidth,
-                        paintOrder: "stroke",
-                        strokeLinejoin: "round",
-                        fontSize,
-                        fontWeight: 600,
-                        letterSpacing: "-0.2px",
-                        children: link.label
-                      }
-                    )
+                let labelElement = null;
+                if (link.label) {
+                  const angleDeg = Math.atan2(dy, dx) * 180 / Math.PI;
+                  let rotation = angleDeg;
+                  if (rotation > 90) {
+                    rotation -= 180;
+                  } else if (rotation < -90) {
+                    rotation += 180;
                   }
-                );
-              }
-              const isClickable = Boolean(onLinkClick);
-              return /* @__PURE__ */ jsxs50(
-                "g",
-                {
-                  className: cn(
-                    "stn-topology-link",
-                    isClickable && "stn-topology-link--clickable",
-                    isThisLinkHovered && "is-hovered"
-                  ),
-                  style: { cursor: isClickable ? "pointer" : void 0 },
-                  onMouseEnter: (e) => {
-                    setHoveredLinkKey(linkKey);
-                    onLinkHover?.(link, e);
-                  },
-                  onMouseLeave: (e) => {
-                    setHoveredLinkKey((prev) => prev === linkKey ? null : prev);
-                    onLinkHover?.(null, e);
-                  },
-                  onClick: (e) => {
-                    if (onLinkClick) {
-                      e.stopPropagation();
-                      onLinkClick(link, e);
-                    }
-                  },
-                  children: [
-                    /* @__PURE__ */ jsx63(
-                      "line",
-                      {
-                        x1: n1.sx,
-                        y1: n1.sy,
-                        x2: n2.sx,
-                        y2: n2.sy,
-                        stroke: "transparent",
-                        strokeWidth: Math.max(20, effectiveStrokeWidth + 16),
-                        pointerEvents: "stroke"
-                      }
-                    ),
-                    /* @__PURE__ */ jsx63(
-                      "line",
-                      {
-                        x1: n1.sx,
-                        y1: n1.sy,
-                        x2: n2.sx,
-                        y2: n2.sy,
-                        stroke: lineColor,
-                        strokeWidth: effectiveStrokeWidth,
-                        strokeDasharray: link.dashed ? "4 4" : void 0,
-                        opacity: effectiveLineOpacity,
-                        pointerEvents: "none"
-                      }
-                    ),
-                    dotElement,
-                    labelElement
-                  ]
-                },
-                `link-${idx}`
-              );
-            })
-          }
-        ),
-        /* @__PURE__ */ jsx63("g", { className: "stn-topology-nodes-group", children: sortedNodes.map((n) => {
-          const depthScale = 550 / (550 + n.depth);
-          const scale = fixedNodeSize ? calibration : Math.max(0.3, n.scale * calibration);
-          const baseOpacity = Math.max(0.75, Math.min(1, depthScale));
-          const opacity = resolveTopologyOpacity(n.opacity, baseOpacity);
-          const isSelected = (Array.isArray(selectedId) ? selectedId.some((sid) => String(sid) === String(n.id)) : selectedId !== void 0 && selectedId !== null && String(selectedId) === String(n.id)) || Boolean(n.isCurrent) || Boolean(n.isSelected);
-          const isCore = Boolean(n.isCore);
-          const isPrimary = n.status === "primary" || n.status === "point";
-          const isCritical = n.status === "critical";
-          const isWarning = n.status === "warning";
-          const isMajor = n.status === "major";
-          const isMinor = n.status === "minor";
-          const isNeutral = n.status === "neutral";
-          const isNormal = n.status === "normal";
-          const hasPulse = isCritical || Boolean(n.pulse);
-          const shape = n.shape ?? (isCore ? "diamond" : "circle");
-          const variant = n.variant ?? (isCore ? "combined" : "outline");
-          const statusColor = n.color ? n.color : isCritical ? "var(--stn-grade-critical)" : isMajor ? "var(--stn-grade-major)" : isMinor ? "var(--stn-grade-minor)" : isWarning ? "var(--stn-grade-warning)" : isPrimary || isCore ? "var(--stn-primary)" : isNormal || isNeutral ? "var(--stn-topology-node-normal)" : "var(--stn-topology-node-normal)";
-          const baseRadius = typeof n.size === "number" ? n.size : n.size && TOPOLOGY_NODE_SIZE_MAP[n.size] ? TOPOLOGY_NODE_SIZE_MAP[n.size] : isCore ? TOPOLOGY_NODE_SIZE_MAP.lg : TOPOLOGY_NODE_SIZE_MAP.md;
-          const r = baseRadius * scale;
-          const strokeWidth = calibrateScreenPixels ? Number((1.2 * calibration).toFixed(2)) : "var(--stn-topology-node-stroke, 1.2px)";
-          const rOuter = Math.max(baseRadius, (baseRadius + 2) * scale);
-          const pulseRing = hasPulse && /* @__PURE__ */ jsxs50("g", { children: [
-            /* @__PURE__ */ jsx63(
-              "circle",
-              {
-                cx: "0",
-                cy: "0",
-                r: rOuter,
-                fill: "none",
-                stroke: statusColor,
-                className: "stn-topology-pulse-ring-1"
-              }
-            ),
-            /* @__PURE__ */ jsx63(
-              "circle",
-              {
-                cx: "0",
-                cy: "0",
-                r: rOuter,
-                fill: "none",
-                stroke: statusColor,
-                className: "stn-topology-pulse-ring-2"
-              }
-            )
-          ] });
-          const currentRing = isSelected && renderCurrentNodeRing({ shape, r });
-          const glyph = render3DNodeGlyph({
-            shape,
-            variant,
-            r,
-            statusColor,
-            strokeWidth
-          });
-          let topBadgeElement = null;
-          const isTopBadge = Boolean(n.badge) && (n.badgePlacement ?? "top") === "top";
-          if (isTopBadge && n.badge) {
-            const badgeText = String(n.badge);
-            if (renderBadge) {
-              topBadgeElement = renderBadge(n, { r, position: "top", badgeText });
-            } else {
-              const badgeText2 = String(n.badge);
-              const bW = Math.max(140, badgeText2.length * 14 + 36);
-              const badgeScale = calibrateScreenPixels ? Number((0.95 * calibration).toFixed(2)) : fixedNodeSize ? 0.6 : 0.6 * Math.max(0.65, Math.min(1.4, depthScale));
-              const bH = Math.max(30, Math.round(26 * badgeScale));
-              const badgeHalfHeight = 18 * badgeScale / 2;
-              const posY = -r - 2.5 - badgeHalfHeight - bH / 2;
-              topBadgeElement = /* @__PURE__ */ jsx63(
-                "foreignObject",
-                {
-                  x: -bW / 2,
-                  y: posY,
-                  width: bW,
-                  height: bH,
-                  className: "stn-topology-node__badge-fo",
-                  children: /* @__PURE__ */ jsx63("div", { className: "stn-topology-node__badge-fo-inner", children: /* @__PURE__ */ jsx63(
-                    "div",
+                  const offsetY = -(TOPOLOGY_LINK_LABEL_SPEC.offsetY + effectiveStrokeWidth / 2);
+                  const baseFontSize = link.labelFontSize ?? TOPOLOGY_LINK_LABEL_SPEC.baseFontSize;
+                  const fontSize = Math.max(
+                    TOPOLOGY_LINK_LABEL_SPEC.minFontSize,
+                    Math.min(TOPOLOGY_LINK_LABEL_SPEC.maxFontSize, baseFontSize * depthScale)
+                  );
+                  const labelColor = link.labelColor ?? "var(--stn-topology-link-label-fg, var(--stn-text-secondary))";
+                  labelElement = /* @__PURE__ */ jsx63(
+                    "g",
                     {
-                      className: "stn-topology-node__badge-fo-scale",
-                      style: { transform: `scale(${badgeScale})` },
+                      className: "stn-topology-link__label",
+                      transform: `translate(${peakX}, ${peakY}) rotate(${rotation})`,
+                      opacity: isLabelVisible ? 1 : 0,
                       children: /* @__PURE__ */ jsx63(
-                        StnBadge,
+                        "text",
                         {
-                          color: n.badgeColor ?? "primary",
-                          appearance: n.badgeAppearance ?? "solid",
-                          badgeContent: badgeText2,
-                          ...n.badgeProps
+                          x: 0,
+                          y: offsetY,
+                          textAnchor: "middle",
+                          dominantBaseline: "alphabetic",
+                          fill: labelColor,
+                          stroke: "var(--stn-topology-link-label-halo, var(--stn-elevation-surface-0))",
+                          strokeWidth: TOPOLOGY_LINK_LABEL_SPEC.haloStrokeWidth,
+                          paintOrder: "stroke",
+                          strokeLinejoin: "round",
+                          fontSize,
+                          fontWeight: 600,
+                          letterSpacing: "-0.2px",
+                          children: link.label
                         }
                       )
                     }
-                  ) })
+                  );
                 }
-              );
-            }
-          }
-          let bottomLabelElement = null;
-          const isBottomVisible = showNodeLabels !== false && n.showLabel !== false && Boolean(n.label);
-          if (isBottomVisible && n.label) {
-            const labelText = String(n.label);
-            const mode = n.labelMode ?? nodeLabelMode ?? "badge";
-            const bottomY = r + 2.8;
-            if (renderNodeLabel) {
-              bottomLabelElement = renderNodeLabel(n, { r, label: labelText });
-            } else if (renderBadge && n.badgePlacement === "bottom") {
-              bottomLabelElement = renderBadge(n, { r, position: "bottom", badgeText: labelText });
-            } else if (mode === "badge") {
-              const bW = Math.max(160, Math.min(360, labelText.length * 12 + 40));
-              const badgeScale = calibrateScreenPixels ? Number((0.95 * calibration).toFixed(2)) : fixedNodeSize ? 0.6 : 0.6 * Math.max(0.65, Math.min(1.4, depthScale));
-              const bH = Math.max(30, Math.round(24 * badgeScale));
-              const badgeHalfHeight = 16 * badgeScale / 2;
-              const posY = r + 2.5 + badgeHalfHeight - bH / 2;
-              bottomLabelElement = /* @__PURE__ */ jsx63(
-                "foreignObject",
-                {
-                  x: -bW / 2,
-                  y: posY,
-                  width: bW,
-                  height: bH,
-                  className: "stn-topology-node__badge-fo",
-                  children: /* @__PURE__ */ jsx63("div", { className: "stn-topology-node__badge-fo-inner", children: /* @__PURE__ */ jsx63(
-                    "div",
-                    {
-                      className: "stn-topology-node__badge-fo-scale",
-                      style: { transform: `scale(${badgeScale})` },
-                      children: /* @__PURE__ */ jsx63(
-                        StnBadge,
+                const pathD = isCurved ? `M ${x1.toFixed(1)} ${y1.toFixed(1)} Q ${cx.toFixed(1)} ${cy.toFixed(1)} ${x2.toFixed(1)} ${y2.toFixed(1)}` : `M ${lx1.toFixed(1)} ${ly1.toFixed(1)} L ${lx2.toFixed(1)} ${ly2.toFixed(1)}`;
+                const isClickable = Boolean(onLinkClick);
+                return /* @__PURE__ */ jsxs50(
+                  "g",
+                  {
+                    className: cn(
+                      "stn-topology-link",
+                      isClickable && "stn-topology-link--clickable",
+                      isThisLinkHovered && "is-hovered"
+                    ),
+                    style: { cursor: isClickable ? "pointer" : void 0 },
+                    onMouseEnter: (e) => {
+                      setHoveredLinkKey(linkKey);
+                      onLinkHover?.(link, e);
+                    },
+                    onMouseLeave: (e) => {
+                      setHoveredLinkKey((prev) => prev === linkKey ? null : prev);
+                      onLinkHover?.(null, e);
+                    },
+                    onClick: (e) => {
+                      if (onLinkClick) {
+                        e.stopPropagation();
+                        onLinkClick(link, e);
+                      }
+                    },
+                    children: [
+                      /* @__PURE__ */ jsx63(
+                        "path",
                         {
-                          color: n.labelBadgeColor ?? "neutral",
-                          appearance: n.labelBadgeAppearance ?? "subtle",
-                          badgeContent: labelText,
-                          className: cn("stn-topology-node__label-badge", n.labelBadgeProps?.className),
-                          ...n.labelBadgeProps
+                          d: pathD,
+                          fill: "none",
+                          stroke: "transparent",
+                          strokeWidth: Math.max(20, effectiveStrokeWidth + 16),
+                          pointerEvents: "stroke"
                         }
-                      )
-                    }
-                  ) })
-                }
-              );
-            } else {
-              const plainFontSize = calibrateScreenPixels ? Number((9.5 * calibration).toFixed(1)) : fixedNodeSize ? TOPOLOGY_LINK_LABEL_SPEC.baseFontSize : Number((TOPOLOGY_LINK_LABEL_SPEC.baseFontSize * Math.max(0.65, Math.min(1.4, depthScale))).toFixed(1));
-              bottomLabelElement = /* @__PURE__ */ jsx63("g", { className: "stn-topology-node__bottom-label stn-topology-node__bottom-label--plain", transform: `translate(0, ${bottomY})`, children: /* @__PURE__ */ jsx63(
-                "text",
-                {
-                  x: 0,
-                  y: 4.5,
-                  textAnchor: "middle",
-                  dominantBaseline: "middle",
-                  fill: "var(--stn-topology-node-label-fg, var(--stn-text-primary))",
-                  stroke: "var(--stn-topology-node-label-halo, var(--stn-elevation-surface-0))",
-                  strokeWidth: TOPOLOGY_LINK_LABEL_SPEC.haloStrokeWidth,
-                  paintOrder: "stroke",
-                  strokeLinejoin: "round",
-                  fontSize: plainFontSize,
-                  fontWeight: 600,
-                  letterSpacing: "-0.2px",
-                  children: labelText
-                }
-              ) });
+                      ),
+                      /* @__PURE__ */ jsx63(
+                        "path",
+                        {
+                          d: pathD,
+                          fill: "none",
+                          stroke: lineColor,
+                          strokeWidth: effectiveStrokeWidth,
+                          strokeDasharray: link.dashed ? "4 4" : void 0,
+                          opacity: effectiveLineOpacity,
+                          pointerEvents: "none"
+                        }
+                      ),
+                      dotElement,
+                      labelElement
+                    ]
+                  },
+                  `link-${idx}`
+                );
+              })
             }
-          }
-          const nodeContent = /* @__PURE__ */ jsxs50("g", { children: [
-            currentRing,
-            pulseRing,
-            glyph,
-            topBadgeElement,
-            bottomLabelElement
-          ] });
-          return /* @__PURE__ */ jsx63(
-            "g",
-            {
-              className: cn("stn-topology-node", isSelected && "selected", isSelected && "is-current"),
-              transform: `translate(${n.sx}, ${n.sy})`,
-              opacity,
-              style: { cursor: "pointer" },
-              onMouseDown: (e) => handleNodeMouseDown(e, n.id),
-              onClick: (e) => {
-                e.stopPropagation();
-                if (hasDraggedRef.current) {
-                  return;
-                }
-                onNodeClick?.(n, e);
-              },
-              onContextMenu: (e) => {
-                if (onNodeContextMenu) {
-                  e.preventDefault();
-                  e.stopPropagation();
-                  onNodeContextMenu(n, e);
+          ),
+          /* @__PURE__ */ jsx63("g", { className: "stn-topology-nodes-group", children: sortedNodes.map((n) => {
+            const depthScale = 550 / (550 + n.depth);
+            const scale = fixedNodeSize ? calibration : Math.max(0.3, n.scale * calibration);
+            const baseOpacity = Math.max(0.75, Math.min(1, depthScale));
+            const opacity = resolveTopologyOpacity(n.opacity, baseOpacity);
+            const isSelected = (Array.isArray(selectedId) ? selectedId.some((sid) => String(sid) === String(n.id)) : selectedId !== void 0 && selectedId !== null && String(selectedId) === String(n.id)) || Boolean(n.isCurrent) || Boolean(n.isSelected);
+            const isCore = Boolean(n.isCore);
+            const isPrimary = n.status === "primary" || n.status === "point";
+            const isCritical = n.status === "critical";
+            const isWarning = n.status === "warning";
+            const isMajor = n.status === "major";
+            const isMinor = n.status === "minor";
+            const isNeutral = n.status === "neutral";
+            const isNormal = n.status === "normal";
+            const hasPulse = isCritical || Boolean(n.pulse);
+            const shape = n.shape ?? (isCore ? "diamond" : "circle");
+            const variant = n.variant ?? (isCore ? "combined" : "outline");
+            const statusColor = n.color ? n.color : isCritical ? "var(--stn-grade-critical)" : isMajor ? "var(--stn-grade-major)" : isMinor ? "var(--stn-grade-minor)" : isWarning ? "var(--stn-grade-warning)" : isPrimary || isCore ? "var(--stn-primary)" : isNormal || isNeutral ? "var(--stn-topology-node-normal)" : "var(--stn-topology-node-normal)";
+            const baseRadius = typeof n.size === "number" ? n.size : n.size && TOPOLOGY_NODE_SIZE_MAP[n.size] ? TOPOLOGY_NODE_SIZE_MAP[n.size] : isCore ? TOPOLOGY_NODE_SIZE_MAP.lg : TOPOLOGY_NODE_SIZE_MAP.md;
+            const r = baseRadius * scale;
+            const strokeWidth = calibrateScreenPixels ? Number((1.2 * calibration).toFixed(2)) : "var(--stn-topology-node-stroke, 1.2px)";
+            const rOuter = Math.max(baseRadius, (baseRadius + 2) * scale);
+            const pulseRing = hasPulse && /* @__PURE__ */ jsxs50("g", { children: [
+              /* @__PURE__ */ jsx63(
+                "circle",
+                {
+                  cx: "0",
+                  cy: "0",
+                  r: rOuter,
+                  fill: "none",
+                  stroke: statusColor,
+                  className: "stn-topology-pulse-ring-1"
                 }
-              },
-              onMouseEnter: () => {
-                setHoveredNodeId(n.id);
-              },
-              onMouseLeave: () => {
-                setHoveredNodeId(null);
-              },
-              children: nodeContent
-            },
-            n.id
-          );
-        }) }),
-        /* @__PURE__ */ jsx63("g", { className: "stn-topology-tooltips-group", style: { pointerEvents: "none", userSelect: "none" }, children: sortedNodes.map((n) => {
-          const isTooltipVisible = Boolean(showTooltips) || hoveredNodeId === n.id;
-          if (!isTooltipVisible || !n.label) return null;
-          const depthScale = 550 / (550 + n.depth);
-          const scale = fixedNodeSize ? calibration : Math.max(0.4, n.scale * calibration);
-          const baseRadius = typeof n.size === "number" ? n.size : n.size && TOPOLOGY_NODE_SIZE_MAP[n.size] ? TOPOLOGY_NODE_SIZE_MAP[n.size] : Boolean(n.isCore) ? TOPOLOGY_NODE_SIZE_MAP.lg : TOPOLOGY_NODE_SIZE_MAP.md;
-          const r = baseRadius * scale;
-          const isCritical = n.status === "critical";
-          const isWarning = n.status === "warning";
-          const isMajor = n.status === "major";
-          const isMinor = n.status === "minor";
-          const isCore = Boolean(n.isCore);
-          const tone = isCore ? "primary" : isCritical || Boolean(n.pulse) ? "critical" : isWarning ? "warning" : isMajor ? "major" : isMinor ? "minor" : "neutral";
-          const tooltipBg = tone === "primary" ? "var(--stn-primary)" : tone === "critical" ? "var(--stn-grade-critical)" : tone === "warning" ? "var(--stn-grade-warning)" : tone === "major" ? "var(--stn-grade-major)" : tone === "minor" ? "var(--stn-grade-minor)" : "var(--stn-tooltip-bg-neutral)";
-          const tooltipFg = "var(--stn-tooltip-fg-neutral)";
-          const hasBadge = Boolean(n.badge) && (n.badgePlacement ?? "top") === "top";
-          const topBadgeScale = calibrateScreenPixels ? Number((0.95 * calibration).toFixed(2)) : fixedNodeSize ? 0.6 : 0.6 * Math.max(0.65, Math.min(1.4, depthScale));
-          const badgeHeight = hasBadge ? 18 * topBadgeScale : 0;
-          const tooltipScale = calibrateScreenPixels ? calibration : fixedNodeSize ? 1 : Math.max(0.65, Math.min(1.4, depthScale));
-          const tooltipH = 18 * tooltipScale;
-          const arrowH = 3.5 * tooltipScale;
-          const arrowW = 7 * tooltipScale;
-          const gap = 3.5 * tooltipScale;
-          const tooltipBoxY = -r - badgeHeight - gap - arrowH - tooltipH;
-          const charCount = n.label.length;
-          const tooltipFontSize = Number((10 * tooltipScale).toFixed(1));
-          const tooltipW = Math.max(32 * tooltipScale, charCount * 6.8 * tooltipScale + 16 * tooltipScale);
-          const rx = 3 * tooltipScale;
-          const nodeOpacity = resolveTopologyOpacity(n.opacity, Math.max(0.75, Math.min(1, depthScale)));
-          return /* @__PURE__ */ jsx63(
-            "g",
-            {
-              className: cn("stn-topology-node-tooltip", hoveredNodeId === n.id && "is-hovered"),
-              transform: `translate(${n.sx}, ${n.sy})`,
-              opacity: nodeOpacity,
-              children: /* @__PURE__ */ jsxs50(
-                "g",
+              ),
+              /* @__PURE__ */ jsx63(
+                "circle",
                 {
-                  className: "stn-topology-node-tooltip__box",
-                  transform: `translate(0, ${tooltipBoxY})`,
-                  children: [
-                    /* @__PURE__ */ jsx63(
-                      "rect",
-                      {
-                        x: -tooltipW / 2,
-                        y: 0,
-                        width: tooltipW,
-                        height: tooltipH,
-                        rx,
-                        fill: tooltipBg
-                      }
-                    ),
-                    /* @__PURE__ */ jsx63(
-                      "polygon",
+                  cx: "0",
+                  cy: "0",
+                  r: rOuter,
+                  fill: "none",
+                  stroke: statusColor,
+                  className: "stn-topology-pulse-ring-2"
+                }
+              )
+            ] });
+            const currentRing = isSelected && renderCurrentNodeRing({ shape, r });
+            const glyph = render3DNodeGlyph({
+              shape,
+              variant,
+              r,
+              statusColor,
+              strokeWidth
+            });
+            let topBadgeElement = null;
+            const isTopBadge = Boolean(n.badge) && (n.badgePlacement ?? "top") === "top";
+            if (isTopBadge && n.badge) {
+              const badgeText = String(n.badge);
+              if (renderBadge) {
+                topBadgeElement = renderBadge(n, { r, position: "top", badgeText });
+              } else {
+                const badgeText2 = String(n.badge);
+                const bW = Math.max(140, badgeText2.length * 14 + 36);
+                const badgeScale = calibrateScreenPixels ? Number((0.95 * calibration).toFixed(2)) : fixedNodeSize ? 0.6 : 0.6 * Math.max(0.65, Math.min(1.4, depthScale));
+                const bH = Math.max(30, Math.round(26 * badgeScale));
+                const badgeHalfHeight = 18 * badgeScale / 2;
+                const posY = -r - 2.5 - badgeHalfHeight - bH / 2;
+                topBadgeElement = /* @__PURE__ */ jsx63(
+                  "foreignObject",
+                  {
+                    x: -bW / 2,
+                    y: posY,
+                    width: bW,
+                    height: bH,
+                    className: "stn-topology-node__badge-fo",
+                    children: /* @__PURE__ */ jsx63("div", { className: "stn-topology-node__badge-fo-inner", children: /* @__PURE__ */ jsx63(
+                      "div",
                       {
-                        points: `-${arrowW / 2},${tooltipH} ${arrowW / 2},${tooltipH} 0,${tooltipH + arrowH}`,
-                        fill: tooltipBg
+                        className: "stn-topology-node__badge-fo-scale",
+                        style: { transform: `scale(${badgeScale})` },
+                        children: /* @__PURE__ */ jsx63(
+                          StnBadge,
+                          {
+                            color: n.badgeColor ?? "primary",
+                            appearance: n.badgeAppearance ?? "solid",
+                            badgeContent: badgeText2,
+                            ...n.badgeProps
+                          }
+                        )
                       }
-                    ),
-                    /* @__PURE__ */ jsx63(
-                      "text",
+                    ) })
+                  }
+                );
+              }
+            }
+            let bottomLabelElement = null;
+            const isBottomVisible = showNodeLabels !== false && n.showLabel !== false && Boolean(n.label);
+            if (isBottomVisible && n.label) {
+              const labelText = String(n.label);
+              const mode = n.labelMode ?? nodeLabelMode ?? "badge";
+              const bottomY = r + 2.8;
+              if (renderNodeLabel) {
+                bottomLabelElement = renderNodeLabel(n, { r, label: labelText });
+              } else if (renderBadge && n.badgePlacement === "bottom") {
+                bottomLabelElement = renderBadge(n, { r, position: "bottom", badgeText: labelText });
+              } else if (mode === "badge") {
+                const bW = Math.max(160, Math.min(360, labelText.length * 12 + 40));
+                const badgeScale = calibrateScreenPixels ? Number((0.95 * calibration).toFixed(2)) : fixedNodeSize ? 0.6 : 0.6 * Math.max(0.65, Math.min(1.4, depthScale));
+                const bH = Math.max(30, Math.round(24 * badgeScale));
+                const badgeHalfHeight = 16 * badgeScale / 2;
+                const posY = r + 2.5 + badgeHalfHeight - bH / 2;
+                bottomLabelElement = /* @__PURE__ */ jsx63(
+                  "foreignObject",
+                  {
+                    x: -bW / 2,
+                    y: posY,
+                    width: bW,
+                    height: bH,
+                    className: "stn-topology-node__badge-fo",
+                    children: /* @__PURE__ */ jsx63("div", { className: "stn-topology-node__badge-fo-inner", children: /* @__PURE__ */ jsx63(
+                      "div",
                       {
-                        x: 0,
-                        y: tooltipH / 2 + 0.3,
-                        textAnchor: "middle",
-                        dominantBaseline: "central",
-                        fill: tooltipFg,
-                        fontSize: tooltipFontSize,
-                        fontWeight: 600,
-                        letterSpacing: "-0.1px",
-                        children: n.label
+                        className: "stn-topology-node__badge-fo-scale",
+                        style: { transform: `scale(${badgeScale})` },
+                        children: /* @__PURE__ */ jsx63(
+                          StnBadge,
+                          {
+                            color: n.labelBadgeColor ?? "neutral",
+                            appearance: n.labelBadgeAppearance ?? "subtle",
+                            badgeContent: labelText,
+                            className: cn("stn-topology-node__label-badge", n.labelBadgeProps?.className),
+                            ...n.labelBadgeProps
+                          }
+                        )
                       }
-                    )
-                  ]
-                }
-              )
-            },
-            `tooltip-${n.id}`
-          );
-        }) })
+                    ) })
+                  }
+                );
+              } else {
+                const plainFontSize = calibrateScreenPixels ? Number((9.5 * calibration).toFixed(1)) : fixedNodeSize ? TOPOLOGY_LINK_LABEL_SPEC.baseFontSize : Number((TOPOLOGY_LINK_LABEL_SPEC.baseFontSize * Math.max(0.65, Math.min(1.4, depthScale))).toFixed(1));
+                bottomLabelElement = /* @__PURE__ */ jsx63("g", { className: "stn-topology-node__bottom-label stn-topology-node__bottom-label--plain", transform: `translate(0, ${bottomY})`, children: /* @__PURE__ */ jsx63(
+                  "text",
+                  {
+                    x: 0,
+                    y: 4.5,
+                    textAnchor: "middle",
+                    dominantBaseline: "middle",
+                    fill: "var(--stn-topology-node-label-fg, var(--stn-text-primary))",
+                    stroke: "var(--stn-topology-node-label-halo, var(--stn-elevation-surface-0))",
+                    strokeWidth: TOPOLOGY_LINK_LABEL_SPEC.haloStrokeWidth,
+                    paintOrder: "stroke",
+                    strokeLinejoin: "round",
+                    fontSize: plainFontSize,
+                    fontWeight: 600,
+                    letterSpacing: "-0.2px",
+                    children: labelText
+                  }
+                ) });
+              }
+            }
+            const nodeContent = /* @__PURE__ */ jsxs50("g", { children: [
+              currentRing,
+              pulseRing,
+              glyph,
+              topBadgeElement,
+              bottomLabelElement
+            ] });
+            return /* @__PURE__ */ jsx63(
+              "g",
+              {
+                className: cn("stn-topology-node", isSelected && "selected", isSelected && "is-current"),
+                transform: `translate(${n.sx}, ${n.sy})`,
+                opacity,
+                style: { cursor: "pointer" },
+                onMouseDown: (e) => handleNodeMouseDown(e, n.id),
+                onClick: (e) => {
+                  e.stopPropagation();
+                  if (hasDraggedRef.current) {
+                    return;
+                  }
+                  onNodeClick?.(n, e);
+                },
+                onContextMenu: (e) => {
+                  if (onNodeContextMenu) {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    onNodeContextMenu(n, e);
+                  }
+                },
+                onMouseEnter: () => {
+                  setHoveredNodeId(n.id);
+                },
+                onMouseLeave: () => {
+                  setHoveredNodeId(null);
+                },
+                children: nodeContent
+              },
+              n.id
+            );
+          }) }),
+          /* @__PURE__ */ jsx63("g", { className: "stn-topology-tooltips-group", style: { pointerEvents: "none", userSelect: "none" }, children: sortedNodes.map((n) => {
+            const isTooltipVisible = Boolean(showTooltips) || hoveredNodeId === n.id;
+            if (!isTooltipVisible || !n.label) return null;
+            const depthScale = 550 / (550 + n.depth);
+            const scale = fixedNodeSize ? calibration : Math.max(0.4, n.scale * calibration);
+            const baseRadius = typeof n.size === "number" ? n.size : n.size && TOPOLOGY_NODE_SIZE_MAP[n.size] ? TOPOLOGY_NODE_SIZE_MAP[n.size] : Boolean(n.isCore) ? TOPOLOGY_NODE_SIZE_MAP.lg : TOPOLOGY_NODE_SIZE_MAP.md;
+            const r = baseRadius * scale;
+            const isCritical = n.status === "critical";
+            const isWarning = n.status === "warning";
+            const isMajor = n.status === "major";
+            const isMinor = n.status === "minor";
+            const isCore = Boolean(n.isCore);
+            const tone = isCore ? "primary" : isCritical || Boolean(n.pulse) ? "critical" : isWarning ? "warning" : isMajor ? "major" : isMinor ? "minor" : "neutral";
+            const tooltipBg = tone === "primary" ? "var(--stn-primary)" : tone === "critical" ? "var(--stn-grade-critical)" : tone === "warning" ? "var(--stn-grade-warning)" : tone === "major" ? "var(--stn-grade-major)" : tone === "minor" ? "var(--stn-grade-minor)" : "var(--stn-tooltip-bg-neutral)";
+            const tooltipFg = "var(--stn-tooltip-fg-neutral)";
+            const hasBadge = Boolean(n.badge) && (n.badgePlacement ?? "top") === "top";
+            const topBadgeScale = calibrateScreenPixels ? Number((0.95 * calibration).toFixed(2)) : fixedNodeSize ? 0.6 : 0.6 * Math.max(0.65, Math.min(1.4, depthScale));
+            const badgeHeight = hasBadge ? 18 * topBadgeScale : 0;
+            const tooltipScale = calibrateScreenPixels ? calibration : fixedNodeSize ? 1 : Math.max(0.65, Math.min(1.4, depthScale));
+            const tooltipH = 18 * tooltipScale;
+            const arrowH = 3.5 * tooltipScale;
+            const arrowW = 7 * tooltipScale;
+            const gap = 3.5 * tooltipScale;
+            const tooltipBoxY = -r - badgeHeight - gap - arrowH - tooltipH;
+            const charCount = n.label.length;
+            const tooltipFontSize = Number((10 * tooltipScale).toFixed(1));
+            const tooltipW = Math.max(32 * tooltipScale, charCount * 6.8 * tooltipScale + 16 * tooltipScale);
+            const rx = 3 * tooltipScale;
+            const nodeOpacity = resolveTopologyOpacity(n.opacity, Math.max(0.75, Math.min(1, depthScale)));
+            return /* @__PURE__ */ jsx63(
+              "g",
+              {
+                className: cn("stn-topology-node-tooltip", hoveredNodeId === n.id && "is-hovered"),
+                transform: `translate(${n.sx}, ${n.sy})`,
+                opacity: nodeOpacity,
+                children: /* @__PURE__ */ jsxs50(
+                  "g",
+                  {
+                    className: "stn-topology-node-tooltip__box",
+                    transform: `translate(0, ${tooltipBoxY})`,
+                    children: [
+                      /* @__PURE__ */ jsx63(
+                        "rect",
+                        {
+                          x: -tooltipW / 2,
+                          y: 0,
+                          width: tooltipW,
+                          height: tooltipH,
+                          rx,
+                          fill: tooltipBg
+                        }
+                      ),
+                      /* @__PURE__ */ jsx63(
+                        "polygon",
+                        {
+                          points: `-${arrowW / 2},${tooltipH} ${arrowW / 2},${tooltipH} 0,${tooltipH + arrowH}`,
+                          fill: tooltipBg
+                        }
+                      ),
+                      /* @__PURE__ */ jsx63(
+                        "text",
+                        {
+                          x: 0,
+                          y: tooltipH / 2 + 0.3,
+                          textAnchor: "middle",
+                          dominantBaseline: "central",
+                          fill: tooltipFg,
+                          fontSize: tooltipFontSize,
+                          fontWeight: 600,
+                          letterSpacing: "-0.1px",
+                          children: n.label
+                        }
+                      )
+                    ]
+                  }
+                )
+              },
+              `tooltip-${n.id}`
+            );
+          }) })
+        ] })
       ]
     }
   );
@@ -10385,6 +10525,9 @@ var StnTopologyGraphInternal = forwardRef39(
     mode: modeProp,
     defaultMode = "2D",
     onModeChange,
+    panOnDrag = true,
+    initialPan = { x: 0, y: 0 },
+    onPanChange,
     showModeToggle = true,
     showToolbar = true,
     showMinimap = false,
@@ -10395,6 +10538,7 @@ var StnTopologyGraphInternal = forwardRef39(
     showNodeLabels = true,
     nodeLabelMode = "badge",
     linkLabelMode = "hover",
+    multiLinkMode = "curved",
     onLinkHover,
     useHtmlBadge = true,
     renderBadge,
@@ -10443,86 +10587,78 @@ var StnTopologyGraphInternal = forwardRef39(
       [declarativeLinks, links]
     );
     const isModeControlled = modeProp !== void 0;
-    const [internalMode, setInternalMode] = useState17(defaultMode);
+    const [internalMode, setInternalMode] = useState18(defaultMode);
     const viewMode = isModeControlled ? modeProp : internalMode;
-    const [pitch, setPitch] = useState17(viewMode === "2D" ? 0 : initialPitch);
-    const [yaw, setYaw] = useState17(viewMode === "2D" ? 0 : initialYaw);
-    const [zoom, setZoom] = useState17(initialZoom);
-    const [projectionType, setProjectionType] = useState17("\uAD6C\uBA74");
-    const [isMinimapOpen, setIsMinimapOpen] = useState17(true);
-    const [nodeList, setNodeList] = useState17(effectiveNodes);
-    const [hoveredNodeId, setHoveredNodeId] = useState17(null);
-    const [tooltip, setTooltip] = useState17({
+    const [pitch, setPitch] = useState18(viewMode === "2D" ? 0 : initialPitch);
+    const [yaw, setYaw] = useState18(viewMode === "2D" ? 0 : initialYaw);
+    const [zoom, setZoom] = useState18(initialZoom);
+    const [projectionType, setProjectionType] = useState18("\uAD6C\uBA74");
+    const [isMinimapOpen, setIsMinimapOpen] = useState18(true);
+    const [nodeList, setNodeList] = useState18(effectiveNodes);
+    const [hoveredNodeId, setHoveredNodeId] = useState18(null);
+    const [tooltip, setTooltip] = useState18({
       visible: false,
       x: 0,
       y: 0,
       text: "",
       tone: "neutral"
     });
-    const containerRef = useRef11(null);
-    const isOrbitingRef = useRef11(false);
-    const isDraggingNodeRef = useRef11(false);
-    const draggedNodeIdRef = useRef11(null);
-    const lastMousePosRef = useRef11({ x: 0, y: 0 });
-    const viewModeRef = useRef11(viewMode);
+    const containerRef = useRef12(null);
+    const isOrbitingRef = useRef12(false);
+    const isDraggingNodeRef = useRef12(false);
+    const draggedNodeIdRef = useRef12(null);
+    const lastMousePosRef = useRef12({ x: 0, y: 0 });
+    const [pan, setPan] = useState18(initialPan ?? { x: 0, y: 0 });
+    const panRef = useRef12(pan);
+    panRef.current = pan;
+    const panOnDragRef = useRef12(panOnDrag);
+    panOnDragRef.current = panOnDrag;
+    const [isPanning, setIsPanning] = useState18(false);
+    const isPanningRef = useRef12(false);
+    const viewModeRef = useRef12(viewMode);
     viewModeRef.current = viewMode;
-    const pitchRef = useRef11(pitch);
+    const pitchRef = useRef12(pitch);
     pitchRef.current = pitch;
-    const yawRef = useRef11(yaw);
+    const yawRef = useRef12(yaw);
     yawRef.current = yaw;
-    const zoomRef = useRef11(zoom);
+    const zoomRef = useRef12(zoom);
     zoomRef.current = zoom;
-    const [containerDimensions, setContainerDimensions] = useState17({
-      width: 500,
-      height: 500
+    const [containerDimensions, setContainerDimensions] = useState18({
+      width: 800,
+      height: 600
     });
-    const [screenPixelsRatio, setScreenPixelsRatio] = useState17(1);
+    const [screenPixelsRatio] = useState18(1);
     useEffect14(() => {
       const container = containerRef.current;
       if (!container) return;
-      const updateDimensionsAndScale = () => {
+      const updateDimensions = () => {
         const rect = container.getBoundingClientRect();
-        if (rect.width > 0 && rect.height > 0) {
-          setContainerDimensions({ width: rect.width, height: rect.height });
-        }
-        if (calibrateScreenPixels) {
-          const svg = container.querySelector("svg.stn-topology-graph__svg");
-          const ctm = svg?.getScreenCTM();
-          if (ctm && ctm.a > 0) {
-            setScreenPixelsRatio(ctm.a);
-          } else if (rect.width > 0 && rect.height > 0) {
-            const minDim = Math.min(rect.width, rect.height);
-            setScreenPixelsRatio(minDim / 500);
-          }
+        if (rect.width >= 50 && rect.height >= 50) {
+          setContainerDimensions((prev) => {
+            if (Math.abs(prev.width - rect.width) < 1 && Math.abs(prev.height - rect.height) < 1) {
+              return prev;
+            }
+            return { width: Math.round(rect.width), height: Math.round(rect.height) };
+          });
         }
       };
-      updateDimensionsAndScale();
+      updateDimensions();
       const ro = new ResizeObserver(() => {
-        updateDimensionsAndScale();
+        updateDimensions();
       });
       ro.observe(container);
-      window.addEventListener("resize", updateDimensionsAndScale);
+      window.addEventListener("resize", updateDimensions);
       return () => {
         ro.disconnect();
-        window.removeEventListener("resize", updateDimensionsAndScale);
+        window.removeEventListener("resize", updateDimensions);
       };
-    }, [calibrateScreenPixels]);
+    }, []);
     const dynamicViewBox = useMemo4(() => {
-      const { width, height: height2 } = containerDimensions;
-      if (width <= 0 || height2 <= 0) return "-250 -250 500 500";
-      const aspect = width / height2;
-      let vWidth = 500;
-      let vHeight = 500;
-      if (aspect >= 1) {
-        vWidth = 500 * aspect;
-        vHeight = 500;
-      } else {
-        vWidth = 500;
-        vHeight = 500 / aspect;
-      }
-      const minX = -vWidth / 2;
-      const minY = -vHeight / 2;
-      return `${minX.toFixed(1)} ${minY.toFixed(1)} ${vWidth.toFixed(1)} ${vHeight.toFixed(1)}`;
+      const width = containerDimensions.width > 0 ? containerDimensions.width : 800;
+      const height2 = containerDimensions.height > 0 ? containerDimensions.height : 600;
+      const minX = -width / 2;
+      const minY = -height2 / 2;
+      return `${minX.toFixed(1)} ${minY.toFixed(1)} ${width.toFixed(1)} ${height2.toFixed(1)}`;
     }, [containerDimensions]);
     useEffect14(() => {
       setNodeList((prev) => {
@@ -10574,12 +10710,16 @@ var StnTopologyGraphInternal = forwardRef39(
       }
     }, [isModeControlled, modeProp, initialPitch, initialYaw]);
     const handleResetWorld = useCallback10(() => {
-      handleSwitchMode("3D");
-      setPitch(initialPitch);
-      setYaw(initialYaw);
+      if (!isModeControlled) {
+        handleSwitchMode(defaultMode);
+      }
+      setPitch(viewMode === "2D" ? 0 : initialPitch);
+      setYaw(viewMode === "2D" ? 0 : initialYaw);
       setZoom(initialZoom);
+      setPan({ x: 0, y: 0 });
+      onPanChange?.({ x: 0, y: 0 });
       setNodeList(effectiveNodes);
-    }, [handleSwitchMode, initialPitch, initialYaw, initialZoom, effectiveNodes]);
+    }, [isModeControlled, handleSwitchMode, defaultMode, viewMode, initialPitch, initialYaw, initialZoom, effectiveNodes, onPanChange]);
     const handleZoom = useCallback10((factor) => {
       setZoom((prev) => Math.max(0.3, Math.min(3.5, prev * factor)));
     }, []);
@@ -10604,18 +10744,32 @@ var StnTopologyGraphInternal = forwardRef39(
         reset: handleResetWorld,
         toggleFullscreen: handleToggleFullscreen,
         switchMode: handleSwitchMode,
+        pan,
+        setPan,
+        resetPan: () => {
+          setPan({ x: 0, y: 0 });
+          onPanChange?.({ x: 0, y: 0 });
+        },
         container: containerRef.current
       }),
-      [handleZoom, setZoom, initialZoom, handleResetWorld, handleToggleFullscreen, handleSwitchMode]
+      [handleZoom, setZoom, initialZoom, handleResetWorld, handleToggleFullscreen, handleSwitchMode, pan, onPanChange]
     );
-    const hasDraggedRef = useRef11(false);
-    const mouseDownPosRef = useRef11({ x: 0, y: 0 });
+    const hasDraggedRef = useRef12(false);
+    const mouseDownPosRef = useRef12({ x: 0, y: 0 });
     const handleMouseDown = (e) => {
       if (isDraggingNodeRef.current) return;
-      isOrbitingRef.current = true;
-      hasDraggedRef.current = false;
+      if (e.button !== 0) return;
       mouseDownPosRef.current = { x: e.clientX, y: e.clientY };
       lastMousePosRef.current = { x: e.clientX, y: e.clientY };
+      hasDraggedRef.current = false;
+      if (viewModeRef.current === "2D") {
+        if (panOnDragRef.current) {
+          isPanningRef.current = true;
+          setIsPanning(true);
+        }
+      } else {
+        isOrbitingRef.current = true;
+      }
     };
     const handleNodeMouseDown = (e, id) => {
       e.stopPropagation();
@@ -10635,12 +10789,8 @@ var StnTopologyGraphInternal = forwardRef39(
         const dy = e.clientY - lastMousePosRef.current.y;
         lastMousePosRef.current = { x: e.clientX, y: e.clientY };
         const currentZoom = Math.max(0.1, zoomRef.current);
-        const svg = containerRef.current?.querySelector("svg.stn-topology-graph__svg");
-        const ctm = svg?.getScreenCTM();
-        const rect = containerRef.current?.getBoundingClientRect();
-        const screenPixelsPerSvgUnit = ctm && ctm.a > 0 ? ctm.a : rect && rect.height > 0 && rect.width > 0 ? Math.min(rect.width, rect.height) / 500 : 1;
         if (viewModeRef.current === "2D") {
-          const moveFactor = 1 / (currentZoom * screenPixelsPerSvgUnit);
+          const moveFactor = 1 / currentZoom;
           setNodeList(
             (prev) => prev.map(
               (n) => n.id === draggedNodeIdRef.current ? { ...n, x: n.x + dx * moveFactor, y: n.y + dy * moveFactor } : n
@@ -10666,7 +10816,7 @@ var StnTopologyGraphInternal = forwardRef39(
               currentPitch,
               currentZoom
             );
-            const effectiveScale = Math.max(0.05, proj.scale * screenPixelsPerSvgUnit);
+            const effectiveScale = Math.max(0.05, proj.scale);
             const dx_cam = dx / effectiveScale;
             const dy_cam = dy / effectiveScale;
             const dx_world = dx_cam * cosY + dy_cam * sinP * sinY;
@@ -10682,6 +10832,15 @@ var StnTopologyGraphInternal = forwardRef39(
             );
           });
         }
+      } else if (isPanningRef.current) {
+        const dx = e.clientX - lastMousePosRef.current.x;
+        const dy = e.clientY - lastMousePosRef.current.y;
+        lastMousePosRef.current = { x: e.clientX, y: e.clientY };
+        setPan((prev) => {
+          const next = { x: prev.x + dx, y: prev.y + dy };
+          onPanChange?.(next);
+          return next;
+        });
       } else if (isOrbitingRef.current) {
         if (viewModeRef.current === "2D") return;
         const dx = e.clientX - lastMousePosRef.current.x;
@@ -10690,7 +10849,7 @@ var StnTopologyGraphInternal = forwardRef39(
         setYaw((prev) => (prev + dx * 0.6) % 360);
         setPitch((prev) => Math.max(-80, Math.min(80, prev + dy * 0.6)));
       }
-    }, []);
+    }, [onPanChange]);
     const handleContainerClick = (e) => {
       if (hasDraggedRef.current) {
         hasDraggedRef.current = false;
@@ -10701,6 +10860,8 @@ var StnTopologyGraphInternal = forwardRef39(
     };
     const handleMouseUp = useCallback10(() => {
       isOrbitingRef.current = false;
+      isPanningRef.current = false;
+      setIsPanning(false);
       isDraggingNodeRef.current = false;
       draggedNodeIdRef.current = null;
       setTimeout(() => {
@@ -10739,11 +10900,21 @@ var StnTopologyGraphInternal = forwardRef39(
     const nodeMap = new Map(
       projectedNodes.map((n) => [n.id, n])
     );
+    const pairCounts = /* @__PURE__ */ new Map();
+    for (const l of effectiveLinks) {
+      const key = [String(l.source), String(l.target)].sort().join(":::");
+      pairCounts.set(key, (pairCounts.get(key) ?? 0) + 1);
+    }
+    const pairIndices = /* @__PURE__ */ new Map();
     const projectedLinks = effectiveLinks.map((link) => {
       const n1 = nodeMap.get(link.source);
       const n2 = nodeMap.get(link.target);
       const avgDepth = n1 && n2 ? (n1.depth + n2.depth) / 2 : 0;
-      return { ...link, n1, n2, avgDepth };
+      const key = [String(link.source), String(link.target)].sort().join(":::");
+      const multiLinkTotal = pairCounts.get(key) ?? 1;
+      const multiLinkIndex = pairIndices.get(key) ?? 0;
+      pairIndices.set(key, multiLinkIndex + 1);
+      return { ...link, n1, n2, avgDepth, multiLinkIndex, multiLinkTotal };
     }).sort((a, b) => b.avgDepth - a.avgDepth);
     const sortedNodes = [...projectedNodes].sort((a, b) => b.depth - a.depth);
     const renderGridLines = useCallback10(() => {
@@ -10832,6 +11003,7 @@ var StnTopologyGraphInternal = forwardRef39(
       onLinkClick,
       onLinkHover,
       linkLabelMode,
+      multiLinkMode,
       onCanvasClick,
       onBackgroundClick,
       handleNodeMouseDown,
@@ -10845,14 +11017,19 @@ var StnTopologyGraphInternal = forwardRef39(
       renderNodeLabel,
       hoveredNodeId,
       setHoveredNodeId,
-      hasDraggedRef
+      hasDraggedRef,
+      pan,
+      setPan,
+      panOnDrag,
+      isPanning
     };
+    const containerCursor = viewMode === "2D" ? panOnDrag ? isPanning ? "grabbing" : "grab" : "default" : isOrbitingRef.current ? "grabbing" : "grab";
     return /* @__PURE__ */ jsx63(StnTopologyGraphContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs50(
       "div",
       {
         ref: containerRef,
         className: cn("stn-topology-graph", className),
-        style: { height, cursor: viewMode === "2D" ? "default" : isOrbitingRef.current ? "grabbing" : "grab", ...style },
+        style: { height, cursor: containerCursor, ...style },
         "data-stn-topology-graph": true,
         "data-view-mode": viewMode,
         onMouseDown: handleMouseDown,
@@ -10909,7 +11086,7 @@ StnTopologyGraph2.Viewport = StnTopologyGraphViewport;
 StnTopologyGraph2.displayName = "StnTopologyGraph";
 
 // src/components/topology/StnTopologyNodeContextMenu.tsx
-import { forwardRef as forwardRef40, useState as useState18, useRef as useRef12, useEffect as useEffect15 } from "react";
+import { forwardRef as forwardRef40, useState as useState19, useRef as useRef13, useEffect as useEffect15 } from "react";
 import { Fragment as Fragment9, jsx as jsx64, jsxs as jsxs51 } from "react/jsx-runtime";
 var CIRCLED_TO_PLAIN = {
   "\u2460": "1",
@@ -10931,8 +11108,8 @@ var StepBadge = ({ num }) => {
 };
 var StnTopologyNodeContextMenu = forwardRef40(
   function StnTopologyNodeContextMenu2({ target, onClose, onAction }, ref) {
-    const [submenuAnchorEl, setSubmenuAnchorEl] = useState18(null);
-    const closeTimerRef = useRef12(null);
+    const [submenuAnchorEl, setSubmenuAnchorEl] = useState19(null);
+    const closeTimerRef = useRef13(null);
     useEffect15(() => {
       if (!target) {
         if (closeTimerRef.current) {
@@ -11133,7 +11310,7 @@ var DEFAULT_TUNNELS = [
   { id: "t3", source: "NODE-6", target: "NODE-3", count: 2, bandwidthText: "100M / 1G", utilization: 10 },
   { id: "t4", source: "NODE-7", target: "NODE-3", count: 3, bandwidthText: "100M / 1G", utilization: 10 }
 ];
-var StnTopologyNodeDetailPopover = forwardRef41(function StnTopologyNodeDetailPopover2({ target, onClose, onConnectDevice, data: propData, className, ...rest }, ref) {
+var StnTopologyNodeDetailPopover = forwardRef41(function StnTopologyNodeDetailPopover2({ target, onClose, onConnectDevice, data: propData, offset = 12, className, ...rest }, ref) {
   if (!target) return null;
   const { node, mouseX, mouseY, data: targetData } = target;
   const data = propData ?? targetData;
@@ -11158,6 +11335,7 @@ var StnTopologyNodeDetailPopover = forwardRef41(function StnTopologyNodeDetailPo
       anchorPosition: { top: mouseY, left: mouseX },
       anchorOrigin: { vertical: "top", horizontal: "left" },
       transformOrigin: { vertical: "top", horizontal: "left" },
+      offset,
       onClose,
       hideBackdrop: false,
       paperClassName: "stn-topology-popover__paper",
@@ -11276,7 +11454,7 @@ var DEFAULT_LSP_LIST = [
   { id: "2", name: "test1_NODE-5_TO_NODE-8", bandwidth: "100M" },
   { id: "3", name: "test1_NODE-6_TO_NODE-1", bandwidth: "0M" }
 ];
-var StnTopologyLinkDetailPopover = forwardRef42(function StnTopologyLinkDetailPopover2({ target, onClose, onOpenDetail, data: propData, className, ...rest }, ref) {
+var StnTopologyLinkDetailPopover = forwardRef42(function StnTopologyLinkDetailPopover2({ target, onClose, onOpenDetail, data: propData, offset = 12, className, ...rest }, ref) {
   if (!target) return null;
   const { link, mouseX, mouseY, data: targetData } = target;
   const data = propData ?? targetData;
@@ -11316,6 +11494,7 @@ var StnTopologyLinkDetailPopover = forwardRef42(function StnTopologyLinkDetailPo
       anchorPosition: { top: mouseY, left: mouseX },
       anchorOrigin: { vertical: "top", horizontal: "left" },
       transformOrigin: { vertical: "top", horizontal: "left" },
+      offset,
       onClose,
       hideBackdrop: false,
       paperClassName: "stn-topology-popover__paper",
@@ -11444,7 +11623,7 @@ var StnTopologyLinkDetailPopover = forwardRef42(function StnTopologyLinkDetailPo
 });
 
 // src/components/topology/StnTopologyLinkDetailModal.tsx
-import { useState as useState19, useMemo as useMemo5, forwardRef as forwardRef43 } from "react";
+import { useState as useState20, useMemo as useMemo5, forwardRef as forwardRef43 } from "react";
 import { jsx as jsx67, jsxs as jsxs54 } from "react/jsx-runtime";
 var DEFAULT_FORWARD_LSPS = [
   {
@@ -11513,13 +11692,13 @@ var INITIAL_COLUMNS = [
   { key: "status", label: "\uC0C1\uD0DC", width: 80 }
 ];
 var StnTopologyLinkDetailModal = forwardRef43(function StnTopologyLinkDetailModal2({ open, link, onClose, onExportExcel, exportExcelIcon = "download", ...rest }, ref) {
-  const [tab, setTab] = useState19("lsp");
-  const [cols1] = useState19(INITIAL_COLUMNS);
-  const [cols2] = useState19(INITIAL_COLUMNS);
-  const [sortKey1, setSortKey1] = useState19("lspName");
-  const [sortOrder1, setSortOrder1] = useState19("none");
-  const [sortKey2, setSortKey2] = useState19("lspName");
-  const [sortOrder2, setSortOrder2] = useState19("none");
+  const [tab, setTab] = useState20("lsp");
+  const [cols1] = useState20(INITIAL_COLUMNS);
+  const [cols2] = useState20(INITIAL_COLUMNS);
+  const [sortKey1, setSortKey1] = useState20("lspName");
+  const [sortOrder1, setSortOrder1] = useState20("none");
+  const [sortKey2, setSortKey2] = useState20("lspName");
+  const [sortOrder2, setSortOrder2] = useState20("none");
   const sourceName = link ? String(link.source) : "NODE-3";
   const targetName = link ? String(link.target) : "NODE-4";
   const handleToggleSort1 = (key) => {
@@ -12336,7 +12515,7 @@ function PubChartSample({
 }
 
 // src/patterns/alertCenter/StnAlertCenterPanel.tsx
-import { useState as useState20 } from "react";
+import { useState as useState21 } from "react";
 import {
   STN_ALERT_CENTER_TABS
 } from "@stn-uiux/pub-ui/data/stnAlertCenter";
@@ -12468,7 +12647,7 @@ function StnAlertCenterPanel({
   closeLabel = "\uB2EB\uAE30",
   className
 }) {
-  const [activeTab, setActiveTab] = useState20(defaultTab);
+  const [activeTab, setActiveTab] = useState21(defaultTab);
   const alertCount = alerts.length;
   const resolvedTitleOverflow = titleOverflow ?? textOverflow;
   const resolvedDescOverflow = descOverflow ?? textOverflow;
@@ -12610,12 +12789,12 @@ import {
 } from "@stn-uiux/pub-ui/data/stnAlertCenter";
 
 // src/components/sideNav/SideNavContext.ts
-import { createContext as createContext7, useContext as useContext7 } from "react";
+import { createContext as createContext7, useContext as useContext8 } from "react";
 var SideNavContext = createContext7({
   collapsed: false,
   mobileOpen: false
 });
-var useSideNav = () => useContext7(SideNavContext);
+var useSideNav = () => useContext8(SideNavContext);
 
 // src/components/sideNav/StnSideNavItem.tsx
 import { forwardRef as forwardRef44 } from "react";
@@ -12865,8 +13044,8 @@ var StnSideNavMenu = forwardRef47(function StnSideNavMenu2({
 import {
   forwardRef as forwardRef48,
   useEffect as useEffect16,
-  useRef as useRef13,
-  useState as useState21
+  useRef as useRef14,
+  useState as useState22
 } from "react";
 import { jsx as jsx80, jsxs as jsxs64 } from "react/jsx-runtime";
 var StnSideNavGroup = forwardRef48(function StnSideNavGroup2({
@@ -12885,12 +13064,12 @@ var StnSideNavGroup = forwardRef48(function StnSideNavGroup2({
   ...rest
 }, ref) {
   const { collapsed } = useSideNav();
-  const [internalOpen, setInternalOpen] = useState21(defaultOpen);
+  const [internalOpen, setInternalOpen] = useState22(defaultOpen);
   const isOpen = openProp ?? internalOpen;
   const isDropdown = Boolean(dropdown || variant === "dropdown");
   const isTransparent = dropdownVariant === "transparent" || dropdownBackground === false;
   const isUp = direction === "up";
-  const groupRef = useRef13(null);
+  const groupRef = useRef14(null);
   useEffect16(() => {
     if (!isDropdown || !isOpen) return;
     const handlePointerDown = (e) => {
@@ -13047,12 +13226,12 @@ var StnSideNavWatermark = forwardRef52(
 );
 
 // src/components/sideNav/StnSideNavMobileTrigger.tsx
-import { forwardRef as forwardRef53, useEffect as useEffect17, useState as useState22 } from "react";
+import { forwardRef as forwardRef53, useEffect as useEffect17, useState as useState23 } from "react";
 import { jsx as jsx85, jsxs as jsxs65 } from "react/jsx-runtime";
 var StnSideNavMobileTrigger = forwardRef53(
   function StnSideNavMobileTrigger2({ floating = false, className, children, onClick, ...rest }, ref) {
     const { onToggleMobileOpen, mobileOpen: contextMobileOpen } = useSideNav();
-    const [fallbackMobileOpen, setFallbackMobileOpen] = useState22(false);
+    const [fallbackMobileOpen, setFallbackMobileOpen] = useState23(false);
     useEffect17(() => {
       if (onToggleMobileOpen) return;
       const handleStateChange = (e) => {
@@ -13202,11 +13381,11 @@ import {
   useCallback as useCallback11,
   useEffect as useEffect18,
   useMemo as useMemo6,
-  useState as useState23
+  useState as useState24
 } from "react";
 import { jsx as jsx88, jsxs as jsxs66 } from "react/jsx-runtime";
 function useControllableState(controlledValue, defaultValue, onChange) {
-  const [internalState, setInternalState] = useState23(defaultValue);
+  const [internalState, setInternalState] = useState24(defaultValue);
   const isControlled = controlledValue !== void 0;
   const value = isControlled ? controlledValue : internalState;
   const setValue = useCallback11(
@@ -13350,8 +13529,8 @@ import {
   Fragment as Fragment13,
   useEffect as useEffect19,
   useId as useId17,
-  useRef as useRef14,
-  useState as useState24
+  useRef as useRef15,
+  useState as useState25
 } from "react";
 import {
   STN_BREADCRUMB_ICON_SRC
@@ -13427,7 +13606,7 @@ function BreadcrumbMenuList({
   ) }, option.id)) });
 }
 function useDismissibleMenu(open, onClose) {
-  const rootRef = useRef14(null);
+  const rootRef = useRef15(null);
   useEffect19(() => {
     if (!open) return;
     const onPointerDown = (event) => {
@@ -13447,15 +13626,16 @@ function useDismissibleMenu(open, onClose) {
 }
 function BreadcrumbSegment({
   item,
-  isCurrent
+  isCurrent,
+  showItemIcons = true
 }) {
   const menuId = useId17();
-  const [open, setOpen] = useState24(false);
+  const [open, setOpen] = useState25(false);
   const menuItems = item.menuItems ?? [];
   const showMenu = hasSegmentMenu(item) && !isCurrent;
   const canOpenMenu = showMenu && menuItems.length > 0;
   const rootRef = useDismissibleMenu(open, () => setOpen(false));
-  const iconSrc = resolveIconSrc(item);
+  const iconSrc = showItemIcons ? resolveIconSrc(item) : void 0;
   const content = /* @__PURE__ */ jsx89(SegmentContent, { iconSrc, label: item.label, menu: showMenu });
   if (isCurrent) {
     return /* @__PURE__ */ jsx89("span", { className: "stn-breadcrumb__segment", "aria-current": "page", "aria-label": item.label, children: content });
@@ -13544,7 +13724,7 @@ function BreadcrumbCollapsed({
   items,
   menuId
 }) {
-  const [open, setOpen] = useState24(false);
+  const [open, setOpen] = useState25(false);
   const rootRef = useDismissibleMenu(open, () => setOpen(false));
   const menuItems = items.map((item) => ({
     id: item.id,
@@ -13584,7 +13764,8 @@ function StnBreadcrumb({
   homeLabel = "\uD648",
   renderItem,
   reverse = false,
-  leadSeparator = false
+  leadSeparator = false,
+  showItemIcons = true
 }) {
   const menuId = useId17();
   const currentIndex = items.findIndex((item, index) => item.current ?? index === items.length - 1);
@@ -13603,7 +13784,14 @@ function StnBreadcrumb({
   );
   const renderTrailItem = (item) => {
     const isCurrent = Boolean(item.current) || item.id === targetCurrentId;
-    const segment = /* @__PURE__ */ jsx89(BreadcrumbSegment, { item, isCurrent });
+    const segment = /* @__PURE__ */ jsx89(
+      BreadcrumbSegment,
+      {
+        item,
+        isCurrent,
+        showItemIcons
+      }
+    );
     return /* @__PURE__ */ jsx89(
       "li",
       {
@@ -13657,7 +13845,7 @@ function StnBreadcrumb({
 }
 
 // src/components/StnHeaderTitle.tsx
-import { useEffect as useEffect20, useState as useState25 } from "react";
+import { useEffect as useEffect20, useState as useState26 } from "react";
 import { STN_HEADER_TITLE_FRAME } from "@stn-uiux/pub-ui/data/stnHeaderTitle";
 import { jsx as jsx90, jsxs as jsxs68 } from "react/jsx-runtime";
 var KO_WEEKDAY_SHORT = ["\uC77C", "\uC6D4", "\uD654", "\uC218", "\uBAA9", "\uAE08", "\uD1A0"];
@@ -13734,7 +13922,7 @@ function StnHeaderTitleFramePreview({ className }) {
   return /* @__PURE__ */ jsx90("div", { className: cn("stn-header-title__frame-only", className), children: /* @__PURE__ */ jsx90(HeaderTitleFrame, { preview: true }) });
 }
 function useLiveClock(enabled) {
-  const [now, setNow] = useState25(() => /* @__PURE__ */ new Date());
+  const [now, setNow] = useState26(() => /* @__PURE__ */ new Date());
   useEffect20(() => {
     if (!enabled) return;
     const id = window.setInterval(() => setNow(/* @__PURE__ */ new Date()), 1e3);
@@ -14620,7 +14808,7 @@ function DashboardPageScaffold({
 }
 
 // src/patterns/scaffold/AlertCenterPageScaffold.tsx
-import { useMemo as useMemo7, useState as useState26 } from "react";
+import { useMemo as useMemo7, useState as useState27 } from "react";
 import {
   STN_ALERT_CENTER_DEMO_ALERTS,
   STN_ALERT_CENTER_DEMO_DEPLOY,
@@ -14646,7 +14834,7 @@ function AlertCenterPageScaffold({
   defaultGnbOpen = true,
   ...shellProps
 }) {
-  const [gnbOpen, setGnbOpen] = useState26(defaultGnbOpen);
+  const [gnbOpen, setGnbOpen] = useState27(defaultGnbOpen);
   const panel = useMemo7(
     () => gnbAlertPanel ?? /* @__PURE__ */ jsx98(
       StnAlertCenterPanel,
@@ -14714,7 +14902,7 @@ function AlertCenterPageScaffold({
 }
 
 // src/patterns/scaffold/LoginPageScaffold.tsx
-import { useState as useState27 } from "react";
+import { useState as useState28 } from "react";
 import { jsx as jsx99, jsxs as jsxs73 } from "react/jsx-runtime";
 var LOGIN_TABS = [
   { value: "normal", label: "\uC77C\uBC18 \uB85C\uADF8\uC778" },
@@ -14726,9 +14914,9 @@ function DefaultLoginForm({
   signUpHref = "#",
   recoverHref = "#"
 }) {
-  const [mode, setMode] = useState27("normal");
-  const [userId, setUserId] = useState27("");
-  const [password, setPassword] = useState27("");
+  const [mode, setMode] = useState28("normal");
+  const [userId, setUserId] = useState28("");
+  const [password, setPassword] = useState28("");
   function handleSubmit(e) {
     e.preventDefault();
     onLogin?.(userId, password);
@@ -15131,7 +15319,7 @@ function renderChartState(loading, hasData, emptyText = "\uC870\uD68C\uB41C \uB3
 
 // src/components/StnBarChart.tsx
 import {
-  useState as useState28
+  useState as useState29
 } from "react";
 import { Fragment as Fragment17, jsx as jsx102, jsxs as jsxs76 } from "react/jsx-runtime";
 var DEFAULT_BAR_COLORS = STN_CHART_COLORS;
@@ -15164,8 +15352,8 @@ function StnBarChart({
   style,
   ...rest
 }) {
-  const [internalHighlight, setInternalHighlight] = useState28(null);
-  const [hoveredIndex, setHoveredIndex] = useState28(null);
+  const [internalHighlight, setInternalHighlight] = useState29(null);
+  const [hoveredIndex, setHoveredIndex] = useState29(null);
   const isHorizontal = direction === "horizontal" || orientation === "horizontal";
   if (loading || !data || data.length === 0) {
     const emptyContainerStyle = {
@@ -15470,7 +15658,7 @@ function StnBarChart({
 // src/components/StnPieChart.tsx
 import {
   useId as useId18,
-  useState as useState29
+  useState as useState30
 } from "react";
 import { Fragment as Fragment18, jsx as jsx103, jsxs as jsxs77 } from "react/jsx-runtime";
 var DEFAULT_PIE_COLORS = STN_CHART_COLORS;
@@ -15500,7 +15688,7 @@ function StnPieChart({
   ...rest
 }) {
   const filterId = useId18().replace(/:/g, "");
-  const [hoveredIndex, setHoveredIndex] = useState29(null);
+  const [hoveredIndex, setHoveredIndex] = useState30(null);
   const hasData = Boolean(data && data.length > 0);
   if (loading || !hasData) {
     return /* @__PURE__ */ jsx103(
@@ -15685,8 +15873,8 @@ var StnGaugeChart = StnPieChart;
 // src/components/StnLineChart.tsx
 import {
   useId as useId19,
-  useRef as useRef15,
-  useState as useState30
+  useRef as useRef16,
+  useState as useState31
 } from "react";
 import { jsx as jsx104, jsxs as jsxs78 } from "react/jsx-runtime";
 var DEFAULT_LINE_COLORS = STN_CHART_COLORS;
@@ -15727,8 +15915,8 @@ function StnLineChart({
   ...rest
 }) {
   const chartId = useId19().replace(/:/g, "");
-  const svgRef = useRef15(null);
-  const [hoverIndex, setHoverIndex] = useState30(null);
+  const svgRef = useRef16(null);
+  const [hoverIndex, setHoverIndex] = useState31(null);
   const valueFormatter = format ?? ((v) => formatChartValue(v, decimals));
   const hasDots = Boolean(showDots ?? showPoints ?? dots ?? false);
   const dotRadius = DOT_RADIUS_MAP[size] || 3;
@@ -16046,7 +16234,7 @@ function StnLineChart({
 // src/components/StnComboChart.tsx
 import {
   useId as useId20,
-  useState as useState31
+  useState as useState32
 } from "react";
 import { jsx as jsx105, jsxs as jsxs79 } from "react/jsx-runtime";
 var BAR_WIDTH_MAP = {
@@ -16087,8 +16275,8 @@ function StnComboChart({
   ...rest
 }) {
   const chartId = useId20().replace(/:/g, "");
-  const [internalHighlight, setInternalHighlight] = useState31(null);
-  const [hoverIndex, setHoverIndex] = useState31(null);
+  const [internalHighlight, setInternalHighlight] = useState32(null);
+  const [hoverIndex, setHoverIndex] = useState32(null);
   const hasData = Boolean(data && data.length > 0);
   if (loading || !hasData) {
     return /* @__PURE__ */ jsx105(