@stn-uiux/pub-ui 0.1.79 → 0.1.81

package/styles/components/stn-topology.css

@@ -2,6 +2,7 @@
 
 /**
  * Topology — ring / graph canvas + node marks
+ * STN 표준 시멘틱 토큰 기반 스타일링
  */
 
 .stn-topology-ring,
@@ -13,9 +14,9 @@
   justify-content: center;
   width: 100%;
   height: 100%;
-  min-height: 260px;
+  min-height: var(--stn-topology-container-min-height);
   overflow: hidden;
-  border-radius: var(--stn-radius-8, 8px);
+  border-radius: var(--stn-radius-topology-container);
 }
 
 .stn-topology-ring__svg,
@@ -28,7 +29,7 @@
 .stn-topology-ring--loading,
 .stn-topology-graph--loading {
   color: var(--stn-topology-fg);
-  font-size: 13px;
+  font-size: var(--stn-text-body-small-size);
 }
 
 .stn-topology-ring__loading-label,
@@ -38,37 +39,348 @@
 
 .stn-topology-graph__mode {
   position: absolute;
-  top: 12px;
-  right: 12px;
+  top: var(--stn-topology-mode-offset);
+  right: var(--stn-topology-mode-offset);
   z-index: 10;
 }
 
-.stn-topology-graph__minimap {
-  position: absolute;
-  right: 10px;
-  bottom: 10px;
+.stn-topology-node {
+  outline: none;
+}
+
+.stn-topology-node-preview {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  overflow: visible;
+}
+
+/* ==========================================================================
+   Topology Node Mark (.stn-topology-node-mark)
+   세로형 스택: 원형/다이아/사각 아이콘 + 타이틀 + 상태 인디케이터
+   ========================================================================== */
+
+.stn-topology-node-mark {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: center;
+  user-select: none;
+  cursor: pointer;
+  padding: var(--stn-topology-node-padding-y) var(--stn-topology-node-padding-x);
+}
+
+/* Icon Circle */
+.stn-topology-node__circle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--stn-radius-circle);
   box-sizing: border-box;
-  width: 84px;
-  height: 62px;
-  padding: 4px;
-  pointer-events: none;
-  border: 1px solid var(--stn-topology-chip-border);
-  border-radius: 6px;
-  background: var(--stn-topology-chip-bg);
+  background: var(--stn-opacity-white-5);
+  border: var(--stn-topology-node-border-width) solid transparent;
+  box-shadow: none;
+  animation: none;
+  position: relative;
+  flex-shrink: 0;
+  transition: all 0.2s ease;
+  color: var(--stn-static-white);
 }
 
