@stn-uiux/pub-ui 0.1.86 → 0.1.87

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);
@@ -503,6 +504,17 @@
   --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 +777,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 +785,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);
@@ -1225,6 +1238,17 @@
   --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