@stn-uiux/pub-ui 0.1.86 → 0.1.88

package/styles/components/stn-topology.css

@@ -6,34 +6,65 @@
  */
 
 /* ==========================================================================
-   Topology Tokens (현재 노드 하이라이트 링 & 시작/종료 노드 뱃지 토큰)
-   - STN 4대 표준 규격: 원시 Hex/RGB 절대 금지, 순수 --stn-* 시멘틱 토큰으로만 구성
-   - 다크 모드(기본): 흰색 반투명 테두리 링, 흰색 뱃지 배경, 검은색 뱃지 텍스트
-   - 라이트 모드: Gray 반투명 테두리 링, 검은색 뱃지 배경, 흰색 뱃지 텍스트
+   Topology Labels & Tooltips (STN 시멘틱 토큰 기반 회선/노드 라벨 표준 규격)
    ========================================================================== */
-:root,
-[data-mode='dark'],
-[data-theme='dark'] {
-  --stn-topology-node-current-bg: color-mix(in srgb, var(--stn-static-white) 22%, transparent);
-  --stn-topology-node-current-ring: color-mix(in srgb, var(--stn-static-white) 40%, transparent);
-  --stn-topology-node-current-ambient: color-mix(in srgb, var(--stn-static-white) 15%, transparent);
-  --stn-topology-node-current-glow: color-mix(in srgb, var(--stn-static-white) 20%, transparent);
-  --stn-topology-node-point: var(--stn-primary);
-  --stn-topology-badge-bg: var(--stn-static-white);
-  --stn-topology-badge-text: var(--stn-gray-900);
-  --stn-topology-badge-border: color-mix(in srgb, var(--stn-gray-900) 20%, transparent);
-}
-
-[data-mode='light'],
-[data-theme='light'] {
-  --stn-topology-node-current-bg: color-mix(in srgb, var(--stn-gray-900) 15%, transparent);
-  --stn-topology-node-current-ring: color-mix(in srgb, var(--stn-gray-900) 30%, transparent);
-  --stn-topology-node-current-ambient: color-mix(in srgb, var(--stn-gray-900) 12%, transparent);
-  --stn-topology-node-current-glow: color-mix(in srgb, var(--stn-gray-700) 15%, transparent);
-  --stn-topology-node-point: var(--stn-primary);
-  --stn-topology-badge-bg: var(--stn-gray-900);
-  --stn-topology-badge-text: var(--stn-static-white);
-  --stn-topology-badge-border: color-mix(in srgb, var(--stn-static-white) 20%, transparent);
+.stn-topology-link__label {
+  pointer-events: none;
+  user-select: none;
+  transition: opacity 0.18s cubic-bezier(0.2, 0, 0, 1);
+}
+
+.stn-topology-link__label text {
+  fill: var(--stn-topology-link-label-fg, var(--stn-text-secondary));
+  stroke: var(--stn-topology-link-label-halo, var(--stn-elevation-surface-0));
+  stroke-width: 1.2px;
+  paint-order: stroke;
+  stroke-linejoin: round;
+  font-weight: 600;
+  letter-spacing: -0.2px;
+}
+
+/* ── 회선 라벨 인터랙션 모드 (hover: 평소 숨김 / 링크 호버 시 일제히 표시, always, none) ── */
+.stn-topology-links-group--label-hover .stn-topology-link__label {
+  opacity: 0;
+  transition: opacity 0.18s cubic-bezier(0.2, 0, 0, 1);
+  pointer-events: none;
+}
+
+.stn-topology-links-group--label-hover.is-link-hovered .stn-topology-link__label {
+  opacity: 1;
+}
+
+.stn-topology-links-group--label-none .stn-topology-link__label {
+  display: none;
+}
+
+.stn-topology-links-group--label-always .stn-topology-link__label {
+  opacity: 1;
+}
+
+.stn-topology-link.is-hovered line:not([stroke="transparent"]),
+.stn-topology-link:hover line:not([stroke="transparent"]) {
+  opacity: 1;
+}
+
+.stn-topology-node__bottom-label--plain text {
+  fill: var(--stn-topology-node-label-fg, var(--stn-text-primary));
+  stroke: var(--stn-topology-node-label-halo, var(--stn-elevation-surface-0));
+  stroke-width: 2.4px;
+  paint-order: stroke;
+  stroke-linejoin: round;
+  font-weight: 700;
+  letter-spacing: -0.2px;
+  user-select: none;
+  pointer-events: none;
+}
+
+.stn-topology-node__label-badge.neutral.subtle {
+  background-color: var(--stn-elevation-surface-0);
+  border: none;
+  color: var(--stn-text-primary);
+  font-weight: var(--stn-font-weight-regular, 400);
 }
 
 .stn-topology-ring,
@@ -172,25 +203,15 @@
 /* ==========================================================================
    Current Node Highlight (현재 선택 노드 — 다크: 흰색 반투명, 라이트: gray 반투명)
    ========================================================================== */
-:root {
-  --stn-topology-node-current-ring: color-mix(in srgb, var(--stn-neutral-90, #1f242f) 28%, transparent);
-  --stn-topology-node-current-glow: color-mix(in srgb, var(--stn-neutral-90, #1f242f) 12%, transparent);
-}
-
-[data-theme="dark"],
-.theme-dark {
-  --stn-topology-node-current-ring: color-mix(in srgb, var(--stn-static-white, #ffffff) 45%, transparent);
-  --stn-topology-node-current-glow: color-mix(in srgb, var(--stn-static-white, #ffffff) 20%, transparent);
-}
 
 /* 2D 마크용 현재 노드 스타일 */
 :is(.stn-topology-node-mark.is-current, .stn-topology-node-mark.current) .stn-topology-node__circle {
   outline: none;
   box-shadow:
-    0 0 0 3px var(--stn-topology-node-selected-gap, var(--stn-elevation-surface-0)),
-    0 0 0 5.5px var(--stn-topology-node-current-ring),
-    0 0 16px var(--stn-topology-node-current-glow);
-  transform: scale(1.06);
+    0 0 0 2px var(--stn-topology-node-selected-gap, var(--stn-elevation-surface-0)),
+    0 0 0 3.5px var(--stn-topology-node-current-ring),
+    0 0 10px var(--stn-topology-node-current-glow);
+  transform: scale(1.04);
 }
 
 :is(.stn-topology-node-mark.shape-diamond.is-current, .stn-topology-node-mark.shape-diamond.current) .stn-topology-node__circle {
@@ -208,28 +229,50 @@
 }
 
 /* ==========================================================================
-   Topology Start/End Node Badge Tokens (시작 & 종료 노드 뱃지 — 다크: 흰색, 라이트: 검은색)
+   Topology Start/End Node Badge Tokens (시작 & 종료 노드 뱃지 — Primary Blue SSOT)
    ========================================================================== */
-:root {
-  --stn-topology-badge-bg: var(--stn-neutral-90, #1f242f);
-  --stn-topology-badge-text: var(--stn-static-white, #ffffff);
-  --stn-topology-badge-border: var(--stn-elevation-surface-0);
-}
-
-[data-theme="dark"],
-.theme-dark {
-  --stn-topology-badge-bg: var(--stn-static-white, #ffffff);
-  --stn-topology-badge-text: var(--stn-neutral-90, #1f242f);
-  --stn-topology-badge-border: var(--stn-elevation-surface-0);
-}
-
 .stn-topology-node__badge rect {
+  fill: var(--stn-topology-badge-bg, var(--stn-primary));
   transition: fill 0.2s ease, stroke 0.2s ease;
 }
 .stn-topology-node__badge text {
+  fill: var(--stn-topology-badge-text, var(--stn-static-white));
   transition: fill 0.2s ease;
 }
 
+/* SVG foreignObject Badge Wrapper */
+.stn-topology-node__badge-fo {
+  overflow: visible;
+  pointer-events: none;
+}
+
+.stn-topology-node__badge-fo-inner {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+}
+
+.stn-topology-node__badge-fo-scale {
+  display: inline-flex;
+  transform-origin: center center;
+  user-select: none;
+}
+
+/* STN 토폴로지 노드 벡터 외곽선 stroke-width 표준 시멘틱 토큰 강제 규격 */
+.stn-topology-node > g > rect,
+.stn-topology-node > g > circle:not([class*='stn-topology-pulse-ring']),
+.stn-topology-node > g > polygon,
+.stn-topology-node > g > path,
+.stn-topology-node > circle:not([class*='stn-topology-pulse-ring']),
+.stn-topology-node > rect,
+.stn-topology-node > polygon,
+.stn-topology-node > path {
+  stroke-width: var(--stn-topology-node-stroke, 1.2px);
+}
+
 /* Severity / Status Themes on Circle (통일된 단일 룰) */
 .stn-topology-node-mark.normal .stn-topology-node__circle {
   background: var(--stn-opacity-white-5);
@@ -378,10 +421,17 @@
   white-space: nowrap;
 }
 
-/* SVG foreignObject container — 브라우저 기본 overflow:hidden 클리핑 방지 */
+/* SVG foreignObject container — 브라우저 기본 overflow:hidden 클리핑 방지 및 플렉스 센터 정렬 */
 .stn-topology-node-fo {
   overflow: visible;
 }
+.stn-topology-node-fo > div {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
 
 /* ==========================================================================
    Topology Graph 3D Spatial Engine & Interactive Controls
@@ -479,4 +529,28 @@
   animation: stnTopologyPulseRing 2s infinite ease-out 0.8s;
 }
 
+/* Node Tooltip in SVG Overlay */
+.stn-topology-node-tooltip {
+  transition: opacity 0.15s ease;
+  pointer-events: none;
+  user-select: none;
+}
+
+.stn-topology-node-tooltip__box {
+  filter: drop-shadow(0px 1px 2px var(--stn-opacity-black-25));
+}
+
+.stn-topology-node-tooltip text {
+  user-select: none;
+  pointer-events: none;
+  font-family: inherit;
+}
+
+/* Topology Stage Canvas — 풀사이즈 캔버스 및 반응형 최소 높이(600px) 보장 */
+.stn-topology-stage-canvas {
+  width: 100%;
+  height: 100%;
+  min-height: 600px;
+}
+
 

package/styles/layouts/stn-container.css

@@ -42,11 +42,55 @@
   }
 }
 
-/* 컨테이너 자신의 좌우 패딩만 끈다.
-   !important를 쓰지 않아, .stn-layer-1__body > .stn-container 의 16px은 그대로 남는다. */
-.stn-container--disable-gutters {
-  padding-left: var(--stn-container-gutter-none);
-  padding-right: var(--stn-container-gutter-none);
+/* ==========================================================================
+   Padding 0 Modifiers (상·하·좌·우 개별 및 전체 패딩 0 제거 유틸리티)
+   - !important 없이 CSS 변수 및 특정성 체이닝으로 부모 레이어 여백도 자연스럽게 무력화
+   ========================================================================== */
+.stn-container--disable-gutters,
+.stn-container.stn-container--disable-gutters,
+.stn-layer-1__body > .stn-container.stn-container--disable-gutters {
+  --stn-container-padding-left: var(--stn-container-gutter-none, 0px);
+  --stn-container-padding-right: var(--stn-container-gutter-none, 0px);
+  padding-left: var(--stn-container-gutter-none, 0px);
+  padding-right: var(--stn-container-gutter-none, 0px);
+}
+
+.stn-container--disable-padding-top,
+.stn-container.stn-container--disable-padding-top,
+.stn-layer-1__body > .stn-container.stn-container--disable-padding-top {
+  --stn-container-padding-top: var(--stn-space-0, 0px);
+  padding-top: var(--stn-space-0, 0px);
+}
+
+.stn-container--disable-padding-bottom,
+.stn-container.stn-container--disable-padding-bottom,
+.stn-layer-1__body > .stn-container.stn-container--disable-padding-bottom {
+  --stn-container-padding-bottom: var(--stn-space-0, 0px);
+  padding-bottom: var(--stn-space-0, 0px);
+}
+
+.stn-container--disable-padding-left,
+.stn-container.stn-container--disable-padding-left,
+.stn-layer-1__body > .stn-container.stn-container--disable-padding-left {
+  --stn-container-padding-left: var(--stn-container-gutter-none, 0px);
+  padding-left: var(--stn-container-gutter-none, 0px);
+}
+
+.stn-container--disable-padding-right,
+.stn-container.stn-container--disable-padding-right,
+.stn-layer-1__body > .stn-container.stn-container--disable-padding-right {
+  --stn-container-padding-right: var(--stn-container-gutter-none, 0px);
+  padding-right: var(--stn-container-gutter-none, 0px);
+}
+
+.stn-container--disable-padding,
+.stn-container.stn-container--disable-padding,
+.stn-layer-1__body > .stn-container.stn-container--disable-padding {
+  --stn-container-padding-top: var(--stn-space-0, 0px);
+  --stn-container-padding-bottom: var(--stn-space-0, 0px);
+  --stn-container-padding-left: var(--stn-space-0, 0px);
+  --stn-container-padding-right: var(--stn-space-0, 0px);
+  padding: var(--stn-space-0, 0px);
 }
 
 /* Fluid max-width. width 100%라서 캡에 닿기 전까지 화면과 같이 늘어난다.

package/styles/layouts/stn-layer1-content.css

@@ -177,7 +177,10 @@
   display: flex;
   flex-direction: column;
   box-sizing: border-box;
-  padding: var(--stn-space-16);
+  padding-top: var(--stn-container-padding-top, var(--stn-space-16));
+  padding-bottom: var(--stn-container-padding-bottom, var(--stn-space-16));
+  padding-left: var(--stn-container-padding-left, var(--stn-space-16));
+  padding-right: var(--stn-container-padding-right, var(--stn-space-16));
   overflow: hidden;
 }
 

package/styles/patterns/stn-floating-toolbar.css

@@ -80,6 +80,45 @@
   flex-direction: column;
 }
 
+/* 자식 요소 정렬 (Align Items) */
+.stn-floating-toolbar--align-stretch {
+  align-items: stretch;
+}
+.stn-floating-toolbar--align-start {
+  align-items: flex-start;
+}
+.stn-floating-toolbar--align-end {
+  align-items: flex-end;
+}
+.stn-floating-toolbar--align-center {
+  align-items: center;
+}
+
+/* 간격 스케일 (Gap) */
+.stn-floating-toolbar--gap-xs {
+  gap: var(--stn-space-2);
+}
+.stn-floating-toolbar--gap-sm {
+  gap: var(--stn-space-4);
+}
+.stn-floating-toolbar--gap-md {
+  gap: var(--stn-space-6);
+}
+.stn-floating-toolbar--gap-lg {
+  gap: var(--stn-space-8);
+}
+
+/* 너비 프리셋 (.w80 ~ .w200, .full) — STN 3대 Width 규격 */
+.stn-floating-toolbar.w80 { width: var(--stn-size-80, 80px); }
+.stn-floating-toolbar.w100 { width: var(--stn-size-100, 100px); }
+.stn-floating-toolbar.w120 { width: var(--stn-size-120, 120px); }
+.stn-floating-toolbar.w140 { width: var(--stn-size-140, 140px); }
+.stn-floating-toolbar.w160 { width: var(--stn-size-160, 160px); }
+.stn-floating-toolbar.w180 { width: var(--stn-size-180, 180px); }
+.stn-floating-toolbar.w200 { width: var(--stn-size-200, 200px); }
+.stn-floating-toolbar.full,
+.stn-floating-toolbar--full { width: 100%; }
+
 /* 툴바 구분선 */
 .stn-floating-toolbar__divider {
   width: 1px;

package/styles/style-pub.css

@@ -48,6 +48,8 @@
 @import './components/stn-popup.css';
 @import './components/stn-drawer.css';
 @import './components/stn-table.css';
+@import './components/stn-list.css';
+@import './components/stn-menu.css';
 @import './components/stn-pagination.css';
 @import './components/stn-slider.css';
 @import './components/stn-progress-bar.css';

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

@@ -32,7 +32,7 @@
   --stn-warning: var(--stn-teal-400);
   --stn-feedback-success: var(--stn-green-400);
   --stn-feedback-info: var(--stn-blue-400);
-  --stn-feedback-warning: var(--stn-yellow-300);
+  --stn-feedback-warning: var(--stn-yellow-400);
   --stn-feedback-error: var(--stn-red-400);
   --stn-feedback-discovery: var(--stn-purple-400);
   --stn-text-primary: var(--stn-gray-100);
@@ -53,6 +53,7 @@
   --stn-elevation-surface-2: var(--stn-gray-800);
   --stn-elevation-surface-widget: var(--stn-gray-850);
   --stn-drawer-bg: var(--stn-gray-850);
+  --stn-drawer-bg-subtle: var(--stn-gray-900);
   --stn-dim-bg: color-mix(in srgb, var(--stn-gray-950) 50%, transparent);
   --stn-dim-blur: 4px;
   --stn-input-bg: var(--stn-gray-900);
@@ -497,12 +498,24 @@
   --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-link-line: var(--stn-opacity-white-80);
+  --stn-topology-node-normal: var(--stn-gray-250);
   --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-topology-node-current-bg: color-mix(in srgb, var(--stn-static-white) 22%, transparent);
+  --stn-topology-node-current-ring: color-mix(in srgb, var(--stn-static-white) 40%, transparent);
+  --stn-topology-node-current-ambient: color-mix(in srgb, var(--stn-static-white) 15%, transparent);
+  --stn-topology-node-current-glow: color-mix(in srgb, var(--stn-static-white) 20%, transparent);
+  --stn-topology-node-point: var(--stn-primary);
+  --stn-topology-badge-bg: var(--stn-primary);
+  --stn-topology-badge-text: var(--stn-static-white);
+  --stn-topology-link-label-fg: var(--stn-text-secondary);
+  --stn-topology-link-label-halo: var(--stn-elevation-surface-0);
+  --stn-topology-node-label-fg: var(--stn-text-primary);
+  --stn-topology-node-label-halo: var(--stn-elevation-surface-0);
   --stn-widget-critical-accent: var(--stn-red-550);
   --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;
@@ -765,7 +778,7 @@
   --stn-grade-minor-count: var(--stn-yellow-500);
   --stn-grade-warning: var(--stn-teal-500);
   --stn-grade-normal: var(--stn-green-500);
-  --stn-grade-neutral: var(--stn-gray-400);
+  --stn-grade-neutral: var(--stn-gray-450);
   --stn-icon-fg: var(--stn-gray-600);
   --stn-icon-fg-muted: var(--stn-gray-400);
   --stn-elevation-surface-0: var(--stn-gray-25);
@@ -773,6 +786,7 @@
   --stn-elevation-surface-2: var(--stn-static-white);
   --stn-elevation-surface-widget: var(--stn-static-white);
   --stn-drawer-bg: var(--stn-static-white);
+  --stn-drawer-bg-subtle: var(--stn-gray-50);
   --stn-dim-bg: color-mix(in srgb, var(--stn-gray-900) 20%, transparent);
   --stn-dim-blur: 2px;
   --stn-input-bg: var(--stn-static-white);
@@ -865,7 +879,7 @@
   --stn-table-pill-bg: var(--stn-static-white);
   --stn-table-pill-fg: var(--stn-gray-750);
   --stn-table-pill-shadow: 1px 1px 2px color-mix(in srgb, var(--stn-static-black) 10%, transparent);
-  --stn-table-row-hover: var(--stn-gray-25);
+  --stn-table-row-hover: var(--stn-gray-50);
   --stn-table-td-fg: var(--stn-gray-750);
   --stn-table-th-bg: var(--stn-gray-75);
   --stn-table-th-fg: var(--stn-gray-700);
@@ -1219,12 +1233,24 @@
   --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-link-line: var(--stn-opacity-black-45);
+  --stn-topology-node-normal: var(--stn-gray-600);
   --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-topology-node-current-bg: color-mix(in srgb, var(--stn-gray-900) 15%, transparent);
+  --stn-topology-node-current-ring: color-mix(in srgb, var(--stn-gray-900) 30%, transparent);
+  --stn-topology-node-current-ambient: color-mix(in srgb, var(--stn-gray-900) 12%, transparent);
+  --stn-topology-node-current-glow: color-mix(in srgb, var(--stn-gray-700) 15%, transparent);
+  --stn-topology-node-point: var(--stn-primary);
+  --stn-topology-badge-bg: var(--stn-primary);
+  --stn-topology-badge-text: var(--stn-static-white);
+  --stn-topology-link-label-fg: var(--stn-text-secondary);
+  --stn-topology-link-label-halo: var(--stn-elevation-surface-0);
+  --stn-topology-node-label-fg: var(--stn-text-primary);
+  --stn-topology-node-label-halo: var(--stn-elevation-surface-0);
   --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-size-semantic.css

@@ -34,6 +34,11 @@
   --stn-text-field-height-lg: var(--stn-size-40);
   --stn-text-field-height-md: var(--stn-size-32);
   --stn-text-field-height-sm: var(--stn-size-24);
+  --stn-list-item-height-xs: var(--stn-size-24);
+  --stn-list-item-height-sm: var(--stn-size-32);
+  --stn-list-item-height-md: var(--stn-size-40);
+  --stn-list-item-height-lg: var(--stn-size-48);
+  --stn-list-item-height-xl: var(--stn-size-56);
   --stn-card-header-min-height: var(--stn-size-40);
   --stn-split-view-side-width-sm: var(--stn-size-220);
   --stn-split-view-side-width-md: var(--stn-size-280);
@@ -43,6 +48,12 @@
   --stn-dropdown-height-md: var(--stn-size-32);
   --stn-dropdown-height-lg: var(--stn-size-40);
   --stn-dropdown-height-xl: var(--stn-size-56);
+  --stn-menu-min-width: var(--stn-size-140);
+  --stn-menu-item-height-xs: var(--stn-size-24);
+  --stn-menu-item-height-sm: var(--stn-size-28);
+  --stn-menu-item-height-md: var(--stn-size-32);
+  --stn-menu-item-height-lg: var(--stn-size-38);
+  --stn-menu-item-height-xl: var(--stn-size-44);
   --stn-date-range-field-height-sm: var(--stn-size-24);
   --stn-date-range-field-height-md: var(--stn-size-32);
   --stn-date-range-field-height-lg: var(--stn-size-40);
@@ -275,18 +286,19 @@
   --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-node-size-xl: var(--stn-size-56);
-  --stn-topology-node-radius-xs: var(--stn-size-12);
-  --stn-topology-node-radius-sm: var(--stn-size-16);
-  --stn-topology-node-radius-md: var(--stn-size-20);
-  --stn-topology-node-radius-lg: var(--stn-size-24);
-  --stn-topology-node-radius-xl: var(--stn-size-28);
+  --stn-topology-node-size-xs: var(--stn-size-12);
+  --stn-topology-node-size-sm: var(--stn-size-16);
+  --stn-topology-node-size-md: var(--stn-size-20);
+  --stn-topology-node-size-lg: var(--stn-size-24);
+  --stn-topology-node-size-xl: var(--stn-size-28);
+  --stn-topology-node-radius-xs: var(--stn-size-6);
+  --stn-topology-node-radius-sm: var(--stn-size-8);
+  --stn-topology-node-radius-md: var(--stn-size-10);
+  --stn-topology-node-radius-lg: var(--stn-size-12);
+  --stn-topology-node-radius-xl: var(--stn-size-14);
   --stn-topology-container-min-height: var(--stn-size-260);
   --stn-topology-node-border-width: var(--stn-size-1);
+  --stn-topology-node-stroke: 1.2px;
   --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-size.css

@@ -25,6 +25,7 @@
   --stn-size-28: 28px;
   --stn-size-32: 32px;
   --stn-size-36: 36px;
+  --stn-size-38: 38px;
   --stn-size-40: 40px;
   --stn-size-42: 42px;
   --stn-size-44: 44px;

package/dist/chunk-2PIUQUBN.js

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

package/dist/chunk-2PIUQUBN.js.map

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

package/dist/chunk-ERZPIKPF.js

@@ -1 +0,0 @@
-//# sourceMappingURL=chunk-ERZPIKPF.js.map