@stn-uiux/pub-ui 0.1.68 → 0.1.70

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

@@ -64,6 +64,7 @@
   --stn-input-focus-bg: color-mix(in srgb, var(--stn-blue-250) 10%, transparent);
   --stn-input-focus-fg: var(--stn-blue-300);
   --stn-input-placeholder: var(--stn-gray-600);
+  --stn-dropdown-bg-translucent: var(--stn-opacity-black-25);
   --stn-label-prefix-label-bg: var(--stn-gray-800);
   --stn-tooltip-bg-neutral: var(--stn-gray-700);
   --stn-tooltip-fg-neutral: var(--stn-static-white);
@@ -348,6 +349,8 @@
   --stn-side-nav-gradient-icon-glow: var(--stn-cobalt-75);
   --stn-on-color: var(--stn-static-white);
   --stn-shade: var(--stn-gray-950);
+  --stn-tab-badge-bg: var(--stn-gray-700);
+  --stn-tab-badge-fg: var(--stn-text-tertiary);
   --stn-badge-subtle-bg: var(--stn-opacity-white-10);
   --stn-badge-error: var(--stn-red-350);
   --stn-badge-primary: var(--stn-blue-400);
@@ -376,7 +379,7 @@
   --stn-scroll-thumb-muted: var(--stn-gray-600);
   --stn-scroll-thumb-muted-hover: var(--stn-gray-500);
   --stn-chip-teal: var(--stn-teal-400);
-  --stn-chip-neutral: var(--stn-gray-500);
+  --stn-chip-neutral: var(--stn-gray-400);
   --stn-chip-fg-contrast: var(--stn-gray-950);
   --stn-chip-accent-mint: var(--stn-teal-300);
   --stn-chip-accent-sky: var(--stn-blue-300);
@@ -488,7 +491,7 @@
   --stn-widget-footer-well-border: transparent;
   --stn-widget-chevron: var(--stn-gray-250);
   --stn-widget-overlay: color-mix(in srgb, var(--stn-gray-850) 92%, transparent);
-  --stn-widget-overlay-border: var(--stn-gray-750);
+  --stn-widget-overlay-border: var(--stn-gray-700);
   --stn-widget-overlay-scrim: color-mix(in srgb, var(--stn-gray-850) 28%, transparent);
   --stn-widget-overlay-scrim-border: color-mix(in srgb, var(--stn-static-white) 10%, transparent);
   --stn-widget-overlay-fade: linear-gradient(115.89deg, color-mix(in srgb, var(--stn-gray-850) 85%, transparent) 0%, color-mix(in srgb, var(--stn-gray-900) 85%, transparent) 50.29%, color-mix(in srgb, var(--stn-gray-950) 85%, transparent) 100%);
@@ -597,6 +600,8 @@
   --stn-status-flow-step-color: var(--stn-gray-200);
   --stn-status-flow-connector-color: var(--stn-gray-600);
   --stn-status-flow-connector-opacity: 0.6;
