@stn-uiux/pub-ui-react 0.1.87 → 0.1.88

package/dist/index.js

@@ -900,6 +900,7 @@ var StnPopover = forwardRef5(function StnPopover2({
   onClose,
   container,
   disablePortal = false,
+  hideBackdrop = false,
   children,
   ...rest
 }, ref) {
@@ -1010,11 +1011,16 @@ var StnPopover = forwardRef5(function StnPopover2({
     {
       ref: rootRef,
       id,
-      className: cn("stn-popover", open && "is-open", className),
+      className: cn(
+        "stn-popover",
+        open && "is-open",
+        hideBackdrop && "stn-popover--no-backdrop",
+        className
+      ),
       style,
       ...rest,
       children: [
-        /* @__PURE__ */ jsx8(
+        !hideBackdrop && /* @__PURE__ */ jsx8(
           "div",
           {
             className: "stn-popover__backdrop",
@@ -3262,6 +3268,7 @@ var StnMenuBase = forwardRef18(function StnMenuBase2({
   paperClassName,
   paperStyle,
   disablePortal = false,
+  hideBackdrop = false,
   className,
   children,
   ...rest
@@ -3301,6 +3308,7 @@ var StnMenuBase = forwardRef18(function StnMenuBase2({
           transformOrigin,
           onClose,
           disablePortal,
+          hideBackdrop,
           className: cn("stn-menu-popover", className),
           paperClassName: cn(
             "stn-menu-paper",
@@ -4270,8 +4278,8 @@ function StnCardHeader({
 function StnCardBody({ children, className, flush = false, ...rest }) {
   return /* @__PURE__ */ jsx26("div", { className: cn("stn-card__body", flush && "is-flush", className), ...rest, children });
 }
-function StnCardFooter({ children, className, ...rest }) {
-  return /* @__PURE__ */ jsx26("div", { className: cn("stn-card__footer", className), ...rest, children });
+function StnCardFooter({ children, className, align = "right", ...rest }) {
+  return /* @__PURE__ */ jsx26("div", { className: cn("stn-card__footer", `align-${align}`, className), ...rest, children });
 }
 var StnCard = forwardRef21(function StnCard2({
   children,
@@ -8015,7 +8023,7 @@ import {
 // src/components/StnWidget.tsx
 import {
   Children as Children7,
-  Fragment as Fragment9,
+  Fragment as Fragment10,
   cloneElement as cloneElement5,
   isValidElement as isValidElement10
 } from "react";
@@ -8517,9 +8525,9 @@ var STN_TOPOLOGY_STATUS_COLORS = {
     label: "\uD3EC\uC778\uD2B8/\uAC70\uC810"
   },
   normal: {
-    main: "var(--stn-grade-normal)",
-    glow: "color-mix(in srgb, var(--stn-grade-normal) 35%, transparent)",
-    text: "var(--stn-grade-normal)",
+    main: "var(--stn-topology-node-normal)",
+    glow: "color-mix(in srgb, var(--stn-topology-node-normal) 35%, transparent)",
+    text: "var(--stn-topology-node-normal)",
     label: "\uC815\uC0C1"
   },
   warning: {
@@ -8547,9 +8555,9 @@ var STN_TOPOLOGY_STATUS_COLORS = {
     label: "\uC2EC\uAC01"
   },
   neutral: {
-    main: "var(--stn-grade-neutral)",
-    glow: "color-mix(in srgb, var(--stn-grade-neutral) 30%, transparent)",
-    text: "var(--stn-grade-neutral)",
+    main: "var(--stn-topology-node-normal)",
+    glow: "color-mix(in srgb, var(--stn-topology-node-normal) 30%, transparent)",
+    text: "var(--stn-topology-node-normal)",
     label: "\uC911\uB9BD/\uB300\uAE30"
   }
 };
@@ -8597,6 +8605,29 @@ function topologyShapePoints(shape, cx, cy, r) {
   if (shape === "square") return polygonPoints(cx, cy, r, 4, 45);
   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
+};
+var TOPOLOGY_NODE_CURRENT_RING_SPEC = {
+  circleOffset: 5.5,
+  // 기존 8.5px -> 5.5px (약 35% 슬림화)
+  squareOffset: 5,
+  // 기존 7.5px -> 5.0px (총 너비/높이 증가분 기존 15 -> 10)
+  squareRxOffset: 2.3,
+  // 기존 3.5px -> 2.3px
+  triangleOffset: 5.5,
+  // 기존 8.5px -> 5.5px
+  starOuterOffset: 5,
+  // 기존 7.5px -> 5.0px
+  starInnerOffset: 2.3,
+  // 기존 3.5px -> 2.3px
+  diamondOffset: 5.3
+  // 기존 8.0px -> 5.3px
+};
 
 // src/components/topology/StnTopologyNodeMark.tsx
 import { jsx as jsx59, jsxs as jsxs47 } from "react/jsx-runtime";
@@ -8750,8 +8781,7 @@ function StnTopologyNodeMark({
           y: foY,
           width: boxWidth,
           height: boxHeight,
-          style: { overflow: "visible" },
-          children: /* @__PURE__ */ jsx59("div", { style: { width: "100%", height: "100%", display: "flex", alignItems: "center", justifyContent: "center" }, children: /* @__PURE__ */ jsx59(
+          children: /* @__PURE__ */ jsx59("div", { children: /* @__PURE__ */ jsx59(
             StnTopologyNodeItem,
             {
               size,
@@ -9316,7 +9346,7 @@ var GLYPH_SIZE_MAP = {
 function StnTopologyNodeGlyph({
   shape = "circle",
   variant = "outline",
-  color = "currentColor",
+  color = "var(--stn-topology-node-normal)",
   surfaceBg = "none",
   size = 14,
   strokeWidth = 1.4,
@@ -9353,7 +9383,7 @@ function StnTopologyNodeGlyph({
 }
 StnTopologyNodeGlyph.displayName = "StnTopologyGraph.NodeGlyph";
 function StnTopologyLinkGlyph({
-  color = "var(--stn-border-subtle)",
+  color = "var(--stn-topology-link-line)",
   variant = "line",
   size = 14,
   width,
@@ -9662,7 +9692,7 @@ function StnTopologyGraphMinimap({ className, style }) {
             const n2 = nodeMap.get(link.target);
             if (!n1 || !n2) return null;
             const statusColor = link.status === "critical" ? "var(--stn-grade-critical)" : link.status === "major" ? "var(--stn-grade-major)" : link.status === "minor" ? "var(--stn-grade-minor)" : link.status === "warning" ? "var(--stn-grade-warning)" : link.status === "primary" || link.status === "point" ? "var(--stn-primary)" : null;
-            const strokeColor = link.color ?? statusColor ?? "var(--stn-border-strong)";
+            const strokeColor = link.color ?? statusColor ?? "var(--stn-topology-link-line)";
             const miniStrokeWidth = typeof link.strokeWidth === "number" ? Math.max(0.6, link.strokeWidth * 0.4) : link.strokeWidth === "xs" ? 0.7 : link.strokeWidth === "sm" ? 1 : link.strokeWidth === "lg" ? 1.8 : link.strokeWidth === "xl" ? 2.5 : 1.2;
             const miniOpacity = resolveTopologyOpacity(link.opacity, 0.7);
             return /* @__PURE__ */ jsx63(
@@ -9760,6 +9790,7 @@ function renderCurrentNodeRing({
   r
 }) {
   const bg = "var(--stn-topology-node-current-bg)";
+  const spec = TOPOLOGY_NODE_CURRENT_RING_SPEC;
   if (shape === "square") {
     const s = r * 1.8;
     const half = s / 2;
@@ -9767,11 +9798,11 @@ function renderCurrentNodeRing({
     return /* @__PURE__ */ jsx63("g", { className: "stn-topology-node__current-ring", children: /* @__PURE__ */ jsx63(
       "rect",
       {
-        x: -half - 7.5,
-        y: -half - 7.5,
-        width: s + 15,
-        height: s + 15,
-        rx: rx + 3.5,
+        x: -half - spec.squareOffset,
+        y: -half - spec.squareOffset,
+        width: s + spec.squareOffset * 2,
+        height: s + spec.squareOffset * 2,
+        rx: rx + spec.squareRxOffset,
         fill: bg,
         stroke: "none"
       }
@@ -9782,7 +9813,7 @@ function renderCurrentNodeRing({
     return /* @__PURE__ */ jsx63("g", { className: "stn-topology-node__current-ring", children: /* @__PURE__ */ jsx63(
       "polygon",
       {
-        points: trianglePoints(0, 0, R2 + 8.5),
+        points: trianglePoints(0, 0, R2 + spec.triangleOffset),
         fill: bg,
         stroke: "none",
         strokeLinejoin: "round"
@@ -9795,7 +9826,7 @@ function renderCurrentNodeRing({
     return /* @__PURE__ */ jsx63("g", { className: "stn-topology-node__current-ring", children: /* @__PURE__ */ jsx63(
       "polygon",
       {
-        points: starPoints(0, 0, R2 + 7.5, rIn + 3.5),
+        points: starPoints(0, 0, R2 + spec.starOuterOffset, rIn + spec.starInnerOffset),
         fill: bg,
         stroke: "none",
         strokeLinejoin: "round"
@@ -9807,7 +9838,7 @@ function renderCurrentNodeRing({
     return /* @__PURE__ */ jsx63("g", { className: "stn-topology-node__current-ring", children: /* @__PURE__ */ jsx63(
       "polygon",
       {
-        points: diamondPoints(0, 0, R2 + 8),
+        points: diamondPoints(0, 0, R2 + spec.diamondOffset),
         fill: bg,
         stroke: "none"
       }
@@ -9818,7 +9849,7 @@ function renderCurrentNodeRing({
     {
       cx: "0",
       cy: "0",
-      r: r + 8.5,
+      r: r + spec.circleOffset,
       fill: bg,
       stroke: "none"
     }
@@ -9835,6 +9866,8 @@ function StnTopologyGraphViewport({ className, style }) {
     onNodeClick,
     onNodeContextMenu,
     onLinkClick,
+    onLinkHover,
+    linkLabelMode,
     onCanvasClick,
     onBackgroundClick,
     handleNodeMouseDown,
@@ -9844,8 +9877,11 @@ function StnTopologyGraphViewport({ className, style }) {
     renderBadge,
     renderNodeLabel,
     hoveredNodeId,
-    setHoveredNodeId
+    setHoveredNodeId,
+    hasDraggedRef
   } = useStnTopologyGraph();
+  const [hoveredLinkKey, setHoveredLinkKey] = useState17(null);
+  const isAnyLinkHovered = hoveredLinkKey !== null;
   return /* @__PURE__ */ jsxs50(
     "svg",
     {
@@ -9864,119 +9900,148 @@ function StnTopologyGraphViewport({ className, style }) {
           /* @__PURE__ */ jsx63("stop", { offset: "100%", stopColor: "var(--stn-primary)" })
         ] }) }),
         renderGridLines(),
-        /* @__PURE__ */ jsx63("g", { className: "stn-topology-links-group", 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 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 dotRadius = Math.max(2, 3 * depthScale * Math.min(1.2, Math.max(0.6, zoom)));
-            const dotFill = link.color ?? statusColor ?? "var(--stn-grade-neutral)";
-            dotElement = /* @__PURE__ */ jsx63("circle", { cx: midSX, cy: midSY, r: dotRadius, fill: dotFill });
-          }
-          const lineColor = link.color ?? (!isDot && statusColor ? statusColor : "var(--stn-border-strong)");
-          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;
-            }
-            const offsetY = -(3.2 + effectiveStrokeWidth / 2);
-            const fontSize = Math.max(4.2, Math.min(6.2, 5 * depthScale));
-            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})`,
-                style: { pointerEvents: "none", userSelect: "none" },
-                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: 2.4,
-                    paintOrder: "stroke",
-                    strokeLinejoin: "round",
-                    fontSize,
-                    fontWeight: 600,
-                    letterSpacing: "-0.2px",
-                    children: link.label
-                  }
-                )
+        /* @__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 dotRadius = Math.max(2, 3 * depthScale * Math.min(1.2, Math.max(0.6, zoom)));
+                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 isClickable = Boolean(onLinkClick);
-          return /* @__PURE__ */ jsxs50(
-            "g",
-            {
-              opacity,
-              className: cn("stn-topology-link", isClickable && "stn-topology-link--clickable"),
-              style: { cursor: isClickable ? "pointer" : void 0 },
-              onClick: (e) => {
-                if (onLinkClick) {
-                  e.stopPropagation();
-                  onLinkClick(link, e);
+              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;
                 }
-              },
-              children: [
-                isClickable && /* @__PURE__ */ jsx63(
-                  "line",
-                  {
-                    x1: n1.sx,
-                    y1: n1.sy,
-                    x2: n2.sx,
-                    y2: n2.sy,
-                    stroke: "transparent",
-                    strokeWidth: Math.max(16, effectiveStrokeWidth + 12),
-                    pointerEvents: "stroke"
-                  }
-                ),
-                /* @__PURE__ */ jsx63(
-                  "line",
+                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 labelColor = link.labelColor ?? "var(--stn-topology-link-label-fg, var(--stn-text-secondary))";
+                labelElement = /* @__PURE__ */ jsx63(
+                  "g",
                   {
-                    x1: n1.sx,
-                    y1: n1.sy,
-                    x2: n2.sx,
-                    y2: n2.sy,
-                    stroke: lineColor,
-                    strokeWidth: effectiveStrokeWidth,
-                    strokeDasharray: link.dashed ? "4 4" : void 0,
-                    pointerEvents: isClickable ? "stroke" : "none"
+                    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
+                      }
+                    )
                   }
-                ),
-                dotElement,
-                labelElement
-              ]
-            },
-            `link-${idx}`
-          );
-        }) }),
+                );
+              }
+              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 = Math.max(0.4, n.scale);
@@ -9994,7 +10059,7 @@ function StnTopologyGraphViewport({ className, style }) {
           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)" : isNeutral ? "var(--stn-grade-neutral)" : isNormal ? "var(--stn-grade-normal)" : "var(--stn-grade-neutral)";
+          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 = "var(--stn-topology-node-stroke, 1.2px)";
@@ -10050,40 +10115,23 @@ function StnTopologyGraphViewport({ className, style }) {
                   y: posY,
                   width: bW,
                   height: bH,
-                  style: { overflow: "visible", pointerEvents: "none" },
-                  children: /* @__PURE__ */ jsx63(
+                  className: "stn-topology-node__badge-fo",
+                  children: /* @__PURE__ */ jsx63("div", { className: "stn-topology-node__badge-fo-inner", children: /* @__PURE__ */ jsx63(
                     "div",
                     {
-                      style: {
-                        display: "flex",
-                        justifyContent: "center",
-                        alignItems: "center",
-                        width: "100%",
-                        height: "100%",
-                        pointerEvents: "none"
-                      },
+                      className: "stn-topology-node__badge-fo-scale",
+                      style: { transform: `scale(${badgeScale})` },
                       children: /* @__PURE__ */ jsx63(
-                        "div",
+                        StnBadge,
                         {
-                          style: {
-                            display: "inline-flex",
-                            transform: `scale(${badgeScale})`,
-                            transformOrigin: "center center",
-                            userSelect: "none"
-                          },
-                          children: /* @__PURE__ */ jsx63(
-                            StnBadge,
-                            {
-                              color: n.badgeColor ?? "primary",
-                              appearance: n.badgeAppearance ?? "solid",
-                              badgeContent: badgeText,
-                              ...n.badgeProps
-                            }
-                          )
+                          color: n.badgeColor ?? "primary",
+                          appearance: n.badgeAppearance ?? "solid",
+                          badgeContent: badgeText,
+                          ...n.badgeProps
                         }
                       )
                     }
-                  )
+                  ) })
                 }
               );
             }
@@ -10111,41 +10159,24 @@ function StnTopologyGraphViewport({ className, style }) {
                   y: posY,
                   width: bW,
                   height: bH,
-                  style: { overflow: "visible", pointerEvents: "none" },
-                  children: /* @__PURE__ */ jsx63(
+                  className: "stn-topology-node__badge-fo",
+                  children: /* @__PURE__ */ jsx63("div", { className: "stn-topology-node__badge-fo-inner", children: /* @__PURE__ */ jsx63(
                     "div",
                     {
-                      style: {
-                        display: "flex",
-                        justifyContent: "center",
-                        alignItems: "center",
-                        width: "100%",
-                        height: "100%",
-                        pointerEvents: "none"
-                      },
+                      className: "stn-topology-node__badge-fo-scale",
+                      style: { transform: `scale(${badgeScale})` },
                       children: /* @__PURE__ */ jsx63(
-                        "div",
+                        StnBadge,
                         {
-                          style: {
-                            display: "inline-flex",
-                            transform: `scale(${badgeScale})`,
-                            transformOrigin: "center center",
-                            userSelect: "none"
-                          },
-                          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
-                            }
-                          )
+                          color: n.labelBadgeColor ?? "neutral",
+                          appearance: n.labelBadgeAppearance ?? "subtle",
+                          badgeContent: labelText,
+                          className: cn("stn-topology-node__label-badge", n.labelBadgeProps?.className),
+                          ...n.labelBadgeProps
                         }
                       )
                     }
-                  )
+                  ) })
                 }
               );
             } else {
@@ -10164,7 +10195,6 @@ function StnTopologyGraphViewport({ className, style }) {
                   fontSize: 5.8,
                   fontWeight: 700,
                   letterSpacing: "-0.2px",
-                  style: { userSelect: "none", pointerEvents: "none" },
                   children: labelText
                 }
               ) });
@@ -10187,6 +10217,9 @@ function StnTopologyGraphViewport({ className, style }) {
               onMouseDown: (e) => handleNodeMouseDown(e, n.id),
               onClick: (e) => {
                 e.stopPropagation();
+                if (hasDraggedRef.current) {
+                  return;
+                }
                 onNodeClick?.(n);
               },
               onContextMenu: (e) => {
@@ -10241,8 +10274,8 @@ function StnTopologyGraphViewport({ className, style }) {
               children: /* @__PURE__ */ jsxs50(
                 "g",
                 {
+                  className: "stn-topology-node-tooltip__box",
                   transform: `translate(0, ${tooltipBoxY})`,
-                  style: { filter: "drop-shadow(0px 1px 2px var(--stn-opacity-black-25))" },
                   children: [
                     /* @__PURE__ */ jsx63(
                       "rect",
@@ -10273,7 +10306,6 @@ function StnTopologyGraphViewport({ className, style }) {
                         fontSize: 6.8,
                         fontWeight: 600,
                         letterSpacing: "-0.1px",
-                        style: { userSelect: "none", pointerEvents: "none", fontFamily: "inherit" },
                         children: n.label
                       }
                     )
@@ -10303,10 +10335,12 @@ var StnTopologyGraphInternal = forwardRef39(
     onModeChange,
     showModeToggle = true,
     showToolbar = true,
-    showMinimap = true,
+    showMinimap = false,
     showTooltips = false,
     showNodeLabels = true,
     nodeLabelMode = "badge",
+    linkLabelMode = "hover",
+    onLinkHover,
     useHtmlBadge = true,
     renderBadge,
     renderNodeLabel,
@@ -10377,15 +10411,32 @@ var StnTopologyGraphInternal = forwardRef39(
     const lastMousePosRef = useRef11({ x: 0, y: 0 });
     const viewModeRef = useRef11(viewMode);
     viewModeRef.current = viewMode;
+    const pitchRef = useRef11(pitch);
+    pitchRef.current = pitch;
+    const yawRef = useRef11(yaw);
+    yawRef.current = yaw;
+    const zoomRef = useRef11(zoom);
+    zoomRef.current = zoom;
     useEffect14(() => {
       setNodeList((prev) => {
         if (prev === effectiveNodes) return prev;
-        if (prev.length === effectiveNodes.length && prev.every(
-          (n, i) => n.id === effectiveNodes[i].id && n.x === effectiveNodes[i].x && n.y === effectiveNodes[i].y && n.z === effectiveNodes[i].z && n.status === effectiveNodes[i].status && n.pulse === effectiveNodes[i].pulse && n.isCurrent === effectiveNodes[i].isCurrent && n.isSelected === effectiveNodes[i].isSelected && n.opacity === effectiveNodes[i].opacity && n.variant === effectiveNodes[i].variant && n.label === effectiveNodes[i].label && n.color === effectiveNodes[i].color && n.badge === effectiveNodes[i].badge && n.badgeColor === effectiveNodes[i].badgeColor && n.badgeAppearance === effectiveNodes[i].badgeAppearance && n.labelBadgeColor === effectiveNodes[i].labelBadgeColor && n.labelBadgeAppearance === effectiveNodes[i].labelBadgeAppearance
+        const prevPosMap = /* @__PURE__ */ new Map();
+        for (const n of prev) {
+          prevPosMap.set(n.id, { x: n.x, y: n.y, z: n.z });
+        }
+        const merged = effectiveNodes.map((n) => {
+          const savedPos = prevPosMap.get(n.id);
+          if (savedPos) {
+            return { ...n, x: savedPos.x, y: savedPos.y, z: savedPos.z ?? n.z };
+          }
+          return n;
+        });
+        if (prev.length === merged.length && prev.every(
+          (n, i) => n.id === merged[i].id && n.x === merged[i].x && n.y === merged[i].y && n.z === merged[i].z && n.status === merged[i].status && n.pulse === merged[i].pulse && n.isCurrent === merged[i].isCurrent && n.isSelected === merged[i].isSelected && n.opacity === merged[i].opacity && n.variant === merged[i].variant && n.label === merged[i].label && n.color === merged[i].color && n.badge === merged[i].badge && n.badgeColor === merged[i].badgeColor && n.badgeAppearance === merged[i].badgeAppearance && n.labelBadgeColor === merged[i].labelBadgeColor && n.labelBadgeAppearance === merged[i].labelBadgeAppearance
         )) {
           return prev;
         }
-        return effectiveNodes;
+        return merged;
       });
     }, [effectiveNodes]);
     const handleSwitchMode = useCallback10(
@@ -10476,11 +10527,54 @@ var StnTopologyGraphInternal = forwardRef39(
         const dx = e.clientX - lastMousePosRef.current.x;
         const dy = e.clientY - lastMousePosRef.current.y;
         lastMousePosRef.current = { x: e.clientX, y: e.clientY };
-        setNodeList(
-          (prev) => prev.map(
-            (n) => n.id === draggedNodeIdRef.current ? { ...n, x: n.x + dx * 0.8, y: n.y + dy * 0.8 } : n
-          )
-        );
+        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);
+          setNodeList(
+            (prev) => prev.map(
+              (n) => n.id === draggedNodeIdRef.current ? { ...n, x: n.x + dx * moveFactor, y: n.y + dy * moveFactor } : n
+            )
+          );
+        } else {
+          const currentPitch = pitchRef.current;
+          const currentYaw = yawRef.current;
+          const radY = currentYaw * (Math.PI / 180);
+          const radP = currentPitch * (Math.PI / 180);
+          const cosY = Math.cos(radY);
+          const sinY = Math.sin(radY);
+          const cosP = Math.cos(radP);
+          const sinP = Math.sin(radP);
+          setNodeList((prev) => {
+            const target = prev.find((n) => n.id === draggedNodeIdRef.current);
+            if (!target) return prev;
+            const proj = project3DCoordinate(
+              target.x,
+              target.y,
+              target.z ?? 0,
+              currentYaw,
+              currentPitch,
+              currentZoom
+            );
+            const effectiveScale = Math.max(0.05, proj.scale * screenPixelsPerSvgUnit);
+            const dx_cam = dx / effectiveScale;
+            const dy_cam = dy / effectiveScale;
+            const dx_world = dx_cam * cosY + dy_cam * sinP * sinY;
+            const dy_world = dy_cam * cosP;
+            const dz_world = dx_cam * sinY - dy_cam * sinP * cosY;
+            return prev.map(
+              (n) => n.id === draggedNodeIdRef.current ? {
+                ...n,
+                x: n.x + dx_world,
+                y: n.y + dy_world,
+                z: (n.z ?? 0) + dz_world
+              } : n
+            );
+          });
+        }
       } else if (isOrbitingRef.current) {
         if (viewModeRef.current === "2D") return;
         const dx = e.clientX - lastMousePosRef.current.x;
@@ -10502,6 +10596,9 @@ var StnTopologyGraphInternal = forwardRef39(
       isOrbitingRef.current = false;
       isDraggingNodeRef.current = false;
       draggedNodeIdRef.current = null;
+      setTimeout(() => {
+        hasDraggedRef.current = false;
+      }, 120);
     }, []);
     useEffect14(() => {
       window.addEventListener("mousemove", handleMouseMove);
@@ -10620,6 +10717,8 @@ var StnTopologyGraphInternal = forwardRef39(
       onNodeClick,
       onNodeContextMenu,
       onLinkClick,
+      onLinkHover,
+      linkLabelMode,
       onCanvasClick,
       onBackgroundClick,
       handleNodeMouseDown,
@@ -10632,7 +10731,8 @@ var StnTopologyGraphInternal = forwardRef39(
       renderBadge,
       renderNodeLabel,
       hoveredNodeId,
-      setHoveredNodeId
+      setHoveredNodeId,
+      hasDraggedRef
     };
     return /* @__PURE__ */ jsx63(StnTopologyGraphContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs50(
       "div",
@@ -10694,8 +10794,8 @@ StnTopologyGraph2.Viewport = StnTopologyGraphViewport;
 StnTopologyGraph2.displayName = "StnTopologyGraph";
 
 // src/components/topology/StnTopologyNodeContextMenu.tsx
-import { forwardRef as forwardRef40 } from "react";
-import { jsx as jsx64, jsxs as jsxs51 } from "react/jsx-runtime";
+import { forwardRef as forwardRef40, useState as useState18, useRef as useRef12, 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",
   "\u2461": "2",
@@ -10716,93 +10816,195 @@ var StepBadge = ({ num }) => {
 };
 var StnTopologyNodeContextMenu = forwardRef40(
   function StnTopologyNodeContextMenu2({ target, onClose, onAction }, ref) {
+    const [submenuAnchorEl, setSubmenuAnchorEl] = useState18(null);
+    const closeTimerRef = useRef12(null);
+    useEffect15(() => {
+      if (!target) {
+        if (closeTimerRef.current) {
+          clearTimeout(closeTimerRef.current);
+          closeTimerRef.current = null;
+        }
+        setSubmenuAnchorEl(null);
+      }
+    }, [target]);
+    useEffect15(() => {
+      return () => {
+        if (closeTimerRef.current) {
+          clearTimeout(closeTimerRef.current);
+        }
+      };
+    }, []);
     if (!target) return null;
+    const handleClose = () => {
+      if (closeTimerRef.current) {
+        clearTimeout(closeTimerRef.current);
+        closeTimerRef.current = null;
+      }
+      setSubmenuAnchorEl(null);
+      onClose();
+    };
     const handleItemClick = (key) => {
-      onAction?.(key, target.node);
+      if (closeTimerRef.current) {
+        clearTimeout(closeTimerRef.current);
+        closeTimerRef.current = null;
+      }
+      setSubmenuAnchorEl(null);
+      if (target) {
+        onAction?.(key, target.node);
+      }
       onClose();
     };
-    return /* @__PURE__ */ jsxs51(
-      StnMenu,
-      {
-        ref,
-        open: Boolean(target),
-        onClose,
-        anchorReference: "anchorPosition",
-        anchorPosition: target ? { top: target.mouseY, left: target.mouseX } : void 0,
-        width: "w200",
-        elevation: 3,
-        children: [
-          /* @__PURE__ */ jsx64(StnMenu.Subheader, { children: target.node.label || `NODE-${target.node.id}` }),
-          /* @__PURE__ */ jsx64(
-            StnMenu.Item,
-            {
-              icon: /* @__PURE__ */ jsx64(StepBadge, { num: "1" }),
-              onClick: () => handleItemClick("create-node"),
-              children: "\uC2E0\uADDC\uB178\uB4DC \uC0DD\uC131"
-            }
-          ),
-          /* @__PURE__ */ jsx64(
-            StnMenu.Item,
-            {
-              icon: /* @__PURE__ */ jsx64(StepBadge, { num: "2" }),
-              onClick: () => handleItemClick("create-link"),
-              children: "\uB9C1\uD06C \uC0DD\uC131"
-            }
-          ),
-          /* @__PURE__ */ jsx64(
-            StnMenu.Item,
-            {
-              icon: /* @__PURE__ */ jsx64(StepBadge, { num: "3" }),
-              onClick: () => handleItemClick("edit-links"),
-              children: "\uB9C1\uD06C \uD3B8\uC9D1 (\uBAA9\uB85D)"
-            }
-          ),
-          /* @__PURE__ */ jsx64(
-            StnMenu.Item,
-            {
-              icon: /* @__PURE__ */ jsx64(StepBadge, { num: "4" }),
-              onClick: () => handleItemClick("create-service"),
-              children: "\uC11C\uBE44\uC2A4 \uC0DD\uC131"
-            }
-          ),
-          /* @__PURE__ */ jsx64(StnMenu.Divider, {}),
-          /* @__PURE__ */ jsx64(
-            StnMenu.Item,
-            {
-              icon: "line/activity",
-              onClick: () => handleItemClick("create-tunnel"),
-              children: "\uD130\uB110 \uC0DD\uC131"
-            }
-          ),
-          /* @__PURE__ */ jsx64(
-            StnMenu.Item,
-            {
-              icon: "line/settings",
-              shortcut: /* @__PURE__ */ jsx64(StnIcon, { name: "line/chevron-right", size: 14 }),
-              onClick: () => handleItemClick("individual-design"),
-              children: "\uAC1C\uBCC4 \uC124\uACC4"
-            }
-          ),
-          /* @__PURE__ */ jsx64(StnMenu.Divider, {}),
-          /* @__PURE__ */ jsx64(
-            StnMenu.Item,
-            {
-              icon: "line/refresh",
-              onClick: () => handleItemClick("sync-request"),
-              children: "\uB3D9\uAE30\uD654 \uC694\uCCAD"
-            }
-          ),
-          /* @__PURE__ */ jsx64(
-            StnMenu.Item,
-            {
-              icon: "line/terminal",
-              onClick: () => handleItemClick("device-connect"),
-              children: "\uC7A5\uBE44 \uC811\uC18D"
-            }
-          )
-        ]
+    const handleEnterIndividualDesign = (e) => {
+      if (closeTimerRef.current) {
+        clearTimeout(closeTimerRef.current);
+        closeTimerRef.current = null;
       }
-    );
+      setSubmenuAnchorEl(e.currentTarget);
+    };
+    const handleLeaveIndividualDesign = () => {
+      closeTimerRef.current = window.setTimeout(() => {
+        setSubmenuAnchorEl(null);
+      }, 180);
+    };
+    const handleHoverOtherItem = () => {
+      if (closeTimerRef.current) {
+        clearTimeout(closeTimerRef.current);
+        closeTimerRef.current = null;
+      }
+      setSubmenuAnchorEl(null);
+    };
+    const handleEnterSubmenu = () => {
+      if (closeTimerRef.current) {
+        clearTimeout(closeTimerRef.current);
+        closeTimerRef.current = null;
+      }
+    };
+    const handleLeaveSubmenu = () => {
+      closeTimerRef.current = window.setTimeout(() => {
+        setSubmenuAnchorEl(null);
+      }, 180);
+    };
+    return /* @__PURE__ */ jsxs51(Fragment9, { children: [
+      /* @__PURE__ */ jsxs51(
+        StnMenu,
+        {
+          ref,
+          open: Boolean(target),
+          onClose: handleClose,
+          anchorReference: "anchorPosition",
+          anchorPosition: target ? { top: target.mouseY, left: target.mouseX } : void 0,
+          width: "w200",
+          elevation: 3,
+          children: [
+            /* @__PURE__ */ jsx64(StnMenu.Subheader, { children: target.node.label || `NODE-${target.node.id}` }),
+            /* @__PURE__ */ jsx64(
+              StnMenu.Item,
+              {
+                icon: /* @__PURE__ */ jsx64(StepBadge, { num: "1" }),
+                onMouseEnter: handleHoverOtherItem,
+                onClick: () => handleItemClick("create-node"),
+                children: "\uC2E0\uADDC\uB178\uB4DC \uC0DD\uC131"
+              }
+            ),
+            /* @__PURE__ */ jsx64(
+              StnMenu.Item,
+              {
+                icon: /* @__PURE__ */ jsx64(StepBadge, { num: "2" }),
+                onMouseEnter: handleHoverOtherItem,
+                onClick: () => handleItemClick("create-link"),
+                children: "\uB9C1\uD06C \uC0DD\uC131"
+              }
+            ),
+            /* @__PURE__ */ jsx64(
+              StnMenu.Item,
+              {
+                icon: /* @__PURE__ */ jsx64(StepBadge, { num: "3" }),
+                onMouseEnter: handleHoverOtherItem,
+                onClick: () => handleItemClick("edit-links"),
+                children: "\uB9C1\uD06C \uD3B8\uC9D1 (\uBAA9\uB85D)"
+              }
+            ),
+            /* @__PURE__ */ jsx64(
+              StnMenu.Item,
+              {
+                icon: /* @__PURE__ */ jsx64(StepBadge, { num: "4" }),
+                onMouseEnter: handleHoverOtherItem,
+                onClick: () => handleItemClick("create-service"),
+                children: "\uC11C\uBE44\uC2A4 \uC0DD\uC131"
+              }
+            ),
+            /* @__PURE__ */ jsx64(StnMenu.Divider, {}),
+            /* @__PURE__ */ jsx64(
+              StnMenu.Item,
+              {
+                icon: "line/activity",
+                onMouseEnter: handleHoverOtherItem,
+                onClick: () => handleItemClick("create-tunnel"),
+                children: "\uD130\uB110 \uC0DD\uC131"
+              }
+            ),
+            /* @__PURE__ */ jsx64(
+              StnMenu.Item,
+              {
+                icon: "line/tool",
+                shortcut: /* @__PURE__ */ jsx64(StnIcon, { name: "line/chevron-right", size: 14 }),
+                selected: Boolean(submenuAnchorEl),
+                onMouseEnter: handleEnterIndividualDesign,
+                onMouseLeave: handleLeaveIndividualDesign,
+                onClick: handleEnterIndividualDesign,
+                children: "\uAC1C\uBCC4 \uC124\uACC4"
+              }
+            ),
+            /* @__PURE__ */ jsx64(StnMenu.Divider, {}),
+            /* @__PURE__ */ jsx64(
+              StnMenu.Item,
+              {
+                icon: "line/refresh",
+                onMouseEnter: handleHoverOtherItem,
+                onClick: () => handleItemClick("sync-request"),
+                children: "\uB3D9\uAE30\uD654 \uC694\uCCAD"
+              }
+            ),
+            /* @__PURE__ */ jsx64(
+              StnMenu.Item,
+              {
+                icon: "line/terminal",
+                onMouseEnter: handleHoverOtherItem,
+                onClick: () => handleItemClick("device-connect"),
+                children: "\uC7A5\uBE44 \uC811\uC18D"
+              }
+            )
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs51(
+        StnMenu,
+        {
+          open: Boolean(target && submenuAnchorEl),
+          anchorEl: submenuAnchorEl,
+          anchorOrigin: { vertical: "top", horizontal: "right" },
+          transformOrigin: { vertical: "top", horizontal: "left" },
+          hideBackdrop: true,
+          width: "w160",
+          elevation: 3,
+          onMouseEnter: handleEnterSubmenu,
+          onMouseLeave: handleLeaveSubmenu,
+          children: [
+            /* @__PURE__ */ jsx64(StnMenu.Subheader, { children: "\uB9C1\uD06C \uC694\uC18C" }),
+            /* @__PURE__ */ jsx64(StnMenu.Item, { onClick: () => handleItemClick("design-port"), children: "\uD3EC\uD2B8" }),
+            /* @__PURE__ */ jsx64(StnMenu.Item, { onClick: () => handleItemClick("design-interface"), children: "\uC778\uD130\uD398\uC774\uC2A4" }),
+            /* @__PURE__ */ jsx64(StnMenu.Item, { onClick: () => handleItemClick("design-ospf"), children: "OSPF" }),
+            /* @__PURE__ */ jsx64(StnMenu.Item, { onClick: () => handleItemClick("design-mpls-rsvp"), children: "MPLS/RSVP" }),
+            /* @__PURE__ */ jsx64(StnMenu.Subheader, { children: "\uD130\uB110 \uC694\uC18C" }),
+            /* @__PURE__ */ jsx64(StnMenu.Item, { onClick: () => handleItemClick("design-path"), children: "PATH" }),
+            /* @__PURE__ */ jsx64(StnMenu.Item, { onClick: () => handleItemClick("design-lsp"), children: "LSP" }),
+            /* @__PURE__ */ jsx64(StnMenu.Item, { onClick: () => handleItemClick("design-sdp"), children: "SDP" }),
+            /* @__PURE__ */ jsx64(StnMenu.Subheader, { children: "\uD68C\uC120 \uC694\uC18C" }),
+            /* @__PURE__ */ jsx64(StnMenu.Item, { onClick: () => handleItemClick("design-epipe"), children: "EPIPE" })
+          ]
+        }
+      )
+    ] });
   }
 );
 StnTopologyNodeContextMenu.displayName = "StnTopologyNodeContextMenu";
@@ -10909,7 +11111,7 @@ function StnStatusList({ className, children, ...rest }) {
 }
 
 // src/components/StnWidget.tsx
-import { Fragment as Fragment10, jsx as jsx68, jsxs as jsxs55 } from "react/jsx-runtime";
+import { Fragment as Fragment11, jsx as jsx68, jsxs as jsxs55 } from "react/jsx-runtime";
 var SHELL_PUB_CLASS = {
   card: "",
   "fault-panel": "",
@@ -10944,7 +11146,7 @@ function readWidgetSlot(type) {
 function flattenWidgetChildren(children) {
   const out = [];
   Children7.forEach(children, (child) => {
-    if (isValidElement10(child) && child.type === Fragment9) {
+    if (isValidElement10(child) && child.type === Fragment10) {
       const fragmentProps = child.props;
       out.push(...flattenWidgetChildren(fragmentProps.children));
       return;
@@ -11074,7 +11276,7 @@ function StnWidgetHeaderInner({
       title != null || badge != null ? typeof title === "string" || title == null ? /* @__PURE__ */ jsxs55("div", { className: "stn-widget__title-wrap", children: [
         typeof title === "string" ? /* @__PURE__ */ jsx68("p", { className: cn("stn-widget__title", titleSize, titleWeight), title, children: title }) : null,
         badge
-      ] }) : /* @__PURE__ */ jsxs55(Fragment10, { children: [
+      ] }) : /* @__PURE__ */ jsxs55(Fragment11, { children: [
         title,
         badge
       ] }) : null
@@ -11433,7 +11635,7 @@ function PubChartSample({
 }
 
 // src/patterns/alertCenter/StnAlertCenterPanel.tsx
-import { useState as useState18 } from "react";
+import { useState as useState19 } from "react";
 import {
   STN_ALERT_CENTER_TABS
 } from "@stn-uiux/pub-ui/data/stnAlertCenter";
@@ -11565,7 +11767,7 @@ function StnAlertCenterPanel({
   closeLabel = "\uB2EB\uAE30",
   className
 }) {
-  const [activeTab, setActiveTab] = useState18(defaultTab);
+  const [activeTab, setActiveTab] = useState19(defaultTab);
   const alertCount = alerts.length;
   const resolvedTitleOverflow = titleOverflow ?? textOverflow;
   const resolvedDescOverflow = descOverflow ?? textOverflow;
@@ -11873,7 +12075,7 @@ var StnSideNavLogo = forwardRef42(
 );
 
 // src/components/sideNav/StnSideNavHeader.tsx
-import { Fragment as Fragment11, jsx as jsx75, jsxs as jsxs60 } from "react/jsx-runtime";
+import { Fragment as Fragment12, jsx as jsx75, jsxs as jsxs60 } from "react/jsx-runtime";
 var StnSideNavHeader = forwardRef43(function StnSideNavHeader2({
   children,
   border = false,
@@ -11897,7 +12099,7 @@ var StnSideNavHeader = forwardRef43(function StnSideNavHeader2({
         className
       ),
       ...rest,
-      children: children ?? /* @__PURE__ */ jsxs60(Fragment11, { children: [
+      children: children ?? /* @__PURE__ */ jsxs60(Fragment12, { children: [
         /* @__PURE__ */ jsx75(StnSideNavLogo, {}),
         shouldShowClose ? /* @__PURE__ */ jsx75(
           StnButton,
@@ -11961,9 +12163,9 @@ var StnSideNavMenu = forwardRef44(function StnSideNavMenu2({
 // src/components/sideNav/StnSideNavGroup.tsx
 import {
   forwardRef as forwardRef45,
-  useEffect as useEffect15,
-  useRef as useRef12,
-  useState as useState19
+  useEffect as useEffect16,
+  useRef as useRef13,
+  useState as useState20
 } from "react";
 import { jsx as jsx77, jsxs as jsxs61 } from "react/jsx-runtime";
 var StnSideNavGroup = forwardRef45(function StnSideNavGroup2({
@@ -11982,13 +12184,13 @@ var StnSideNavGroup = forwardRef45(function StnSideNavGroup2({
   ...rest
 }, ref) {
   const { collapsed } = useSideNav();
-  const [internalOpen, setInternalOpen] = useState19(defaultOpen);
+  const [internalOpen, setInternalOpen] = useState20(defaultOpen);
   const isOpen = openProp ?? internalOpen;
   const isDropdown = Boolean(dropdown || variant === "dropdown");
   const isTransparent = dropdownVariant === "transparent" || dropdownBackground === false;
   const isUp = direction === "up";
-  const groupRef = useRef12(null);
-  useEffect15(() => {
+  const groupRef = useRef13(null);
+  useEffect16(() => {
     if (!isDropdown || !isOpen) return;
     const handlePointerDown = (e) => {
       if (groupRef.current && !groupRef.current.contains(e.target)) {
@@ -12144,13 +12346,13 @@ var StnSideNavWatermark = forwardRef49(
 );
 
 // src/components/sideNav/StnSideNavMobileTrigger.tsx
-import { forwardRef as forwardRef50, useEffect as useEffect16, useState as useState20 } from "react";
+import { forwardRef as forwardRef50, useEffect as useEffect17, useState as useState21 } from "react";
 import { jsx as jsx82, jsxs as jsxs62 } from "react/jsx-runtime";
 var StnSideNavMobileTrigger = forwardRef50(
   function StnSideNavMobileTrigger2({ floating = false, className, children, onClick, ...rest }, ref) {
     const { onToggleMobileOpen, mobileOpen: contextMobileOpen } = useSideNav();
-    const [fallbackMobileOpen, setFallbackMobileOpen] = useState20(false);
-    useEffect16(() => {
+    const [fallbackMobileOpen, setFallbackMobileOpen] = useState21(false);
+    useEffect17(() => {
       if (onToggleMobileOpen) return;
       const handleStateChange = (e) => {
         const customEvent = e;
@@ -12297,13 +12499,13 @@ var StnSideNavSubNav = forwardRef52(
 import {
   forwardRef as forwardRef53,
   useCallback as useCallback11,
-  useEffect as useEffect17,
+  useEffect as useEffect18,
   useMemo as useMemo5,
-  useState as useState21
+  useState as useState22
 } from "react";
 import { jsx as jsx85, jsxs as jsxs63 } from "react/jsx-runtime";
 function useControllableState(controlledValue, defaultValue, onChange) {
-  const [internalState, setInternalState] = useState21(defaultValue);
+  const [internalState, setInternalState] = useState22(defaultValue);
   const isControlled = controlledValue !== void 0;
   const value = isControlled ? controlledValue : internalState;
   const setValue = useCallback11(
@@ -12361,7 +12563,7 @@ var StnSideNavigationRoot = forwardRef53(function StnSideNavigationRoot2({
   const handleToggleMobileOpen = useCallback11(() => {
     setMobileOpen(!mobileOpen);
   }, [mobileOpen, setMobileOpen]);
-  useEffect17(() => {
+  useEffect18(() => {
     const handleGlobalToggle = () => {
       setMobileOpen(!mobileOpen);
     };
@@ -12370,7 +12572,7 @@ var StnSideNavigationRoot = forwardRef53(function StnSideNavigationRoot2({
       window.removeEventListener("stn-side-nav-toggle-mobile", handleGlobalToggle);
     };
   }, [mobileOpen, setMobileOpen]);
-  useEffect17(() => {
+  useEffect18(() => {
     window.dispatchEvent(
       new CustomEvent("stn-side-nav-mobile-change", {
         detail: { mobileOpen }
@@ -12444,16 +12646,16 @@ var StnSideNavigation = Object.assign(StnSideNavigationRoot, {
 
 // src/components/StnBreadcrumb.tsx
 import {
-  Fragment as Fragment12,
-  useEffect as useEffect18,
+  Fragment as Fragment13,
+  useEffect as useEffect19,
   useId as useId17,
-  useRef as useRef13,
-  useState as useState22
+  useRef as useRef14,
+  useState as useState23
 } from "react";
 import {
   STN_BREADCRUMB_ICON_SRC
 } from "@stn-uiux/pub-ui/data/stnBreadcrumb";
-import { Fragment as Fragment13, jsx as jsx86, jsxs as jsxs64 } from "react/jsx-runtime";
+import { Fragment as Fragment14, jsx as jsx86, jsxs as jsxs64 } from "react/jsx-runtime";
 function maskStyle3(src) {
   return { maskImage: `url('${src}')`, WebkitMaskImage: `url('${src}')` };
 }
@@ -12486,7 +12688,7 @@ function SegmentContent({
   label,
   menu
 }) {
-  return /* @__PURE__ */ jsxs64(Fragment13, { children: [
+  return /* @__PURE__ */ jsxs64(Fragment14, { children: [
     iconSrc ? /* @__PURE__ */ jsx86(BreadcrumbIcon, { src: iconSrc }) : null,
     /* @__PURE__ */ jsx86("span", { className: "stn-breadcrumb__label", children: label }),
     menu ? /* @__PURE__ */ jsx86(BreadcrumbCaret, {}) : null
@@ -12524,8 +12726,8 @@ function BreadcrumbMenuList({
   ) }, option.id)) });
 }
 function useDismissibleMenu(open, onClose) {
-  const rootRef = useRef13(null);
-  useEffect18(() => {
+  const rootRef = useRef14(null);
+  useEffect19(() => {
     if (!open) return;
     const onPointerDown = (event) => {
       if (!rootRef.current?.contains(event.target)) onClose();
@@ -12547,7 +12749,7 @@ function BreadcrumbSegment({
   isCurrent
 }) {
   const menuId = useId17();
-  const [open, setOpen] = useState22(false);
+  const [open, setOpen] = useState23(false);
   const menuItems = item.menuItems ?? [];
   const showMenu = hasSegmentMenu(item) && !isCurrent;
   const canOpenMenu = showMenu && menuItems.length > 0;
@@ -12605,7 +12807,7 @@ function BreadcrumbBack({
   href,
   onClick
 }) {
-  const content = /* @__PURE__ */ jsxs64(Fragment13, { children: [
+  const content = /* @__PURE__ */ jsxs64(Fragment14, { children: [
     /* @__PURE__ */ jsx86(
       "span",
       {
@@ -12641,7 +12843,7 @@ function BreadcrumbCollapsed({
   items,
   menuId
 }) {
-  const [open, setOpen] = useState22(false);
+  const [open, setOpen] = useState23(false);
   const rootRef = useDismissibleMenu(open, () => setOpen(false));
   const menuItems = items.map((item) => ({
     id: item.id,
@@ -12729,19 +12931,19 @@ function StnBreadcrumb({
           /* @__PURE__ */ jsx86(BreadcrumbIcon, { src: STN_BREADCRUMB_ICON_SRC.home }),
           /* @__PURE__ */ jsx86("span", { className: "blind", children: homeLabel })
         ] }) }) : null,
-        head.map((item, index) => /* @__PURE__ */ jsxs64(Fragment12, { children: [
+        head.map((item, index) => /* @__PURE__ */ jsxs64(Fragment13, { children: [
           !reverse && (showHome || index > 0 || leadSeparator) || reverse && (index > 0 || leadSeparator) ? /* @__PURE__ */ jsx86(BreadcrumbSeparator, {}) : null,
           renderTrailItem(item)
         ] }, item.id)),
-        hidden.length > 0 ? /* @__PURE__ */ jsxs64(Fragment13, { children: [
+        hidden.length > 0 ? /* @__PURE__ */ jsxs64(Fragment14, { children: [
           /* @__PURE__ */ jsx86(BreadcrumbSeparator, {}),
           /* @__PURE__ */ jsx86(BreadcrumbCollapsed, { items: hidden, menuId })
         ] }) : null,
-        tail.map((item) => /* @__PURE__ */ jsxs64(Fragment12, { children: [
+        tail.map((item) => /* @__PURE__ */ jsxs64(Fragment13, { children: [
           /* @__PURE__ */ jsx86(BreadcrumbSeparator, {}),
           renderTrailItem(item)
         ] }, item.id)),
-        reverse && showHome ? /* @__PURE__ */ jsxs64(Fragment13, { children: [
+        reverse && showHome ? /* @__PURE__ */ jsxs64(Fragment14, { children: [
           /* @__PURE__ */ jsx86(BreadcrumbSeparator, {}),
           /* @__PURE__ */ jsx86("li", { className: "stn-breadcrumb__item stn-breadcrumb__item--home", children: /* @__PURE__ */ jsxs64("a", { className: "stn-breadcrumb__home", href: homeHref, onClick: onHomeClick, children: [
             /* @__PURE__ */ jsx86(BreadcrumbIcon, { src: STN_BREADCRUMB_ICON_SRC.home }),
@@ -12754,7 +12956,7 @@ function StnBreadcrumb({
 }
 
 // src/components/StnHeaderTitle.tsx
-import { useEffect as useEffect19, useState as useState23 } from "react";
+import { useEffect as useEffect20, useState as useState24 } from "react";
 import { STN_HEADER_TITLE_FRAME } from "@stn-uiux/pub-ui/data/stnHeaderTitle";
 import { jsx as jsx87, jsxs as jsxs65 } from "react/jsx-runtime";
 var KO_WEEKDAY_SHORT = ["\uC77C", "\uC6D4", "\uD654", "\uC218", "\uBAA9", "\uAE08", "\uD1A0"];
@@ -12831,8 +13033,8 @@ function StnHeaderTitleFramePreview({ className }) {
   return /* @__PURE__ */ jsx87("div", { className: cn("stn-header-title__frame-only", className), children: /* @__PURE__ */ jsx87(HeaderTitleFrame, { preview: true }) });
 }
 function useLiveClock(enabled) {
-  const [now, setNow] = useState23(() => /* @__PURE__ */ new Date());
-  useEffect19(() => {
+  const [now, setNow] = useState24(() => /* @__PURE__ */ new Date());
+  useEffect20(() => {
     if (!enabled) return;
     const id = window.setInterval(() => setNow(/* @__PURE__ */ new Date()), 1e3);
     return () => window.clearInterval(id);
@@ -13717,14 +13919,14 @@ function DashboardPageScaffold({
 }
 
 // src/patterns/scaffold/AlertCenterPageScaffold.tsx
-import { useMemo as useMemo6, useState as useState24 } from "react";
+import { useMemo as useMemo6, useState as useState25 } from "react";
 import {
   STN_ALERT_CENTER_DEMO_ALERTS,
   STN_ALERT_CENTER_DEMO_DEPLOY,
   STN_ALERT_CENTER_DEMO_WORK
 } from "@stn-uiux/pub-ui/data/stnAlertCenter";
 import { systemIconSrc } from "@stn-uiux/pub-ui/data/stnSystemIcons";
-import { Fragment as Fragment14, jsx as jsx95, jsxs as jsxs69 } from "react/jsx-runtime";
+import { Fragment as Fragment15, jsx as jsx95, jsxs as jsxs69 } from "react/jsx-runtime";
 function defaultTopologyHeader(_clock) {
   return /* @__PURE__ */ jsx95(StnHeader, { variant: "widget" });
 }
@@ -13743,7 +13945,7 @@ function AlertCenterPageScaffold({
   defaultGnbOpen = true,
   ...shellProps
 }) {
-  const [gnbOpen, setGnbOpen] = useState24(defaultGnbOpen);
+  const [gnbOpen, setGnbOpen] = useState25(defaultGnbOpen);
   const panel = useMemo6(
     () => gnbAlertPanel ?? /* @__PURE__ */ jsx95(
       StnAlertCenterPanel,
@@ -13756,7 +13958,7 @@ function AlertCenterPageScaffold({
     [gnbAlertPanel]
   );
   const sideNav = useMemo6(
-    () => gnbProp ?? /* @__PURE__ */ jsxs69(Fragment14, { children: [
+    () => gnbProp ?? /* @__PURE__ */ jsxs69(Fragment15, { children: [
       /* @__PURE__ */ jsxs69(
         StnSideNavigation,
         {
@@ -13811,7 +14013,7 @@ function AlertCenterPageScaffold({
 }
 
 // src/patterns/scaffold/LoginPageScaffold.tsx
-import { useState as useState25 } from "react";
+import { useState as useState26 } from "react";
 import { jsx as jsx96, jsxs as jsxs70 } from "react/jsx-runtime";
 var LOGIN_TABS = [
   { value: "normal", label: "\uC77C\uBC18 \uB85C\uADF8\uC778" },
@@ -13823,9 +14025,9 @@ function DefaultLoginForm({
   signUpHref = "#",
   recoverHref = "#"
 }) {
-  const [mode, setMode] = useState25("normal");
-  const [userId, setUserId] = useState25("");
-  const [password, setPassword] = useState25("");
+  const [mode, setMode] = useState26("normal");
+  const [userId, setUserId] = useState26("");
+  const [password, setPassword] = useState26("");
   function handleSubmit(e) {
     e.preventDefault();
     onLogin?.(userId, password);
@@ -13972,7 +14174,7 @@ import React4 from "react";
 import {
   STN_EMPTY_STATE_PRESETS
 } from "@stn-uiux/pub-ui/data/stnEmptyState";
-import { Fragment as Fragment15, jsx as jsx97, jsxs as jsxs71 } from "react/jsx-runtime";
+import { Fragment as Fragment16, jsx as jsx97, jsxs as jsxs71 } from "react/jsx-runtime";
 var ICON_PX2 = {
   sm: 40,
   md: 56,
@@ -14019,7 +14221,7 @@ var StnEmptyState = React4.forwardRef(
     const showGraphic = !hideIcon && visual !== "icon" && Boolean(resolvedGraphic);
     const iconNode = hideIcon || showGraphic ? null : resolveIconNode3(icon, preset?.icon, size);
     const resolvedCode = hideCode ? void 0 : code ?? (showGraphic ? void 0 : preset?.code);
-    const actionNodes = actions ?? ((primaryAction || secondaryAction) && /* @__PURE__ */ jsxs71(Fragment15, { children: [
+    const actionNodes = actions ?? ((primaryAction || secondaryAction) && /* @__PURE__ */ jsxs71(Fragment16, { children: [
       primaryAction && /* @__PURE__ */ jsx97(
         StnButton,
         {
@@ -14228,9 +14430,9 @@ function renderChartState(loading, hasData, emptyText = "\uC870\uD68C\uB41C \uB3
 
 // src/components/StnBarChart.tsx
 import {
-  useState as useState26
+  useState as useState27
 } from "react";
-import { Fragment as Fragment16, jsx as jsx99, jsxs as jsxs73 } from "react/jsx-runtime";
+import { Fragment as Fragment17, jsx as jsx99, jsxs as jsxs73 } from "react/jsx-runtime";
 var DEFAULT_BAR_COLORS = STN_CHART_COLORS;
 var SIZE_WIDTH_MAP = {
   sm: "var(--stn-chart-bar-width-sm)",
@@ -14261,8 +14463,8 @@ function StnBarChart({
   style,
   ...rest
 }) {
-  const [internalHighlight, setInternalHighlight] = useState26(null);
-  const [hoveredIndex, setHoveredIndex] = useState26(null);
+  const [internalHighlight, setInternalHighlight] = useState27(null);
+  const [hoveredIndex, setHoveredIndex] = useState27(null);
   const isHorizontal = direction === "horizontal" || orientation === "horizontal";
   if (loading || !data || data.length === 0) {
     const emptyContainerStyle = {
@@ -14343,7 +14545,7 @@ function StnBarChart({
       children: [
         /* @__PURE__ */ jsx99("div", { className: "stn-chart-bar__body", children: isHorizontal ? (
           /* ==================== 가로 막대 (Horizontal) ==================== */
-          /* @__PURE__ */ jsxs73(Fragment16, { children: [
+          /* @__PURE__ */ jsxs73(Fragment17, { children: [
             showXAxis && /* @__PURE__ */ jsx99("div", { className: "stn-chart-bar__grid-v", "aria-hidden": "true", children: gridCols.map((col, cIdx) => /* @__PURE__ */ jsxs73("div", { className: "stn-chart-bar__grid-v-col", children: [
               /* @__PURE__ */ jsx99(
                 "div",
@@ -14446,7 +14648,7 @@ function StnBarChart({
           ] })
         ) : (
           /* ==================== 세로 막대 (Vertical) ==================== */
-          /* @__PURE__ */ jsxs73(Fragment16, { children: [
+          /* @__PURE__ */ jsxs73(Fragment17, { children: [
             showYAxis && /* @__PURE__ */ jsx99("div", { className: "stn-chart-bar__grid", "aria-hidden": "true", children: gridRows.map((row, rIdx) => /* @__PURE__ */ jsxs73("div", { className: "stn-chart-bar__grid-row", children: [
               /* @__PURE__ */ jsx99("span", { className: "stn-chart-bar__axis-label", children: row.label }),
               /* @__PURE__ */ jsx99(
@@ -14567,9 +14769,9 @@ function StnBarChart({
 // src/components/StnPieChart.tsx
 import {
   useId as useId18,
-  useState as useState27
+  useState as useState28
 } from "react";
-import { Fragment as Fragment17, jsx as jsx100, jsxs as jsxs74 } from "react/jsx-runtime";
+import { Fragment as Fragment18, jsx as jsx100, jsxs as jsxs74 } from "react/jsx-runtime";
 var DEFAULT_PIE_COLORS = STN_CHART_COLORS;
 var R = 38;
 var CIRCUMFERENCE = 2 * Math.PI * R;
@@ -14597,7 +14799,7 @@ function StnPieChart({
   ...rest
 }) {
   const filterId = useId18().replace(/:/g, "");
-  const [hoveredIndex, setHoveredIndex] = useState27(null);
+  const [hoveredIndex, setHoveredIndex] = useState28(null);
   const hasData = Boolean(data && data.length > 0);
   if (loading || !hasData) {
     return /* @__PURE__ */ jsx100(
@@ -14696,7 +14898,7 @@ function StnPieChart({
                   seg.id ?? sIdx
                 );
               }),
-              variant === "gauge" ? /* @__PURE__ */ jsxs74(Fragment17, { children: [
+              variant === "gauge" ? /* @__PURE__ */ jsxs74(Fragment18, { children: [
                 /* @__PURE__ */ jsx100("circle", { className: "stn-chart-gauge__center-outer", cx: "45", cy: "45", r: "31" }),
                 /* @__PURE__ */ jsx100(
                   "circle",
@@ -14709,7 +14911,7 @@ function StnPieChart({
                   }
                 ),
                 centerLabel && /* @__PURE__ */ jsx100("text", { className: "stn-chart-gauge__center-text", x: "45", y: "49", children: centerLabel })
-              ] }) : /* @__PURE__ */ jsxs74(Fragment17, { children: [
+              ] }) : /* @__PURE__ */ jsxs74(Fragment18, { children: [
                 /* @__PURE__ */ jsx100("circle", { className: "stn-chart-gauge__center-outer", cx: "45", cy: "45", r: "30" }),
                 centerLabel && /* @__PURE__ */ jsx100("text", { className: "stn-chart-gauge__center-text", x: "45", y: centerSubLabel ? "46" : "49", children: centerLabel }),
                 centerSubLabel && /* @__PURE__ */ jsx100(
@@ -14782,8 +14984,8 @@ var StnGaugeChart = StnPieChart;
 // src/components/StnLineChart.tsx
 import {
   useId as useId19,
-  useRef as useRef14,
-  useState as useState28
+  useRef as useRef15,
+  useState as useState29
 } from "react";
 import { jsx as jsx101, jsxs as jsxs75 } from "react/jsx-runtime";
 var DEFAULT_LINE_COLORS = STN_CHART_COLORS;
@@ -14824,8 +15026,8 @@ function StnLineChart({
   ...rest
 }) {
   const chartId = useId19().replace(/:/g, "");
-  const svgRef = useRef14(null);
-  const [hoverIndex, setHoverIndex] = useState28(null);
+  const svgRef = useRef15(null);
+  const [hoverIndex, setHoverIndex] = useState29(null);
   const valueFormatter = format ?? ((v) => formatChartValue(v, decimals));
   const hasDots = Boolean(showDots ?? showPoints ?? dots ?? false);
   const dotRadius = DOT_RADIUS_MAP[size] || 3;
@@ -15143,7 +15345,7 @@ function StnLineChart({
 // src/components/StnComboChart.tsx
 import {
   useId as useId20,
-  useState as useState29
+  useState as useState30
 } from "react";
 import { jsx as jsx102, jsxs as jsxs76 } from "react/jsx-runtime";
 var BAR_WIDTH_MAP = {
@@ -15184,8 +15386,8 @@ function StnComboChart({
   ...rest
 }) {
   const chartId = useId20().replace(/:/g, "");
-  const [internalHighlight, setInternalHighlight] = useState29(null);
-  const [hoverIndex, setHoverIndex] = useState29(null);
+  const [internalHighlight, setInternalHighlight] = useState30(null);
+  const [hoverIndex, setHoverIndex] = useState30(null);
   const hasData = Boolean(data && data.length > 0);
   if (loading || !hasData) {
     return /* @__PURE__ */ jsx102(