@stn-uiux/pub-ui-react 0.1.85 → 0.1.86

package/dist/index.js

@@ -1213,6 +1213,7 @@ var StnModal = forwardRef7(function StnModal2({
           {
             className: cn(
               "stn-pop__actions",
+              actionAlign === "left" && "stn-pop__actions--left",
               actionAlign === "center" && "stn-pop__actions--center",
               actionAlign === "right" && "stn-pop__actions--right",
               actionAlign === "between" && "stn-pop__actions--between"
@@ -1253,7 +1254,8 @@ var SIZE_CLASS2 = {
   sm: "stn-drawer--sm",
   md: "stn-drawer--md",
   lg: "stn-drawer--lg",
-  xl: "stn-drawer--xl"
+  xl: "stn-drawer--xl",
+  full: "stn-drawer--full"
 };
 var PLACEMENT_CLASS = {
   right: "stn-drawer--right",
@@ -3663,6 +3665,7 @@ function StnSplitViewSide({
   edge = "start",
   scrollable = true,
   scrollProps,
+  padding,
   ...rest
 }) {
   const { className: scrollClassName, ...scrollRest } = scrollProps ?? {};
@@ -3673,6 +3676,7 @@ function StnSplitViewSide({
         "stn-split-view__side",
         `stn-split-view__side--${width}`,
         edge === "end" && "stn-split-view__side--end",
+        padding && `stn-split-view__side--pad-${padding}`,
         className
       ),
       "data-stn-split-view": "side",
@@ -3693,11 +3697,20 @@ function StnSplitViewSide({
     }
   );
 }
-function StnSplitViewStage({ children, className, ...rest }) {
+function StnSplitViewStage({
+  children,
+  className,
+  padding = "none",
+  ...rest
+}) {
   return /* @__PURE__ */ jsx24(
     "div",
     {
-      className: cn("stn-split-view__stage", className),
+      className: cn(
+        "stn-split-view__stage",
+        padding !== "none" && `stn-split-view__stage--pad-${padding}`,
+        className
+      ),
       "data-stn-split-view": "stage",
       ...rest,
       children
@@ -3724,12 +3737,17 @@ function StnSplitViewOverlay({
     }
   );
 }
-var StnSplitView = forwardRef20(function StnSplitView2({ children, className, fill = true, ...rest }, ref) {
+var StnSplitView = forwardRef20(function StnSplitView2({ children, className, fill = true, padding, ...rest }, ref) {
   return /* @__PURE__ */ jsx24(
     "div",
     {
       ref,
-      className: cn("stn-split-view", fill && "stn-split-view--fill", className),
+      className: cn(
+        "stn-split-view",
+        fill && "stn-split-view--fill",
+        padding && `stn-split-view--pad-${padding}`,
+        className
+      ),
       "data-stn-split-view": "root",
       ...rest,
       children
@@ -7771,6 +7789,18 @@ var StnStack = forwardRef36(function StnStack2({
 });
 
 // src/components/topology/stnTopologyShared.ts
+var TOPOLOGY_NODE_SIZE_MAP = {
+  xs: 12,
+  // var(--stn-topology-node-radius-xs) = 12px (직경 24px, --stn-topology-node-size-xs)
+  sm: 16,
+  // var(--stn-topology-node-radius-sm) = 16px (직경 32px, --stn-topology-node-size-sm)
+  md: 20,
+  // var(--stn-topology-node-radius-md) = 20px (직경 40px, --stn-topology-node-size-md)
+  lg: 24,
+  // var(--stn-topology-node-radius-lg) = 24px (직경 48px, --stn-topology-node-size-lg)
+  xl: 28
+  // var(--stn-topology-node-radius-xl) = 28px (직경 56px, --stn-topology-node-size-xl)
+};
 var STN_TOPOLOGY_NODE_SHAPES = [
   "circle",
   "square",
@@ -7787,13 +7817,15 @@ var STN_TOPOLOGY_LINK_VARIANTS = [
   "line",
   "dot"
 ];
-var STN_TOPOLOGY_NODE_SIZES = ["xs", "sm", "md", "lg"];
+var STN_TOPOLOGY_NODE_SIZES = ["xs", "sm", "md", "lg", "xl"];
 var STN_TOPOLOGY_NODE_STATUSES = [
+  "point",
   "normal",
   "warning",
   "minor",
   "major",
-  "critical"
+  "critical",
+  "neutral"
 ];
 var STN_TOPOLOGY_NODE_ICONS = [
   "topology-wifi",
@@ -7829,6 +7861,12 @@ function resolveTopologyIconName(icon) {
   }
 }
 var STN_TOPOLOGY_STATUS_COLORS = {
+  point: {
+    main: "var(--stn-primary)",
+    glow: "color-mix(in srgb, var(--stn-primary) 50%, transparent)",
+    text: "var(--stn-primary)",
+    label: "\uD3EC\uC778\uD2B8/\uAC70\uC810"
+  },
   normal: {
     main: "var(--stn-grade-normal)",
     glow: "color-mix(in srgb, var(--stn-grade-normal) 35%, transparent)",
@@ -7858,13 +7896,20 @@ var STN_TOPOLOGY_STATUS_COLORS = {
     glow: "color-mix(in srgb, var(--stn-grade-critical) 80%, transparent)",
     text: "var(--stn-grade-critical)",
     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)",
+    label: "\uC911\uB9BD/\uB300\uAE30"
   }
 };
 var STN_TOPOLOGY_NODE_SIZE = {
   xs: { r: 12, icon: 14, countFont: 9, labelFont: 11, statusFont: 10, stroke: 1.2 },
   sm: { r: 16, icon: 16, countFont: 10, labelFont: 11, statusFont: 10, stroke: 1.4 },
   md: { r: 20, icon: 18, countFont: 11, labelFont: 12, statusFont: 11, stroke: 1.6 },
-  lg: { r: 24, icon: 22, countFont: 12, labelFont: 13, statusFont: 12, stroke: 1.8 }
+  lg: { r: 24, icon: 22, countFont: 12, labelFont: 13, statusFont: 12, stroke: 1.8 },
+  xl: { r: 28, icon: 26, countFont: 14, labelFont: 14, statusFont: 13, stroke: 2 }
 };
 function formatTopologyCount(count) {
   if (count == null || count === "") return "0";
@@ -7924,7 +7969,8 @@ var NODE_TITLE_VARIANT = {
   xs: "label-4",
   sm: "caption",
   md: "caption",
-  lg: "body-small"
+  lg: "body-small",
+  xl: "body-2"
 };
 function renderTopologyIcon(icon, color = "currentColor", px = 18) {
   if (!icon) return null;
@@ -8444,7 +8490,21 @@ import {
 // src/patterns/toolbar/StnFloatingToolbar.tsx
 import React3 from "react";
 import { jsx as jsx59 } from "react/jsx-runtime";
-var StnFloatingToolbar = React3.forwardRef(
+var StnFloatingToolbarDivider = React3.forwardRef(
+  ({ className, ...restProps }, ref) => {
+    return /* @__PURE__ */ jsx59(
+      "span",
+      {
+        ref,
+        className: cn("stn-floating-toolbar__divider", className),
+        "aria-hidden": "true",
+        ...restProps
+      }
+    );
+  }
+);
+StnFloatingToolbarDivider.displayName = "StnFloatingToolbar.Divider";
+var StnFloatingToolbarRoot = React3.forwardRef(
   ({ placement = "none", orientation = "horizontal", className, children, ...restProps }, ref) => {
     const placementClass = placement !== "none" ? `stn-floating-toolbar--${placement}` : "";
     const orientationClass = orientation === "vertical" ? "stn-floating-toolbar--vertical" : "";
@@ -8461,10 +8521,41 @@ var StnFloatingToolbar = React3.forwardRef(
     );
   }
 );
-StnFloatingToolbar.displayName = "StnFloatingToolbar";
+StnFloatingToolbarRoot.displayName = "StnFloatingToolbar";
+var StnFloatingToolbar = Object.assign(StnFloatingToolbarRoot, {
+  Divider: StnFloatingToolbarDivider
+});
 
 // src/components/topology/StnTopologyGraph.tsx
 import { Fragment as Fragment8, jsx as jsx60, jsxs as jsxs47 } from "react/jsx-runtime";
+var TOPOLOGY_STROKE_WIDTH_MAP = {
+  xs: 1,
+  sm: 1.6,
+  md: 2.4,
+  lg: 4,
+  xl: 6
+};
+var TOPOLOGY_OPACITY_MAP = {
+  faint: 0.15,
+  dim: 0.4,
+  solid: 1
+};
+function resolveTopologyStrokeWidth(strokeWidth, depthScale, zoom) {
+  const baseScale = depthScale * Math.min(1.2, Math.max(0.7, zoom));
+  if (typeof strokeWidth === "number") {
+    return Math.max(0.5, strokeWidth * baseScale);
+  }
+  const factor = strokeWidth ? TOPOLOGY_STROKE_WIDTH_MAP[strokeWidth] ?? 2.4 : 2.4;
+  return Math.max(0.8, factor * baseScale);
+}
+function resolveTopologyOpacity(opacity, baseDepthOpacity) {
+  if (opacity === void 0) return baseDepthOpacity;
+  if (typeof opacity === "number") {
+    return Math.max(0, Math.min(1, opacity));
+  }
+  const ratio = TOPOLOGY_OPACITY_MAP[opacity] ?? 1;
+  return Math.max(0.05, Math.min(1, baseDepthOpacity * ratio));
+}
 var DEFAULT_3D_GRAPH_NODES = [
   { id: 0, x: 0, y: 0, z: 0, isCore: true, status: "normal", label: "[\uC911\uC559 \uCF54\uC5B4] CORE-SW (10.10.1.1)" },
   // Top Branch
@@ -8692,6 +8783,10 @@ function StnTopologyGraphMinimap({ className, style }) {
             const n1 = nodeMap.get(link.source);
             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 === "point" ? "var(--stn-primary)" : null;
+            const strokeColor = link.color ?? statusColor ?? "var(--stn-border-strong)";
+            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__ */ jsx60(
               "line",
               {
@@ -8699,8 +8794,9 @@ function StnTopologyGraphMinimap({ className, style }) {
                 y1: n1.sy * 0.5,
                 x2: n2.sx * 0.5,
                 y2: n2.sy * 0.5,
-                stroke: "var(--stn-border-strong)",
-                strokeWidth: "1.2"
+                stroke: strokeColor,
+                strokeWidth: miniStrokeWidth,
+                opacity: miniOpacity
               },
               `mini-link-${idx}`
             );
@@ -8708,6 +8804,7 @@ function StnTopologyGraphMinimap({ className, style }) {
           projectedNodes.map((n) => {
             const cx = n.sx * 0.5;
             const cy = n.sy * 0.5;
+            const nodeOpacity = resolveTopologyOpacity(n.opacity, 1);
             if (n.isCore) {
               return /* @__PURE__ */ jsx60(
                 "polygon",
@@ -8715,7 +8812,8 @@ function StnTopologyGraphMinimap({ className, style }) {
                   points: `${cx},${cy - 5} ${cx + 5},${cy} ${cx},${cy + 5} ${cx - 5},${cy}`,
                   fill: "var(--stn-primary)",
                   stroke: "var(--stn-primary)",
-                  strokeWidth: "1"
+                  strokeWidth: "1",
+                  opacity: nodeOpacity
                 },
                 `mini-node-${n.id}`
               );
@@ -8727,7 +8825,8 @@ function StnTopologyGraphMinimap({ className, style }) {
                   cx,
                   cy,
                   r: "3.5",
-                  fill: "var(--stn-grade-critical)"
+                  fill: "var(--stn-grade-critical)",
+                  opacity: nodeOpacity
                 },
                 `mini-node-${n.id}`
               );
@@ -8739,7 +8838,8 @@ function StnTopologyGraphMinimap({ className, style }) {
                   cx,
                   cy,
                   r: "3",
-                  fill: "var(--stn-grade-warning)"
+                  fill: "var(--stn-grade-warning)",
+                  opacity: nodeOpacity
                 },
                 `mini-node-${n.id}`
               );
@@ -8750,7 +8850,8 @@ function StnTopologyGraphMinimap({ className, style }) {
                 cx,
                 cy,
                 r: "3",
-                fill: "var(--stn-border-subtle)"
+                fill: "var(--stn-border-subtle)",
+                opacity: nodeOpacity
               },
               `mini-node-${n.id}`
             );
@@ -8768,16 +8869,17 @@ function render3DNodeGlyph({
   strokeWidth
 }) {
   const surfaceBg = "var(--stn-elevation-surface-0)";
-  const innerRatio = 0.52;
-  const rSmall = r * innerRatio;
+  const innerRatioCircleSquare = 0.653;
+  const innerRatioOther = 0.52;
+  const rSmall = r * innerRatioCircleSquare;
   const strokeWSmall = Math.max(1.2, strokeWidth * 0.85);
   if (shape === "square") {
     const s = r * 1.8;
     const half = s / 2;
     const rx = Math.max(1.5, 2.5 * (r / 10));
-    const sSmall = s * innerRatio;
+    const sSmall = s * innerRatioCircleSquare;
     const halfSmall = sSmall / 2;
-    const rxSmall = rx * 0.65;
+    const rxSmall = rx * 0.75;
     if (variant === "solid") {
       return /* @__PURE__ */ jsx60("rect", { x: -halfSmall, y: -halfSmall, width: sSmall, height: sSmall, rx: rxSmall, fill: statusColor });
     }
@@ -8791,7 +8893,7 @@ function render3DNodeGlyph({
   }
   if (shape === "triangle") {
     const R2 = r * 1.25;
-    const RSmall = R2 * innerRatio;
+    const RSmall = R2 * innerRatioOther;
     const pts = trianglePoints(0, 0, R2);
     const ptsSmall = trianglePoints(0, 0, RSmall);
     if (variant === "solid") {
@@ -8808,8 +8910,8 @@ function render3DNodeGlyph({
   if (shape === "star") {
     const R2 = r * 1.3;
     const rIn = R2 * 0.48;
-    const RSmall = R2 * innerRatio;
-    const rInSmall = rIn * innerRatio;
+    const RSmall = R2 * innerRatioOther;
+    const rInSmall = rIn * innerRatioOther;
     const pts = starPoints(0, 0, R2, rIn);
     const ptsSmall = starPoints(0, 0, RSmall, rInSmall);
     if (variant === "solid") {
@@ -8825,7 +8927,7 @@ function render3DNodeGlyph({
   }
   if (shape === "diamond") {
     const R2 = r * 1.2;
-    const RSmall = R2 * innerRatio;
+    const RSmall = R2 * innerRatioOther;
     const pts = diamondPoints(0, 0, R2);
     const ptsSmall = diamondPoints(0, 0, RSmall);
     if (variant === "solid") {
@@ -8850,6 +8952,75 @@ function render3DNodeGlyph({
   }
   return /* @__PURE__ */ jsx60("circle", { cx: "0", cy: "0", r: rSmall, fill: surfaceBg, stroke: statusColor, strokeWidth: strokeWSmall });
 }
+function renderCurrentNodeRing({
+  shape,
+  r
+}) {
+  const bg = "var(--stn-topology-node-current-bg)";
+  if (shape === "square") {
+    const s = r * 1.8;
+    const half = s / 2;
+    const rx = Math.max(2, 2.5 * (r / 10));
+    return /* @__PURE__ */ jsx60("g", { className: "stn-topology-node__current-ring", children: /* @__PURE__ */ jsx60(
+      "rect",
+      {
+        x: -half - 7.5,
+        y: -half - 7.5,
+        width: s + 15,
+        height: s + 15,
+        rx: rx + 3.5,
+        fill: bg,
+        stroke: "none"
+      }
+    ) });
+  }
+  if (shape === "triangle") {
+    const R2 = r * 1.25;
+    return /* @__PURE__ */ jsx60("g", { className: "stn-topology-node__current-ring", children: /* @__PURE__ */ jsx60(
+      "polygon",
+      {
+        points: trianglePoints(0, 0, R2 + 8.5),
+        fill: bg,
+        stroke: "none",
+        strokeLinejoin: "round"
+      }
+    ) });
+  }
+  if (shape === "star") {
+    const R2 = r * 1.3;
+    const rIn = R2 * 0.48;
+    return /* @__PURE__ */ jsx60("g", { className: "stn-topology-node__current-ring", children: /* @__PURE__ */ jsx60(
+      "polygon",
+      {
+        points: starPoints(0, 0, R2 + 7.5, rIn + 3.5),
+        fill: bg,
+        stroke: "none",
+        strokeLinejoin: "round"
+      }
+    ) });
+  }
+  if (shape === "diamond") {
+    const R2 = r * 1.2;
+    return /* @__PURE__ */ jsx60("g", { className: "stn-topology-node__current-ring", children: /* @__PURE__ */ jsx60(
+      "polygon",
+      {
+        points: diamondPoints(0, 0, R2 + 8),
+        fill: bg,
+        stroke: "none"
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsx60("g", { className: "stn-topology-node__current-ring", children: /* @__PURE__ */ jsx60(
+    "circle",
+    {
+      cx: "0",
+      cy: "0",
+      r: r + 8.5,
+      fill: bg,
+      stroke: "none"
+    }
+  ) });
+}
 function StnTopologyGraphViewport({ className, style }) {
   const {
     renderGridLines,
@@ -8880,23 +9051,21 @@ function StnTopologyGraphViewport({ className, style }) {
           if (!link.n1 || !link.n2) return null;
           const { n1, n2 } = link;
           const depthScale = 550 / (550 + link.avgDepth);
-          const opacity = Math.max(0.65, Math.min(1, depthScale));
-          const hasDot = link.variant === "dot" || link.variant !== "line" && Boolean(link.status);
+          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 === "point" ? "var(--stn-primary)" : null;
           let dotElement = null;
-          if (hasDot) {
+          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 isCritical = n1.status === "critical" || n2.status === "critical" || link.status === "critical";
-            const isMajor = n1.status === "major" || n2.status === "major" || link.status === "major";
-            const isMinor = n1.status === "minor" || n2.status === "minor" || link.status === "minor";
-            const isWarning = n1.status === "warning" || n2.status === "warning" || link.status === "warning";
-            const statusColor = isCritical ? "var(--stn-grade-critical)" : isMajor ? "var(--stn-grade-major)" : isMinor ? "var(--stn-grade-minor)" : isWarning ? "var(--stn-grade-warning)" : null;
-            const dotFill = statusColor ?? "var(--stn-grade-neutral)";
+            const dotFill = link.color ?? statusColor ?? "var(--stn-grade-neutral)";
             dotElement = /* @__PURE__ */ jsx60("circle", { cx: midSX, cy: midSY, r: dotRadius, fill: dotFill });
           }
-          const lineColor = "var(--stn-border-strong)";
-          const effectiveStrokeWidth = Math.max(1.4, 1.8 * depthScale * Math.min(1.2, Math.max(0.7, zoom)));
+          const lineColor = link.color ?? (!isDot && statusColor ? statusColor : "var(--stn-border-strong)");
+          const effectiveStrokeWidth = resolveTopologyStrokeWidth(link.strokeWidth, depthScale, zoom);
           return /* @__PURE__ */ jsxs47("g", { opacity, children: [
             /* @__PURE__ */ jsx60(
               "line",
@@ -8916,20 +9085,26 @@ function StnTopologyGraphViewport({ className, style }) {
         /* @__PURE__ */ jsx60("g", { className: "stn-topology-nodes-group", children: sortedNodes.map((n) => {
           const depthScale = 550 / (550 + n.depth);
           const scale = Math.max(0.4, n.scale);
-          const opacity = Math.max(0.75, Math.min(1, depthScale));
-          const isSelected = selectedId === n.id;
+          const baseOpacity = Math.max(0.75, Math.min(1, depthScale));
+          const opacity = resolveTopologyOpacity(n.opacity, baseOpacity);
+          const isSelected = selectedId === n.id || Boolean(n.isCurrent) || Boolean(n.isSelected);
           const isCore = Boolean(n.isCore);
-          const isCritical = n.status === "critical" || Boolean(n.pulse);
+          const isPoint = 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)" : isCore ? "var(--stn-primary)" : "var(--stn-grade-neutral)";
-          const r = 14 * scale;
+          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)" : isPoint || isCore ? "var(--stn-primary)" : isNeutral ? "var(--stn-grade-neutral)" : isNormal ? "var(--stn-grade-normal)" : "var(--stn-grade-neutral)";
+          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 = Math.max(1.4, 2 * depthScale);
-          const rOuter = Math.max(14, 16 * scale);
-          const pulseRing = isCritical && /* @__PURE__ */ jsxs47("g", { children: [
+          const rOuter = Math.max(baseRadius, (baseRadius + 2) * scale);
+          const pulseRing = hasPulse && /* @__PURE__ */ jsxs47("g", { children: [
             /* @__PURE__ */ jsx60(
               "circle",
               {
@@ -8953,6 +9128,7 @@ function StnTopologyGraphViewport({ className, style }) {
               }
             )
           ] });
+          const currentRing = isSelected && renderCurrentNodeRing({ shape, r });
           const glyph = render3DNodeGlyph({
             shape,
             variant,
@@ -8960,14 +9136,65 @@ function StnTopologyGraphViewport({ className, style }) {
             statusColor,
             strokeWidth
           });
+          let badgeElement = null;
+          if (n.badge) {
+            const badgeText = String(n.badge);
+            const isSubtle = n.badgeAppearance === "subtle";
+            const badgeColorTheme = n.badgeColor ?? "inverted";
+            let badgeBg = "var(--stn-topology-badge-bg)";
+            let badgeTextColor = "var(--stn-topology-badge-text)";
+            if (badgeColorTheme === "inverted" || badgeColorTheme === "mono") {
+              badgeBg = isSubtle ? "var(--stn-opacity-white-10)" : "var(--stn-topology-badge-bg)";
+              badgeTextColor = isSubtle ? "var(--stn-topology-badge-bg)" : "var(--stn-topology-badge-text)";
+            } else {
+              const solidColor = badgeColorTheme === "primary" ? "var(--stn-primary)" : badgeColorTheme === "success" ? "var(--stn-feedback-success)" : badgeColorTheme === "critical" || badgeColorTheme === "error" ? "var(--stn-grade-critical)" : badgeColorTheme === "major" ? "var(--stn-grade-major)" : badgeColorTheme === "minor" ? "var(--stn-grade-minor)" : badgeColorTheme === "warning" ? "var(--stn-grade-warning)" : badgeColorTheme === "secondary" ? "var(--stn-secondary)" : badgeColorTheme === "neutral" ? "var(--stn-grade-neutral)" : badgeColorTheme;
+              badgeBg = isSubtle ? `color-mix(in srgb, ${solidColor} 18%, var(--stn-elevation-surface-0))` : solidColor;
+              badgeTextColor = isSubtle ? solidColor : "var(--stn-static-white)";
+            }
+            const charCount = badgeText.length;
+            const badgeW = Math.max(26, charCount * 11 + 10);
+            const badgeH = 16;
+            const badgeY = -r - badgeH - 4;
+            badgeElement = /* @__PURE__ */ jsxs47("g", { className: "stn-topology-node__badge", transform: `translate(0, ${badgeY})`, children: [
+              /* @__PURE__ */ jsx60(
+                "rect",
+                {
+                  x: -badgeW / 2,
+                  y: 0,
+                  width: badgeW,
+                  height: badgeH,
+                  rx: badgeH / 2,
+                  fill: badgeBg,
+                  stroke: "var(--stn-elevation-surface-0)",
+                  strokeWidth: 1.5
+                }
+              ),
+              /* @__PURE__ */ jsx60(
+                "text",
+                {
+                  x: 0,
+                  y: badgeH / 2 + 0.5,
+                  textAnchor: "middle",
+                  dominantBaseline: "central",
+                  fill: badgeTextColor,
+                  fontSize: 10,
+                  fontWeight: 700,
+                  style: { userSelect: "none", pointerEvents: "none" },
+                  children: badgeText
+                }
+              )
+            ] });
+          }
           const nodeContent = /* @__PURE__ */ jsxs47("g", { children: [
+            currentRing,
             pulseRing,
-            glyph
+            glyph,
+            badgeElement
           ] });
           return /* @__PURE__ */ jsx60(
             "g",
             {
-              className: cn("stn-topology-node", isSelected && "selected"),
+              className: cn("stn-topology-node", isSelected && "selected", isSelected && "is-current"),
               transform: `translate(${n.sx}, ${n.sy})`,
               opacity,
               style: { cursor: "pointer" },
@@ -11221,7 +11448,9 @@ function StnBreadcrumb({
   onHomeClick,
   showHome = true,
   homeLabel = "\uD648",
-  renderItem
+  renderItem,
+  reverse = false,
+  leadSeparator = false
 }) {
   const menuId = useId17();
   const currentIndex = items.findIndex((item, index) => item.current ?? index === items.length - 1);
@@ -11229,15 +11458,17 @@ function StnBreadcrumb({
   const previousItem = currentIndex > 0 ? items[currentIndex - 1] : null;
   const backHref = previousItem?.href ?? (showHome ? homeHref : void 0);
   const backOnClick = previousItem?.onClick ?? onHomeClick;
+  const explicitCurrent = items.find((i) => i.current);
+  const targetCurrentId = leadSeparator ? explicitCurrent?.id : explicitCurrent?.id ?? items[items.length - 1]?.id;
+  const displayItems = reverse ? [...items].reverse() : items;
   const { head, hidden, tail } = splitCollapsedItems(
-    items,
+    displayItems,
     maxItems,
     itemsBeforeCollapse,
     itemsAfterCollapse
   );
-  const lastId = items[items.length - 1]?.id;
   const renderTrailItem = (item) => {
-    const isCurrent = Boolean(item.current) || item.id === lastId;
+    const isCurrent = Boolean(item.current) || item.id === targetCurrentId;
     const segment = /* @__PURE__ */ jsx82(BreadcrumbSegment, { item, isCurrent });
     return /* @__PURE__ */ jsx82(
       "li",
@@ -11253,16 +11484,22 @@ function StnBreadcrumb({
   return /* @__PURE__ */ jsx82(
     "nav",
     {
-      className: cn("stn-breadcrumb", size, variant === "chip" && "chip", className),
+      className: cn(
+        "stn-breadcrumb",
+        size,
+        variant === "chip" && "chip",
+        reverse && "reverse",
+        className
+      ),
       "aria-label": "Breadcrumb",
       children: /* @__PURE__ */ jsxs60("ol", { className: "stn-breadcrumb__list", children: [
         currentItem ? /* @__PURE__ */ jsx82("li", { className: "stn-breadcrumb__item stn-breadcrumb__item--back", children: /* @__PURE__ */ jsx82(BreadcrumbBack, { label: currentItem.label, href: backHref, onClick: backOnClick }) }) : null,
-        showHome ? /* @__PURE__ */ jsx82("li", { className: "stn-breadcrumb__item stn-breadcrumb__item--home", children: /* @__PURE__ */ jsxs60("a", { className: "stn-breadcrumb__home", href: homeHref, onClick: onHomeClick, children: [
+        !reverse && showHome ? /* @__PURE__ */ jsx82("li", { className: "stn-breadcrumb__item stn-breadcrumb__item--home", children: /* @__PURE__ */ jsxs60("a", { className: "stn-breadcrumb__home", href: homeHref, onClick: onHomeClick, children: [
           /* @__PURE__ */ jsx82(BreadcrumbIcon, { src: STN_BREADCRUMB_ICON_SRC.home }),
           /* @__PURE__ */ jsx82("span", { className: "blind", children: homeLabel })
         ] }) }) : null,
         head.map((item, index) => /* @__PURE__ */ jsxs60(Fragment12, { children: [
-          showHome || index > 0 ? /* @__PURE__ */ jsx82(BreadcrumbSeparator, {}) : null,
+          !reverse && (showHome || index > 0 || leadSeparator) || reverse && (index > 0 || leadSeparator) ? /* @__PURE__ */ jsx82(BreadcrumbSeparator, {}) : null,
           renderTrailItem(item)
         ] }, item.id)),
         hidden.length > 0 ? /* @__PURE__ */ jsxs60(Fragment13, { children: [
@@ -11272,7 +11509,14 @@ function StnBreadcrumb({
         tail.map((item) => /* @__PURE__ */ jsxs60(Fragment12, { children: [
           /* @__PURE__ */ jsx82(BreadcrumbSeparator, {}),
           renderTrailItem(item)
-        ] }, item.id))
+        ] }, item.id)),
+        reverse && showHome ? /* @__PURE__ */ jsxs60(Fragment13, { children: [
+          /* @__PURE__ */ jsx82(BreadcrumbSeparator, {}),
+          /* @__PURE__ */ jsx82("li", { className: "stn-breadcrumb__item stn-breadcrumb__item--home", children: /* @__PURE__ */ jsxs60("a", { className: "stn-breadcrumb__home", href: homeHref, onClick: onHomeClick, children: [
+            /* @__PURE__ */ jsx82(BreadcrumbIcon, { src: STN_BREADCRUMB_ICON_SRC.home }),
+            /* @__PURE__ */ jsx82("span", { className: "blind", children: homeLabel })
+          ] }) })
+        ] }) : null
       ] })
     }
   );
@@ -14237,6 +14481,7 @@ export {
   StnEmptyState,
   StnEventBanner,
   StnFloatingToolbar,
+  StnFloatingToolbarDivider,
   StnGaugeChart,
   StnGradeRow,
   StnGradeRowList,
@@ -14401,6 +14646,8 @@ export {
   StnWidgetStatusItem,
   StnWidgetStatusList,
   StnWidgetTitle,
+  TOPOLOGY_OPACITY_MAP,
+  TOPOLOGY_STROKE_WIDTH_MAP,
   applyLnbSideToModifiers,
   buildPaginationItems,
   buildStnTreeNodeCells,