+  --stn-status-dot-bordered-border: var(--stn-border-strong);
+  --stn-status-dot-bordered-bg: var(--stn-gray-800);
 }
 
 [data-theme='light'] {
@@ -639,7 +644,7 @@
   --stn-grade-neutral: var(--stn-gray-400);
   --stn-icon-fg: var(--stn-gray-600);
   --stn-icon-fg-muted: var(--stn-gray-400);
-  --stn-elevation-surface-0: var(--stn-static-white);
+  --stn-elevation-surface-0: var(--stn-gray-25);
   --stn-elevation-surface-1: var(--stn-opacity-black-0);
   --stn-elevation-surface-2: var(--stn-static-white);
   --stn-elevation-surface-widget: var(--stn-static-white);
@@ -656,6 +661,7 @@
   --stn-input-focus-bg: var(--stn-static-white);
   --stn-input-focus-fg: var(--stn-gray-600);
   --stn-input-placeholder: var(--stn-gray-400);
+  --stn-dropdown-bg-translucent: var(--stn-opacity-white-50);
   --stn-label-prefix-label-bg: var(--stn-gray-50);
   --stn-label-prefix-divider: var(--stn-gray-200);
   --stn-label-prefix-label-color: var(--stn-gray-500);
@@ -730,7 +736,7 @@
   --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-td-fg: var(--stn-gray-750);
-  --stn-table-th-bg: var(--stn-gray-50);
+  --stn-table-th-bg: var(--stn-gray-75);
   --stn-table-th-fg: var(--stn-gray-700);
   --stn-table-th-radius: 4px;
   --stn-pagination-active-bg: var(--stn-opacity-black-5);
@@ -942,6 +948,8 @@
   --stn-side-nav-gradient-icon-glow: var(--stn-cobalt-75);
   --stn-on-color: var(--stn-static-white);
   --stn-shade: var(--stn-gray-950);
+  --stn-tab-badge-bg: var(--stn-gray-100);
+  --stn-tab-badge-fg: var(--stn-text-secondary);
   --stn-badge-subtle-bg: var(--stn-opacity-black-5);
   --stn-badge-error: var(--stn-red-500);
   --stn-badge-primary: var(--stn-blue-500);
@@ -970,7 +978,7 @@
   --stn-scroll-thumb-muted: var(--stn-gray-600);
   --stn-scroll-thumb-muted-hover: var(--stn-gray-500);
   --stn-chip-teal: var(--stn-teal-500);
-  --stn-chip-neutral: var(--stn-gray-500);
+  --stn-chip-neutral: var(--stn-gray-400);
   --stn-chip-fg-contrast: var(--stn-gray-950);
   --stn-chip-accent-mint: var(--stn-teal-300);
   --stn-chip-accent-sky: var(--stn-blue-300);
@@ -1074,7 +1082,7 @@
   --stn-widget-minor-bg: color-mix(in srgb, var(--stn-yellow-50) 65%, var(--stn-static-white));
   --stn-widget-minor-glow: 0 0 16px 0 color-mix(in srgb, var(--stn-yellow-400) 22%, transparent) inset, 0 2px 8px 0 color-mix(in srgb, var(--stn-yellow-400) 12%, transparent);
   --stn-widget-slot-border: var(--stn-gray-200);
-  --stn-widget-slot-bg: var(--stn-gray-50);
+  --stn-widget-slot-bg: color-mix(in srgb, var(--stn-gray-900) 3%, transparent);
   --stn-widget-drag-bg: linear-gradient(281deg, var(--stn-gray-25) 4%, var(--stn-gray-50) 31%, var(--stn-static-white) 61%);
   --stn-widget-drag-shadow: 1px 1px 2px 0 var(--stn-static-white) inset, 2px 2px 4px 0 var(--stn-gray-100), 0 0 2px 0 var(--stn-gray-100);
   --stn-widget-drag-fg: var(--stn-blue-600);
@@ -1191,4 +1199,6 @@
   --stn-status-flow-step-color: var(--stn-gray-800);
   --stn-status-flow-connector-color: var(--stn-gray-400);
   --stn-status-flow-connector-opacity: 0.7;
+  --stn-status-dot-bordered-border: var(--stn-border-subtle);
+  --stn-status-dot-bordered-bg: var(--stn-elevation-surface-2);
 }

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

@@ -221,6 +221,7 @@
   --stn-widget-severity-border-width: var(--stn-size-4);
   --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);
   --stn-widget-overlay-blur: var(--stn-size-4);
   --stn-widget-severity-blur: var(--stn-size-6);
   --stn-widget-dot-size: var(--stn-size-8);

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

@@ -203,6 +203,10 @@
   --stn-severity-badge-padding-sm: var(--stn-space-2) var(--stn-space-4);
   --stn-severity-badge-padding-md: var(--stn-space-4) var(--stn-space-8);
   --stn-severity-badge-padding-lg: var(--stn-space-4) var(--stn-space-10);
+  --stn-severity-badge-gap: var(--stn-space-4);
+  --stn-severity-badge-gap-sm: var(--stn-space-2);
+  --stn-severity-badge-gap-md: var(--stn-space-4);
+  --stn-severity-badge-gap-lg: var(--stn-space-4);
   --stn-widget-padding: var(--stn-space-12);
   --stn-widget-head-margin-bottom: var(--stn-space-8);
   --stn-widget-footer-padding: var(--stn-space-8) var(--stn-space-12);