-.stn-topology-graph__minimap-head {
-  display: flex;
-  justify-content: space-between;
-  color: var(--stn-topology-fg);
-  font-size: 9px;
+/* 4대 표준 크기 규격 (xs · sm · md · lg) */
+.stn-topology-node-mark.xs .stn-topology-node__circle {
+  width: var(--stn-topology-node-size-xs);
+  height: var(--stn-topology-node-size-xs);
+}
+.stn-topology-node-mark.sm .stn-topology-node__circle {
+  width: var(--stn-topology-node-size-sm);
+  height: var(--stn-topology-node-size-sm);
+}
+.stn-topology-node-mark.md .stn-topology-node__circle {
+  width: var(--stn-topology-node-size-md);
+  height: var(--stn-topology-node-size-md);
+}
+.stn-topology-node-mark.lg .stn-topology-node__circle {
+  width: var(--stn-topology-node-size-lg);
+  height: var(--stn-topology-node-size-lg);
 }
 
-.stn-topology-node {
+/* Shapes: circle · square · diamond (3대 표준 도형) */
+.stn-topology-node-mark.shape-circle .stn-topology-node__circle {
+  border-radius: var(--stn-radius-circle);
+}
+
+.stn-topology-node-mark.shape-square .stn-topology-node__circle {
+  border-radius: var(--stn-radius-topology-node-square);
+}
+
+.stn-topology-node-mark.shape-diamond .stn-topology-node__circle {
+  border-radius: var(--stn-radius-topology-node-diamond);
+  transform: rotate(45deg) scale(0.85);
+}
+.stn-topology-node-mark.shape-diamond .stn-topology-node__circle > * {
+  transform: rotate(-45deg);
+}
+
+/* Selected Node Highlight — 정밀 솔리드 링 + 소프트 앰비언트 글로우 */
+.stn-topology-node-mark.selected .stn-topology-node__circle {
   outline: none;
+  box-shadow:
+    0 0 0 3px var(--stn-topology-node-selected-gap),
+    0 0 0 4.5px var(--stn-topology-node-selected-border),
+    0 0 14px var(--stn-topology-node-selected-glow);
+  transform: scale(1.06);
+}
+.stn-topology-node-mark.shape-diamond.selected .stn-topology-node__circle {
+  transform: rotate(45deg) scale(0.92);
 }
 
-.stn-topology-node-preview {
-  display: block;
+/* Severity / Status Themes on Circle (통일된 단일 룰) */
+.stn-topology-node-mark.normal .stn-topology-node__circle {
+  background: var(--stn-opacity-white-5);
+  border: var(--stn-topology-node-border-width) solid transparent;
+  box-shadow: none;
+  animation: none;
+  color: var(--stn-static-white);
+}
+.stn-topology-node-mark.normal:hover .stn-topology-node__circle {
+  background: var(--stn-opacity-white-10);
+}
+
+.stn-topology-node-mark.warning .stn-topology-node__circle {
+  border: var(--stn-topology-node-border-width) solid var(--stn-grade-warning);
+  background: transparent;
+  box-shadow: none;
+  animation: none;
+  color: var(--stn-static-white);
+}
+
+.stn-topology-node-mark.minor .stn-topology-node__circle {
+  border: var(--stn-topology-node-border-width) solid var(--stn-grade-minor);
+  background: transparent;
+  box-shadow:
+    0 0 4px 0 var(--stn-opacity-white-15) inset,
+    0 0 4px 0 color-mix(in srgb, var(--stn-grade-minor) 24%, transparent) inset,
+    0 0 16px 0 color-mix(in srgb, var(--stn-grade-minor) 50%, transparent);
+  backdrop-filter: blur(3px);
+  -webkit-backdrop-filter: blur(3px);
+  animation: shadowPulseMinor 1.8s ease-in-out infinite;
+  color: var(--stn-static-white);
+}
+
+.stn-topology-node-mark.major .stn-topology-node__circle {
+  border: var(--stn-topology-node-border-width) solid var(--stn-grade-major);
+  background: transparent;
+  backdrop-filter: blur(3px);
+  -webkit-backdrop-filter: blur(3px);
+  animation: shadowPulseWarning 1.5s ease-in-out infinite;
+  color: var(--stn-static-white);
+}
+
+.stn-topology-node-mark.critical .stn-topology-node__circle {
+  border: var(--stn-topology-node-border-width) solid var(--stn-grade-critical);
+  background: transparent;
+  backdrop-filter: blur(3px);
+  -webkit-backdrop-filter: blur(3px);
+  animation: shadowPulseDanger 1.2s ease-in-out infinite;
+  color: var(--stn-static-white);
+}
+
+/* Pulsing shadow keyframes */
+@keyframes shadowPulseMinor {
+  0%, 100% {
+    box-shadow:
+      0 0 4px 0 var(--stn-opacity-white-15) inset,
+      0 0 4px 0 color-mix(in srgb, var(--stn-grade-minor) 30%, transparent) inset,
+      0 0 18px 0 color-mix(in srgb, var(--stn-grade-minor) 70%, transparent);
+  }
+  50% {
+    box-shadow:
+      0 0 2px 0 var(--stn-opacity-white-5) inset,
+      0 0 2px 0 color-mix(in srgb, var(--stn-grade-minor) 8%, transparent) inset,
+      0 0 4px 0 color-mix(in srgb, var(--stn-grade-minor) 15%, transparent);
+  }
+}
+
+@keyframes shadowPulseWarning {
+  0%, 100% {
+    box-shadow:
+      0 0 4px 0 var(--stn-opacity-white-15) inset,
+      0 0 4px 0 color-mix(in srgb, var(--stn-grade-major) 30%, transparent) inset,
+      0 0 18px 0 color-mix(in srgb, var(--stn-grade-major) 70%, transparent);
+  }
+  50% {
+    box-shadow:
+      0 0 2px 0 var(--stn-opacity-white-5) inset,
+      0 0 2px 0 color-mix(in srgb, var(--stn-grade-major) 8%, transparent) inset,
+      0 0 4px 0 color-mix(in srgb, var(--stn-grade-major) 15%, transparent);
+  }
+}
+
+@keyframes shadowPulseDanger {
+  0%, 100% {
+    box-shadow:
+      0 0 4px 0 var(--stn-opacity-white-15) inset,
+      0 0 4px 0 color-mix(in srgb, var(--stn-grade-critical) 30%, transparent) inset,
+      0 0 20px 0 color-mix(in srgb, var(--stn-grade-critical) 85%, transparent);
+  }
+  50% {
+    box-shadow:
+      0 0 2px 0 var(--stn-opacity-white-5) inset,
+      0 0 2px 0 color-mix(in srgb, var(--stn-grade-critical) 8%, transparent) inset,
+      0 0 4px 0 color-mix(in srgb, var(--stn-grade-critical) 15%, transparent);
+  }
+}
+
+/* Continuous Rotating 2-Arc Gradient Ring Orbit */
+@keyframes spinCenterRing {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
+.topo-hub-spin-arc {
+  transform-origin: 250px 250px;
+  animation: spinCenterRing 14s linear infinite;
+}
+
+/* Node Title — 타이포그래피(font-size, font-weight, color 등)는 StnText로 위임하고 순수 배치 간격만 유지 */
+.stn-topology-node__title {
+  margin-top: var(--stn-topology-node-title-margin-top);
+  text-align: center;
+}
+
+/* Status Indicator Layout Below Node — 순수 배치 간격만 유지 */
+.stn-topology-node__status,
+.stn-topology-node__status-text {
+  margin-top: var(--stn-topology-node-status-margin-top);
+  white-space: nowrap;
+}
+
+/* Center Hub */
+.stn-topology-ring__core-hub {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--stn-topology-core-hub-gap);
+  z-index: 10;
+  width: 100%;
+  height: 100%;
+  border-radius: var(--stn-radius-circle);
+  cursor: pointer;
+  user-select: none;
+}
+.stn-topology-ring__core-title {
+  margin-top: var(--stn-topology-core-title-margin-top);
+  text-align: center;
+}
+.stn-topology-ring__core-status {
+  margin-top: var(--stn-topology-core-status-margin-top);
+  white-space: nowrap;
+}
+
+/* SVG foreignObject container — 브라우저 기본 overflow:hidden 클리핑 방지 */
+.stn-topology-node-fo {
   overflow: visible;
 }
+
+/* ==========================================================================
+   Topology Graph 3D Spatial Engine & Interactive Controls
+   STN 시멘틱 토큰 100% 준수
+   ========================================================================== */
+
+/* 2D / 3D Mode Switcher with StnSegmented (Top Center) — STN 표준 세그먼트 컴포넌트 연동 */
+.stn-topology-mode-toggle-wrap {
+  position: absolute;
+  top: var(--stn-topology-mode-offset);
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 10;
+  box-shadow: var(--stn-topology-mode-shadow);
+  border-radius: var(--stn-radius-segmented);
+}
+
+/* Floating Minimap (Bottom Right) */
+.stn-topology-minimap-box {
+  position: absolute;
+  bottom: var(--stn-topology-minimap-offset);
+  right: var(--stn-topology-minimap-offset);
+  width: var(--stn-topology-minimap-width);
+  border-radius: var(--stn-radius-topology-minimap);
+  border: var(--stn-topology-minimap-border-width) solid var(--stn-border-subtle);
+  background: var(--stn-topology-minimap-bg);
+  padding: var(--stn-topology-minimap-padding-y) var(--stn-topology-minimap-padding-x);
+  display: flex;
+  flex-direction: column;
+  backdrop-filter: blur(6px);
+  -webkit-backdrop-filter: blur(6px);
+  z-index: 10;
+  transition: all 0.2s ease;
+}
+
+.stn-topology-minimap-head {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.stn-topology-minimap-title {
+  font-family: var(--stn-font-body);
+  font-size: var(--stn-text-caption-size);
+  font-weight: var(--stn-font-weight-semibold);
+  color: var(--stn-text-muted);
+}
+
+.stn-topology-minimap-btn {
+  background: transparent;
+  border: none;
+  color: var(--stn-text-muted);
+  font-size: var(--stn-text-caption-size);
+  cursor: pointer;
+  padding: 0 var(--stn-topology-minimap-btn-padding-x);
+  line-height: 1;
+}
+
+.stn-topology-minimap-btn:hover {
+  color: var(--stn-text-primary);
+}
+
+.stn-topology-minimap-content {
+  width: 100%;
+  height: var(--stn-topology-minimap-content-height);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  margin-top: var(--stn-topology-minimap-content-margin-top);
+}
+
+/* 3D Pulse Rings for Critical Nodes */
+@keyframes stnTopologyPulseRing {
+  0% {
+    r: 8px;
+    opacity: 0.9;
+    stroke-width: 1.5px;
+  }
+  100% {
+    r: 26px;
+    opacity: 0;
+    stroke-width: 0.5px;
+  }
+}
+
+.stn-topology-pulse-ring-1 {
+  animation: stnTopologyPulseRing 2s infinite ease-out;
+}
+
+.stn-topology-pulse-ring-2 {
+  animation: stnTopologyPulseRing 2s infinite ease-out 0.8s;
+}
+
+

package/styles/components/stn-widget.css

@@ -9,7 +9,7 @@
   --stn-widget-title-font-size: var(--stn-text-title-small-size, var(--stn-font-size-16, 16px));
   --stn-widget-title-font-weight: var(--stn-font-weight-semibold, 600);
   --stn-widget-title-color: var(--stn-text-primary);
-  --stn-widget-title-line-height: var(--stn-line-height-1, 1);
+  --stn-widget-title-line-height: var(--stn-line-height-tight, 1.2);
   --stn-widget-footer-color: var(--stn-text-secondary);
 }
 
@@ -158,7 +158,7 @@
   border-top: var(--stn-widget-border-width, var(--stn-size-1, 1px)) solid var(--stn-widget-border-color);
   margin-top: auto;
   flex-shrink: 0;
-  font-size: var(--stn-text-caption-small-size, 12px);
+  font-size: var(--stn-text-caption-size);
   color: var(--stn-widget-footer-color);
 }
 
@@ -261,7 +261,7 @@
   font-size: var(--stn-widget-title-font-size);
   font-weight: var(--stn-widget-title-font-weight);
   color: var(--stn-widget-title-color);
-  line-height: var(--stn-line-height-1, 1);
+  line-height: var(--stn-widget-title-line-height);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -606,7 +606,6 @@
 /* --- 1. CRITICAL --- */
 .stn-widget.critical,
 .stn-widget.is-critical {
-  border: var(--stn-widget-border-width, var(--stn-size-1, 1px)) solid var(--stn-widget-critical-border);
   border-left: var(--stn-widget-severity-border-width, 4px) solid var(--stn-widget-critical-accent);
   background: var(--stn-widget-critical-bg);
   box-shadow: var(--stn-widget-critical-glow);
@@ -620,7 +619,6 @@
 
 /* --- 2. MAJOR --- */
 .stn-widget.major {
-  border: var(--stn-widget-border-width, var(--stn-size-1, 1px)) solid var(--stn-widget-major-border);
   border-left: var(--stn-widget-severity-border-width, 4px) solid var(--stn-widget-major-accent);
   background: var(--stn-widget-major-bg);
   box-shadow: var(--stn-widget-major-glow);
@@ -633,7 +631,6 @@
 
 /* --- 3. MINOR --- */
 .stn-widget.minor {
-  border: var(--stn-widget-border-width, var(--stn-size-1, 1px)) solid var(--stn-widget-minor-border);
   border-left: var(--stn-widget-severity-border-width, 4px) solid var(--stn-widget-minor-accent);
   background: var(--stn-widget-minor-bg);
   box-shadow: var(--stn-widget-minor-glow);
@@ -648,7 +645,7 @@
    StnWidgetBody Surface & Layout Utilities
    ========================================================================== */
 .stn-widget__body--surface-canvas {
-  background-color: var(--doc-canvas-bg, var(--stn-surface-canvas, var(--stn-elevation-surface-canvas)));
+  background-color: var(--stn-elevation-surface-0);
 }
 
 .stn-widget__body--surface-transparent {

package/styles/tokens/stn-colors-semantic.css

@@ -316,13 +316,13 @@
   --stn-toast-bg: var(--stn-gray-850);
   --stn-toast-color: var(--stn-static-white);
   --stn-toast-border: var(--stn-gray-650);
-  --stn-severity-critical-bg: color-mix(in srgb, var(--stn-red-400) 18%, transparent);
+  --stn-severity-critical-bg: color-mix(in srgb, var(--stn-red-400) 10%, transparent);
   --stn-severity-critical-border: var(--stn-red-350);
-  --stn-severity-major-bg: color-mix(in srgb, var(--stn-orange-400) 18%, transparent);
+  --stn-severity-major-bg: color-mix(in srgb, var(--stn-orange-400) 10%, transparent);
   --stn-severity-major-border: var(--stn-orange-350);
-  --stn-severity-minor-bg: color-mix(in srgb, var(--stn-yellow-350) 15%, transparent);
+  --stn-severity-minor-bg: color-mix(in srgb, var(--stn-yellow-350) 10%, transparent);
   --stn-severity-minor-border: var(--stn-yellow-350);
-  --stn-severity-warning-bg: color-mix(in srgb, var(--stn-teal-400) 18%, transparent);
+  --stn-severity-warning-bg: color-mix(in srgb, var(--stn-teal-400) 10%, transparent);
   --stn-severity-warning-border: var(--stn-teal-350);
   --stn-text-tertiary: var(--stn-gray-400);
   --stn-text-muted: var(--stn-gray-500);
@@ -486,15 +486,24 @@
   --stn-topology-fg: var(--stn-gray-400);
   --stn-topology-chip-border: var(--stn-opacity-white-15);
   --stn-topology-chip-bg: var(--stn-opacity-black-70);
+  --stn-topology-orbit-start: var(--stn-blue-300);
+  --stn-topology-orbit-mid: var(--stn-blue-400);
+  --stn-topology-orbit-end: var(--stn-purple-300);
+  --stn-topology-link-line: var(--stn-opacity-white-45);
+  --stn-topology-node-selected-border: var(--stn-blue-300);
+  --stn-topology-node-selected-gap: var(--stn-gray-950);
+  --stn-topology-node-selected-glow: color-mix(in srgb, var(--stn-blue-300) 50%, transparent);
+  --stn-topology-minimap-bg: color-mix(in srgb, var(--stn-elevation-surface-widget) 75%, transparent);
+  --stn-topology-mode-shadow: 0 4px 16px color-mix(in srgb, var(--stn-static-black) 40%, transparent);
   --stn-widget-critical-accent: var(--stn-red-550);
-  --stn-widget-critical-bg: color-mix(in srgb, var(--stn-red-550) 10%, transparent);
-  --stn-widget-critical-glow: 0 0 4px 0 color-mix(in srgb, var(--stn-static-white) 16%, transparent) inset, 0 0 32px 0 color-mix(in srgb, var(--stn-red-550) 24%, transparent) inset;
+  --stn-widget-critical-bg: color-mix(in srgb, var(--stn-red-550) 6%, transparent);
+  --stn-widget-critical-glow: 0 0 16px 0 color-mix(in srgb, var(--stn-red-550) 32%, transparent) inset, 0 0 32px 0 color-mix(in srgb, var(--stn-red-550) 16%, transparent) inset;
   --stn-widget-major-accent: var(--stn-orange-550);
-  --stn-widget-major-bg: color-mix(in srgb, var(--stn-orange-550) 10%, transparent);
-  --stn-widget-major-glow: 0 0 4px 0 color-mix(in srgb, var(--stn-static-white) 16%, transparent) inset, 0 0 32px 0 color-mix(in srgb, var(--stn-orange-550) 24%, transparent) inset;
+  --stn-widget-major-bg: color-mix(in srgb, var(--stn-orange-550) 6%, transparent);
+  --stn-widget-major-glow: 0 0 16px 0 color-mix(in srgb, var(--stn-orange-550) 32%, transparent) inset, 0 0 32px 0 color-mix(in srgb, var(--stn-orange-550) 16%, transparent) inset;
   --stn-widget-minor-accent: var(--stn-yellow-550);
-  --stn-widget-minor-bg: color-mix(in srgb, var(--stn-yellow-550) 10%, transparent);
-  --stn-widget-minor-glow: 0 0 4px 0 color-mix(in srgb, var(--stn-static-white) 16%, transparent) inset, 0 0 32px 0 color-mix(in srgb, var(--stn-yellow-550) 24%, transparent) inset;
+  --stn-widget-minor-bg: color-mix(in srgb, var(--stn-yellow-550) 6%, transparent);
+  --stn-widget-minor-glow: 0 0 16px 0 color-mix(in srgb, var(--stn-yellow-550) 32%, transparent) inset, 0 0 32px 0 color-mix(in srgb, var(--stn-yellow-550) 16%, transparent) inset;
   --stn-widget-slot-border: var(--stn-gray-700);
   --stn-widget-slot-bg: color-mix(in srgb, var(--stn-static-white) 2%, transparent);
   --stn-widget-drag-bg: linear-gradient(-78deg, color-mix(in srgb, var(--stn-gray-950) 50%, transparent), color-mix(in srgb, var(--stn-gray-900) 50%, transparent), var(--stn-opacity-black-50));
@@ -1098,6 +1107,15 @@
   --stn-topology-fg: var(--stn-gray-500);
   --stn-topology-chip-border: var(--stn-gray-200);
   --stn-topology-chip-bg: var(--stn-opacity-white-80);
+  --stn-topology-orbit-start: var(--stn-blue-400);
+  --stn-topology-orbit-mid: var(--stn-blue-500);
+  --stn-topology-orbit-end: var(--stn-purple-400);
+  --stn-topology-link-line: var(--stn-opacity-black-25);
+  --stn-topology-node-selected-border: var(--stn-blue-400);
+  --stn-topology-node-selected-gap: var(--stn-static-white);
+  --stn-topology-node-selected-glow: color-mix(in srgb, var(--stn-blue-400) 40%, transparent);
+  --stn-topology-minimap-bg: color-mix(in srgb, var(--stn-elevation-surface-widget) 75%, transparent);
+  --stn-topology-mode-shadow: 0 4px 16px color-mix(in srgb, var(--stn-static-black) 12%, transparent);
   --stn-widget-critical-accent: var(--stn-red-500);
   --stn-widget-critical-bg: color-mix(in srgb, var(--stn-red-50) 65%, var(--stn-static-white));
   --stn-widget-critical-glow: 0 0 16px 0 color-mix(in srgb, var(--stn-red-400) 22%, transparent) inset, 0 2px 8px 0 color-mix(in srgb, var(--stn-red-400) 12%, transparent);

package/styles/tokens/stn-radius-semantic.css

@@ -79,4 +79,8 @@
   --stn-radius-tree-row-full: var(--stn-radius-circle);
   --stn-radius-tree-toggle-focus: var(--stn-radius-2);
   --stn-radius-tree-visibility-btn: var(--stn-radius-2);
+  --stn-radius-topology-container: var(--stn-radius-8);
+  --stn-radius-topology-node-square: var(--stn-radius-8);
+  --stn-radius-topology-node-diamond: var(--stn-radius-4);
+  --stn-radius-topology-minimap: var(--stn-radius-8);
 }

package/styles/tokens/stn-size-semantic.css

@@ -226,7 +226,7 @@
   --stn-severity-badge-icon-size-md: var(--stn-size-14);
   --stn-severity-badge-icon-size-lg: var(--stn-size-16);
   --stn-widget-mobile-min-height: var(--stn-size-160);
-  --stn-widget-severity-border-width: var(--stn-size-4);
+  --stn-widget-severity-border-width: var(--stn-size-2);
   --stn-header-breadcrumb-mobile-max-width: var(--stn-size-140);
   --stn-widget-translucent-blur: var(--stn-size-8);
   --stn-dropdown-translucent-blur: var(--stn-size-8);
@@ -270,4 +270,13 @@
   --stn-breadcrumb-sep-size-lg: var(--stn-size-14);
   --stn-event-banner-btn-height: var(--stn-size-28);
   --stn-event-banner-icon-size: var(--stn-size-24);
+  --stn-topology-node-size-xs: var(--stn-size-24);
+  --stn-topology-node-size-sm: var(--stn-size-32);
+  --stn-topology-node-size-md: var(--stn-size-40);
+  --stn-topology-node-size-lg: var(--stn-size-48);
+  --stn-topology-container-min-height: var(--stn-size-260);
+  --stn-topology-node-border-width: var(--stn-size-1);
+  --stn-topology-minimap-border-width: var(--stn-size-1);
+  --stn-topology-minimap-width: var(--stn-size-140);
+  --stn-topology-minimap-content-height: var(--stn-size-96);
 }

package/styles/tokens/stn-spacing-semantic.css

@@ -284,4 +284,17 @@
   --stn-event-banner-actions-gap: var(--stn-space-8);
   --stn-event-banner-btn-padding-inline: var(--stn-space-14);
   --stn-event-banner-btn-padding-block: var(--stn-space-4);
+  --stn-topology-mode-offset: var(--stn-space-12);
+  --stn-topology-node-padding-y: var(--stn-space-2);
+  --stn-topology-node-padding-x: var(--stn-space-4);
+  --stn-topology-node-title-margin-top: var(--stn-space-4);
+  --stn-topology-node-status-margin-top: var(--stn-space-2);
+  --stn-topology-core-hub-gap: var(--stn-space-2);
+  --stn-topology-core-title-margin-top: var(--stn-space-2);
+  --stn-topology-core-status-margin-top: var(--stn-space-2);
+  --stn-topology-minimap-offset: var(--stn-space-14);
+  --stn-topology-minimap-padding-y: var(--stn-space-8);
+  --stn-topology-minimap-padding-x: var(--stn-space-10);
+  --stn-topology-minimap-btn-padding-x: var(--stn-space-4);
+  --stn-topology-minimap-content-margin-top: var(--stn-space-4);
 }

package/dist/chunk-SGILJA4O.js

@@ -1,9 +0,0 @@
-// src/data/stnPackageVersion.ts
-var STN_UI_VERSION = "0.1.79";
-var STN_UI_VERSION_LABEL = "v0.1.79";
-
-export {
-  STN_UI_VERSION,
-  STN_UI_VERSION_LABEL
-};
-//# sourceMappingURL=chunk-SGILJA4O.js.map

package/dist/chunk-SGILJA4O.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/data/stnPackageVersion.ts"],"sourcesContent":["/** Package version constants */\nexport const STN_UI_VERSION = '0.1.79'\nexport const STN_UI_VERSION_LABEL = 'v0.1.79'\n"],"mappings":";AACO,IAAM,iBAAiB;AACvB,IAAM,uBAAuB;","names":[]}

package/dist/chunk-SQJPE6HH.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/data/stnStatus.ts"],"sourcesContent":["export type StnStatusDotState =\n  | 'up'\n  | 'down'\n  | 'critical'\n  | 'major'\n  | 'minor'\n  | 'warning'\n  | 'primary'\n  | 'secondary'\n  | 'success'\n  | 'error'\n  | 'info'\n  | 'neutral'\n  | string\n\nexport type StnStatusFlowStepColor =\n  | 'primary'\n  | 'secondary'\n  | 'success'\n  | 'error'\n  | 'info'\n  | 'neutral'\n  | 'critical'\n  | 'major'\n  | 'minor'\n  | 'warning'\n  | string\n\nexport type StnStatusFlowStep = {\n  key: string\n  label: string\n  color?: StnStatusFlowStepColor\n  icon?: string\n}\n\nexport const STN_STATUS_DEMO_STEPS: StnStatusFlowStep[] = [\n  { key: 'occur', label: '장애발생', color: 'critical', icon: 'line/alert-octagon' },\n  { key: 'ack', label: '인지', color: 'warning', icon: 'line/bell' },\n  { key: 'notify', label: '통보', color: 'primary', icon: 'line/volume-2' },\n  { key: 'resolve', label: '해소', color: 'success', icon: 'line/check-circle-2' },\n]\n"],"mappings":";AAmCO,IAAM,wBAA6C;AAAA,EACxD,EAAE,KAAK,SAAS,OAAO,4BAAQ,OAAO,YAAY,MAAM,qBAAqB;AAAA,EAC7E,EAAE,KAAK,OAAO,OAAO,gBAAM,OAAO,WAAW,MAAM,YAAY;AAAA,EAC/D,EAAE,KAAK,UAAU,OAAO,gBAAM,OAAO,WAAW,MAAM,gBAAgB;AAAA,EACtE,EAAE,KAAK,WAAW,OAAO,gBAAM,OAAO,WAAW,MAAM,sBAAsB;AAC/E;","names":[]}