package/dist/chunk-AVICAV6Z.js

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

package/dist/chunk-HJCUNRB3.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/data/stnLayer0Background.ts"],"sourcesContent":["/**\n * Infomap Layer 0 background pattern\n * Light: 41267 · 186876 · 186860 · 202895\n * Dark:  80488 · 35369 · 84014 · 91183\n * @see StnLayer0Background · layouts/stn-layer0-bg.css\n */\n\nexport const STN_LAYER0_BACKGROUND_FIGMA = {\n  none: '40000040:41267',\n  noneDark: '40000040:80488',\n  showroomA: '40000042:186876',\n  showroomADark: '40002117:35369',\n  showroomB: '40000042:186860',\n  showroomBDark: '40000040:84014',\n  mapLight: '40000042:202895',\n  mapDark: '40000040:91183',\n  login: '40004209:78293',\n  loginDark: '40004209:78293',\n  dashboard: '40004209:78300',\n  dashboardDark: '40004209:78300',\n} as const\n\nexport type StnLayer0BackgroundKind = 'color' | 'gradient' | 'image'\n\n/** Figma 예제 프리셋 — color 1종 · gradient 1종 · image 5종 (light/dark 자동 전환) */\nexport type StnLayer0BackgroundPreset = 'none' | 'gradient' | 'showroom-a' | 'showroom-b' | 'map-light' | 'login' | 'dashboard'\n\n/** Doc site · Pub HTML 기준 경로 — 앱에서는 동일 경로 또는 자산 URL로 교체 */\nexport {\n  STN_LAYER0_BACKGROUND_ASSET_PATHS,\n  STN_LAYER0_BACKGROUND_DEMO_IMAGES,\n} from './stnLayer0BackgroundAssets'\n\nexport const STN_LAYER0_BACKGROUND_INTRO =\n  '페이지 최하단 레벨(Level 0)에 위치하는 시스템 바닥면 배경 패턴입니다. 단색 컬러 및 맵·토폴로지 캔버스 배경 이미지를 `StnLayer0BackgroundPreset`으로 손쉽게 적용할 수 있습니다.'\n\nexport const STN_LAYER0_BACKGROUND_VARIANT_ROWS = [\n  {\n    preset: 'none',\n    kind: 'color',\n    figma: STN_LAYER0_BACKGROUND_FIGMA.none,\n    figmaDark: STN_LAYER0_BACKGROUND_FIGMA.noneDark,\n    note: 'Light gradient · Dark elevation surface-0 (gray-950)',\n  },\n  {\n    preset: 'dashboard',\n    kind: 'image',\n    figma: STN_LAYER0_BACKGROUND_FIGMA.dashboard,\n    figmaDark: STN_LAYER0_BACKGROUND_FIGMA.dashboardDark,\n    note: 'Dashboard · light/dark pair',\n  },\n  {\n    preset: 'showroom-a',\n    kind: 'image',\n    figma: STN_LAYER0_BACKGROUND_FIGMA.showroomA,\n    figmaDark: STN_LAYER0_BACKGROUND_FIGMA.showroomADark,\n    note: 'Showroom A · dark logo stage',\n  },\n  {\n    preset: 'showroom-b',\n    kind: 'image',\n    figma: STN_LAYER0_BACKGROUND_FIGMA.showroomB,\n    figmaDark: STN_LAYER0_BACKGROUND_FIGMA.showroomBDark,\n    note: 'Showroom B · dark + radial vignette',\n  },\n  {\n    preset: 'map-light',\n    kind: 'image',\n    figma: STN_LAYER0_BACKGROUND_FIGMA.mapLight,\n    figmaDark: STN_LAYER0_BACKGROUND_FIGMA.mapDark,\n    note: 'Map light(+20% white) · Map dark',\n  },\n  {\n    preset: 'login',\n    kind: 'image',\n    figma: STN_LAYER0_BACKGROUND_FIGMA.login,\n    figmaDark: STN_LAYER0_BACKGROUND_FIGMA.loginDark,\n    note: 'Login · light/dark pair',\n  },\n] as const satisfies ReadonlyArray<{\n  preset: StnLayer0BackgroundPreset\n  kind: StnLayer0BackgroundKind\n  figma: string\n  figmaDark: string\n  note: string\n}>\n\nexport const STN_LAYER0_BACKGROUND_USAGE = `import {\n  StnLayer,\n  StnLayer0Background,\n  StnLayer0BackgroundPreset,\n  DashboardPageScaffold,\n} from '@stn-uiux/pub-ui-react'\n\n/** Map / Topology — wrapClassName만 (맵 배경은 elevation CSS) */\n<DashboardPageScaffold\n  shell=\"layer\"\n  wrapClassName=\"stn-page--map-bg\"\n  gnb={…}\n  header={…}\n/>\n\n/** 일반 페이지 — L0 color (default = elevation-surface-0) */\n<StnLayer.Background>\n  <StnLayer0Background color=\"default\" />\n  <StnLayer.Content>{/* 본문 */}</StnLayer.Content>\n</StnLayer.Background>\n\n/** Figma image 프리셋 — showroom · map · login */\n<StnLayer.Background>\n  <StnLayer0BackgroundPreset variant=\"map-light\" />\n  <StnLayer.Content>{/* 본문 */}</StnLayer.Content>\n</StnLayer.Background>\n\n<StnLayer.Background>\n  <StnLayer0BackgroundPreset variant=\"login\" />\n  <StnLayer.Content>{/* 본문 */}</StnLayer.Content>\n</StnLayer.Background>\n\n/** 직접 조합 — light/dark 이미지 */\n<StnLayer.Background>\n  <StnLayer0Background\n    kind=\"image\"\n    src=\"/assets/bg-light.png\"\n    srcDark=\"/assets/bg-dark.png\"\n  />\n  <StnLayer.Content>…</StnLayer.Content>\n</StnLayer.Background>`\n\nexport const STN_LAYER0_BACKGROUND_USAGE_HTML = `<!-- L0 background — color / image -->\n<div class=\"stn-elev-0 stn-layer0-bg\">\n  <!-- color -->\n  <div class=\"stn-layer0-bg color default\" aria-hidden=\"true\"></div>\n\n  <!-- 또는 image -->\n  <div\n    class=\"stn-layer0-bg image\"\n    style=\"--stn-layer0-bg-image: url('/assets/bg-light.png')\"\n    aria-hidden=\"true\"\n  ></div>\n\n  <main class=\"stn-elev-1\"><!-- L1 content --></main>\n</div>`\n\nexport const STN_LAYER0_MAP_LIGHT_OVERLAY = 0.2\n\n/** Patterns → Background playground 프리셋 (UI 라벨 · 내부 variant) */\nexport type StnLayer0BackgroundPlaygroundPresetId =\n  | 'dashboard'\n  | 'color'\n  | 'gradient'\n  | 'map'\n  | 'topology'\n  | 'none'\n\nexport const STN_LAYER0_BACKGROUND_PLAYGROUND_PRESETS: {\n  id: StnLayer0BackgroundPlaygroundPresetId\n  label: string\n  asset: string\n  variant?: StnLayer0BackgroundPreset\n}[] = [\n  { id: 'dashboard', label: 'dashboard', asset: '대시보드 배경 (dashboard-light / dark)', variant: 'dashboard' },\n  { id: 'color', label: 'color', asset: '단색 테마 배경 (solid default)', variant: 'none' },\n  { id: 'gradient', label: 'gradient', asset: '공식 앰비언트 그라데이션 (워시/심도)', variant: 'gradient' },\n  { id: 'map', label: 'map', asset: 'GIS 지도 배경 (map-light)', variant: 'map-light' },\n  { id: 'topology', label: 'topology', asset: '토폴로지 배경 (showroom-b)', variant: 'showroom-b' },\n  { id: 'none', label: 'none', asset: 'L0 배경 없음 (외부 캔버스 전용)', variant: 'none' },\n]\n"],"mappings":";AAOO,IAAM,8BAA8B;AAAA,EACzC,MAAM;AAAA,EACN,UAAU;AAAA,EACV,WAAW;AAAA,EACX,eAAe;AAAA,EACf,WAAW;AAAA,EACX,eAAe;AAAA,EACf,UAAU;AAAA,EACV,SAAS;AAAA,EACT,OAAO;AAAA,EACP,WAAW;AAAA,EACX,WAAW;AAAA,EACX,eAAe;AACjB;AAaO,IAAM,8BACX;AAEK,IAAM,qCAAqC;AAAA,EAChD;AAAA,IACE,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,OAAO,4BAA4B;AAAA,IACnC,WAAW,4BAA4B;AAAA,IACvC,MAAM;AAAA,EACR;AAAA,EACA;AAAA,IACE,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,OAAO,4BAA4B;AAAA,IACnC,WAAW,4BAA4B;AAAA,IACvC,MAAM;AAAA,EACR;AAAA,EACA;AAAA,IACE,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,OAAO,4BAA4B;AAAA,IACnC,WAAW,4BAA4B;AAAA,IACvC,MAAM;AAAA,EACR;AAAA,EACA;AAAA,IACE,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,OAAO,4BAA4B;AAAA,IACnC,WAAW,4BAA4B;AAAA,IACvC,MAAM;AAAA,EACR;AAAA,EACA;AAAA,IACE,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,OAAO,4BAA4B;AAAA,IACnC,WAAW,4BAA4B;AAAA,IACvC,MAAM;AAAA,EACR;AAAA,EACA;AAAA,IACE,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,OAAO,4BAA4B;AAAA,IACnC,WAAW,4BAA4B;AAAA,IACvC,MAAM;AAAA,EACR;AACF;AAQO,IAAM,8BAA8B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA0CpC,IAAM,mCAAmC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAezC,IAAM,+BAA+B;AAWrC,IAAM,2CAKP;AAAA,EACJ,EAAE,IAAI,aAAa,OAAO,aAAa,OAAO,kEAAoC,SAAS,YAAY;AAAA,EACvG,EAAE,IAAI,SAAS,OAAO,SAAS,OAAO,0DAA4B,SAAS,OAAO;AAAA,EAClF,EAAE,IAAI,YAAY,OAAO,YAAY,OAAO,oGAAyB,SAAS,WAAW;AAAA,EACzF,EAAE,IAAI,OAAO,OAAO,OAAO,OAAO,6CAAyB,SAAS,YAAY;AAAA,EAChF,EAAE,IAAI,YAAY,OAAO,YAAY,OAAO,sDAAwB,SAAS,aAAa;AAAA,EAC1F,EAAE,IAAI,QAAQ,OAAO,QAAQ,OAAO,+EAAwB,SAAS,OAAO;AAC9E;","names":[]}

package/dist/chunk-LKVTW54X.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/data/stnDropdown.ts"],"sourcesContent":["/**\n * StnDropdown — native `<select>` · custom menu (`div.selected` + `ul.select_option`)\n * @see common.css · content.css (cctv-header, simple_board_area, ip_mpls)\n */\n\nexport type StnDropdownMode = 'native' | 'menu'\n\nexport type StnDropdownSize = 'sm' | 'md' | 'lg' | 'xl'\n\nexport type StnDropdownVariant = 'outline' | 'standard' | 'filled' | 'transparent'\nexport type StnDropdownHelperTextPosition = 'top' | 'bottom' | 'left' | 'right'\nexport type StnDropdownDirection = 'down' | 'up'\n\n/** native: select에 class 직접 · wrapper: div.stn-dropdown > select.selected */\nexport type StnDropdownNativeLayout = 'inline' | 'wrapper'\n\nexport type StnDropdownModifier =\n  | 'pageSize'\n  | 'serverFilter'\n  | 'networkArea'\n  | 'fullWidth'\n\nexport type StnDropdownOption = {\n  value: string\n  label: string\n  disabled?: boolean\n}\n\n/** StnDropdown menu sm/md/lg/xl — height only · width는 `width`/`fullWidth` */\nexport const STN_DROPDOWN_SIZE_ROWS: readonly {\n  size: StnDropdownSize\n  height: string\n  radius: string\n  fontSize: string\n  pubClass: string\n  typicalWidth: string\n  usedIn: string\n}[] = [\n  {\n    size: 'sm',\n    height: '24px',\n    radius: '4px (radius-4)',\n    fontSize: '13px',\n    pubClass: 'stn-dropdown sm',\n    typicalWidth: 'width 프리셋 · 기본 180px · fullWidth=100%',\n    usedIn: '폼·테이블 셀 · 좁은 검색',\n  },\n  {\n    size: 'md',\n    height: '32px',\n    radius: '4px (radius-4)',\n    fontSize: '13px',\n    pubClass: 'stn-dropdown md',\n    typicalWidth: 'width 프리셋 · 기본 180px · fullWidth=100%',\n    usedIn: '검색영역 · interface_list',\n  },\n  {\n    size: 'lg',\n    height: '40px',\n    radius: '6px (radius-6)',\n    fontSize: '14px',\n    pubClass: 'stn-dropdown lg',\n    typicalWidth: 'width 프리셋 · 기본 180px · fullWidth=100%',\n    usedIn: '강조 검색 · 넓은 라벨 열',\n  },\n  {\n    size: 'xl',\n    height: '52px',\n    radius: '8px (radius-8)',\n    fontSize: '15px',\n    pubClass: 'stn-dropdown xl',\n    typicalWidth: 'width 프리셋 · 기본 180px · fullWidth=100%',\n    usedIn: 'CCTV 헤더 검색 · 대형 대시보드 메뉴 (기존 prominent 통합)',\n  },\n] as const\n\nexport const STN_DROPDOWN_INTRO =\n  'Infomap **input** 크롬 + `.stn-dropdown` 계약입니다. **Light** (`40000042:186901`) — white · gray-200 · gray-600. **Dark** (modal `40000040:75056`) — TextField와 동일 `--stn-input-*`. Chevron: Figma `40000040:101798` `icon/line/arrow-right` 12px (`/@assets/svg/system/line/arrow-right.svg` · rotate 90°). React 표준 **`StnDropdown` menu** — sm/md/lg(24·32·40px) · width 프리셋/fullWidth.'\n\nexport const STN_DROPDOWN_INVENTORY: readonly {\n  id: string\n  mode: StnDropdownMode\n  size: StnDropdownSize\n  pubClass: string\n  height: string\n  typicalWidth: string\n  usedIn: string\n  exampleHtml: string\n}[] = [\n  {\n    id: 'native-search-md',\n    mode: 'native',\n    size: 'md',\n    pubClass: 'stn-dropdown stn-dropdown--size-md',\n    height: '32px',\n    typicalWidth: '130px (.search_area) · 기본 180px',\n    usedIn: '검색영역 — interface_list, device_detail',\n    exampleHtml: 'ip_mpls/interface_list.html',\n  },\n  {\n    id: 'native-form-sm',\n    mode: 'native',\n    size: 'sm',\n    pubClass: 'stn-dropdown stn-dropdown--size-sm',\n    height: '24px',\n    typicalWidth: '100% (.w100p) · 60–100px 인라인',\n    usedIn: '등록/상세 폼, IP-MPLS 테이블 셀',\n    exampleHtml: 'ip_mpls/interface_regist.html',\n  },\n  {\n    id: 'native-wrapper',\n    mode: 'native',\n    size: 'md',\n    pubClass: 'stn-dropdown > select.selected',\n    height: '32px',\n    typicalWidth: '130px',\n    usedIn: '처리상태 등 — wrapper 안에 select',\n    exampleHtml: 'dev_version/device_detail.html',\n  },\n  {\n    id: 'native-search-field',\n    mode: 'native',\n    size: 'md',\n    pubClass: 'stn-dropdown > select.selected.select_search',\n    height: '32px',\n    typicalWidth: 'auto',\n    usedIn: '검색분야 선택 + 텍스트 input 조합',\n    exampleHtml: 'dev_version/access_log.html',\n  },\n  {\n    id: 'menu-cctv-prominent',\n    mode: 'menu',\n    size: 'md',\n    pubClass: 'stn-dropdown stn-dropdown--prominent · .selected · .select_option',\n    height: '52px (prominent)',\n    typicalWidth: '110px (cctv-header) · 200px (simple_board)',\n    usedIn: 'CCTV 헤더 검색 — React `StnDropdownMenu`',\n    exampleHtml: 'koscom/honeycomb.html',\n  },\n  {\n    id: 'menu-board-prominent',\n    mode: 'menu',\n    size: 'md',\n    pubClass: 'simple_board_area .search_area .stn-dropdown.stn-dropdown--prominent',\n    height: '52px (prominent)',\n    typicalWidth: '200px',\n    usedIn: '간편 게시판 검색 — `StnDropdownMenu`',\n    exampleHtml: 'basic/simple_dashboard.html',\n  },\n  {\n    id: 'native-page-size',\n    mode: 'native',\n    size: 'md',\n    pubClass: 'stn-dropdown stn-table__page-size',\n    height: '32px',\n    typicalWidth: 'min 72px',\n    usedIn: '테이블 footer 페이지 크기',\n    exampleHtml: 'dev_version/device_detail.html',\n  },\n  {\n    id: 'native-server-filter',\n    mode: 'native',\n    size: 'md',\n    pubClass: 'stn-dropdown server_filter',\n    height: '32px',\n    typicalWidth: 'default',\n    usedIn: '프로세스 팝업 검색',\n    exampleHtml: 'dev_version/process (pop)',\n  },\n  {\n    id: 'native-network-area',\n    mode: 'native',\n    size: 'md',\n    pubClass: 'stn-dropdown network_area_box',\n    height: '32px',\n    typicalWidth: 'default',\n    usedIn: '토폴로지·망영역 선택',\n    exampleHtml: 'config topology screens',\n  },\n] as const\n\nexport const STN_DROPDOWN_HTML_COUNTS = {\n  nativeSelectBoxFiles: 56,\n  customMenuFiles: 12,\n  smallTysFiles: 17,\n  wrapperSelectFiles: 13,\n} as const\n\nexport const STN_DROPDOWN_USAGE = `import { StnDropdown } from '@stn-uiux/pub-ui-react'\n\n// size = 높이 · width = 별도 (80·100·140·180·200 · fullWidth)\n<StnDropdown size=\"sm\" width={100} options={gradeOptions} value={grade} onChange={setGrade} />\n<StnDropdown size=\"md\" width={180} options={shutdownOptions} value={shutdown} onChange={setShutdown} />\n<StnDropdown size=\"lg\" fullWidth options={statusOptions} value={status} onChange={setStatus} />`\n\nexport const STN_DROPDOWN_HTML = `<!-- StnDropdown · 커스텀 드롭다운 -->\n<div class=\"stn-dropdown md\">\n  <div class=\"selected\">선택값</div>\n  <ul class=\"select_option\">\n    <li>옵션 1</li>\n  </ul>\n</div>`\n\nexport const STN_DROPDOWN_MENU_INTRO =\n  '검색줄·대시보드용 **두꺼운 커스텀 메뉴**(52px, radius 8px). Pub `cctv-header` / `simple_board_area`와 동일 계열입니다. React는 `StnDropdownMenu`(`stn-dropdown--prominent`)를 쓰고, 일반 드롭다운 sm/md/lg는 `StnDropdown`입니다.'\n\nexport const STN_DROPDOWN_MENU_USAGE = `import { StnDropdownMenu } from '@stn-uiux/pub-ui-react'\n\n<StnDropdownMenu\n  width={110}\n  options={[\n    { value: 'all', label: '전체' },\n    { value: 'group', label: '그룹명' },\n    { value: 'device', label: '장비명' },\n  ]}\n  value={field}\n  onChange={setField}\n  aria-label=\"검색 필드\"\n/>`\n"],"mappings":"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","names":[]}

package/dist/chunk-XBFXX3D6.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/data/stnLayer0BackgroundAssets.ts"],"sourcesContent":["/**\n * L0 preset images — Hosted on STN Official Vercel CDN for zero-setup & instant loading.\n */\nexport const STN_CDN_ASSET_BASE = 'https://stn-design.vercel.app/images/layer0'\n\nexport const STN_LAYER0_BACKGROUND_DEMO_IMAGES = {\n  dashboard: `${STN_CDN_ASSET_BASE}/dashboard-light.png`,\n  dashboardLight: `${STN_CDN_ASSET_BASE}/dashboard-light.png`,\n  dashboardDark: `${STN_CDN_ASSET_BASE}/dashboard-dark.png`,\n  showroomA: `${STN_CDN_ASSET_BASE}/showroom-a-light.png`,\n  showroomALight: `${STN_CDN_ASSET_BASE}/showroom-a-light.png`,\n  showroomADark: `${STN_CDN_ASSET_BASE}/showroom-a-dark.png`,\n  showroomB: `${STN_CDN_ASSET_BASE}/showroom-b-light.png`,\n  showroomBLight: `${STN_CDN_ASSET_BASE}/showroom-b-light.png`,\n  showroomBDark: `${STN_CDN_ASSET_BASE}/showroom-b-dark.png`,\n  mapLight: `${STN_CDN_ASSET_BASE}/map-light.png`,\n  mapDark: `${STN_CDN_ASSET_BASE}/map-dark.png`,\n  login: `${STN_CDN_ASSET_BASE}/login-light.png`,\n  loginLight: `${STN_CDN_ASSET_BASE}/login-light.png`,\n  loginDark: `${STN_CDN_ASSET_BASE}/login-dark.png`,\n} as const\n\n/** Pub CSS @assets 경로 — HTML·vanilla 소비자용 */\nexport const STN_LAYER0_BACKGROUND_ASSET_PATHS = {\n  dashboard: '@assets/images/layer0/dashboard-light.png',\n  dashboardLight: '@assets/images/layer0/dashboard-light.png',\n  dashboardDark: '@assets/images/layer0/dashboard-dark.png',\n  showroomA: '@assets/images/layer0/showroom-a-light.png',\n  showroomALight: '@assets/images/layer0/showroom-a-light.png',\n  showroomADark: '@assets/images/layer0/showroom-a-dark.png',\n  showroomB: '@assets/images/layer0/showroom-b-light.png',\n  showroomBLight: '@assets/images/layer0/showroom-b-light.png',\n  showroomBDark: '@assets/images/layer0/showroom-b-dark.png',\n  mapLight: '@assets/images/layer0/map-light.png',\n  mapDark: '@assets/images/layer0/map-dark.png',\n  login: '@assets/images/layer0/login-light.png',\n  loginLight: '@assets/images/layer0/login-light.png',\n  loginDark: '@assets/images/layer0/login-dark.png',\n} as const\n"],"mappings":";AAGO,IAAM,qBAAqB;AAE3B,IAAM,oCAAoC;AAAA,EAC/C,WAAW,GAAG,kBAAkB;AAAA,EAChC,gBAAgB,GAAG,kBAAkB;AAAA,EACrC,eAAe,GAAG,kBAAkB;AAAA,EACpC,WAAW,GAAG,kBAAkB;AAAA,EAChC,gBAAgB,GAAG,kBAAkB;AAAA,EACrC,eAAe,GAAG,kBAAkB;AAAA,EACpC,WAAW,GAAG,kBAAkB;AAAA,EAChC,gBAAgB,GAAG,kBAAkB;AAAA,EACrC,eAAe,GAAG,kBAAkB;AAAA,EACpC,UAAU,GAAG,kBAAkB;AAAA,EAC/B,SAAS,GAAG,kBAAkB;AAAA,EAC9B,OAAO,GAAG,kBAAkB;AAAA,EAC5B,YAAY,GAAG,kBAAkB;AAAA,EACjC,WAAW,GAAG,kBAAkB;AAClC;AAGO,IAAM,oCAAoC;AAAA,EAC/C,WAAW;AAAA,EACX,gBAAgB;AAAA,EAChB,eAAe;AAAA,EACf,WAAW;AAAA,EACX,gBAAgB;AAAA,EAChB,eAAe;AAAA,EACf,WAAW;AAAA,EACX,gBAAgB;AAAA,EAChB,eAAe;AAAA,EACf,UAAU;AAAA,EACV,SAAS;AAAA,EACT,OAAO;AAAA,EACP,YAAY;AAAA,EACZ,WAAW;AACb;","names":[]}