@stn-uiux/pub-ui 0.1.76 → 0.1.78

package/dist/{chunk-2ZYBBVBT.js → chunk-36QC3ZAD.js}

@@ -295,7 +295,7 @@ var STN_LAYOUT_PAGE_TREE = `.stn-wrap (legacy v1: #wrap)
     \u251C\u2500\u2500 .stn-layer-1__header     (Header)
     \u2514\u2500\u2500 .stn-content-area / .stn-stack
         \u2514\u2500\u2500 .stn-stack \u2026`;
-var STN_LAYOUT_LAYER_PAGE_TREE = `.stn-wrap                         (Root Shell \xB7 data-stn-layer-mode="v2")
+var STN_LAYOUT_LAYER_PAGE_TREE = `.stn-wrap                         (Root Shell)
 \u251C\u2500\u2500 StnLayer.Background           (L0 \xB7 layer0-bg)
 \u251C\u2500\u2500 .stn-side-nav / StnSideNavigation  (absolute overlay \xB7 wrap \uC9C1\uC18D)
 \u251C\u2500\u2500 [data-stn-layer-role="utility"]  (toast \xB7 audio)
@@ -484,4 +484,4 @@ export {
   STN_LAYER_SHELL_USAGE,
   STN_LAYOUT_SHELL_USAGE
 };
-//# sourceMappingURL=chunk-2ZYBBVBT.js.map
+//# sourceMappingURL=chunk-36QC3ZAD.js.map

package/dist/{chunk-2ZYBBVBT.js.map → chunk-36QC3ZAD.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["../src/data/stnLayout.ts"],"sourcesContent":["/**\n * Pub page layout — `.stn-wrap` · `.stn-container` · `.stn-content-area` · 대시보드 region\n * @see layout.css · StnLayerShell (@stn-uiux/pub-ui-react)\n */\n\nexport const STN_LAYOUT_INTRO = ''\n\n/** 라이브 예제 탭 — shell 종류 + 대표 화면 레시피 */\nexport const STN_LAYOUT_PLAYGROUND_TABS: readonly {\n  id: 'list' | 'dashboard' | 'alert-center'\n  label: string\n  screen: string\n  shellProps: string\n  assemble: string\n}[] = [\n  {\n    id: 'list',\n    label: '리스트·상세',\n    screen: 'interface_list.html · syslog_status.html',\n    shellProps: \"contentModifiers={['has_lnb', 'has_sch']}\",\n    assemble: 'StnLayerShell — gnb · header · container(LNB aside + content stack)',\n  },\n  {\n    id: 'dashboard',\n    label: '맵·대시보드',\n    screen: 'basic/map.html · dashboard_map …',\n    shellProps: \"bodyWrapper='none'\",\n    assemble: 'DashboardPageScaffold · MapPlaceholder + dashboard_right',\n  },\n  {\n    id: 'alert-center',\n    label: '알림센터',\n    screen: 'basic/alert_center.html',\n    shellProps: \"bodyWrapper='none' · network_topology_header · GNB 알림패널\",\n    assemble: 'AlertCenterPageScaffold (맵 placeholder + 우측 4위젯)',\n  },\n]\n\nexport const STN_LAYOUT_LIST_VIEW_INTRO =\n  'List view는 배경 · Side Navigation · 페이지 헤더 · 트리 LNB · 검색 · 표로 구성됩니다. StnLayerShell 아래 StnContainer + StnStack으로 레이아웃을 투명하게 조립합니다. Playground에서 옵션을 고른 뒤 생성된 React/HTML 코드를 복사하세요.'\n\n/** 라이브러리 내부 조립 참고 — 제품 화면은 `STN_LAYOUT_LIST_VIEW_USAGE` 참고 */\nexport const STN_LAYOUT_LIST_VIEW_BARE_USAGE = `import {\n  StnLayerShell,\n  StnListViewLayout,\n  StnSideNavigation,\n  StnHeader,\n  StnSearchRequirementBar,\n  StnSectionSide,\n  StnTable,\n} from '@stn-uiux/pub-ui-react'\n\n/** StnLayerShell 안 — L1 listview 그리드만 (이중 L0/L2 없음) */\nexport function InterfaceListPage() {\n  return (\n    <StnLayerShell\n      gnb={<StnSideNavigation collapsed />}\n      header={<StnHeader variant=\"page\" />}\n      contentModifiers={['has_lnb', 'has_sch']}\n      lnbSide=\"left\"\n    >\n      <StnListViewLayout\n        bare\n        sidebar={<StnSectionSide>{/* StnTree */}</StnSectionSide>}\n        search={\n          <StnSearchRequirementBar>{/* Fields · SearchButton */}</StnSearchRequirementBar>\n        }\n      >\n        <StnTable summary=\"목록\" />\n      </StnListViewLayout>\n    </StnLayerShell>\n  )\n}`\n\n/** List view 문서 탭 */\nexport type StnLayoutListLayerTabId = 'live' | 'l0' | 'l1' | 'l2'\n\nexport const STN_LAYOUT_LIST_LAYER_TABS: {\n  id: StnLayoutListLayerTabId\n  label: string\n}[] = [\n  { id: 'live', label: '전체' },\n  { id: 'l0', label: 'L0 Background' },\n  { id: 'l1', label: 'L1 Main UI' },\n  { id: 'l2', label: 'L2 Modal' },\n]\n\nexport const STN_LAYOUT_LIST_VIEW_USAGE = `import {\n  StnLayerShell,\n  StnContainer,\n  StnStack,\n  StnHeader,\n  StnSideNavigation,\n  StnSectionSide,\n  StnTree,\n  StnSearchRequirementBar,\n  StnTable,\n  StnPagination,\n  StnButton,\n} from '@stn-uiux/pub-ui-react'\n\nexport function InterfaceListPage() {\n  return (\n    <StnLayerShell\n      lnbSide=\"left\"\n      gnb={<StnSideNavigation collapsed />}\n      header={<StnHeader variant=\"page\" />}\n    >\n      {/* 2단계: 최상위 본문 컨테이너 */}\n      <StnContainer maxWidth={false}>\n        {/* 3단계: 태블릿/모바일(<1280px)=세로 쌓기 / 데스크톱(lg ≥ 1280px)=가로 2분할 */}\n        <StnStack direction={{ xs: 'column', lg: 'row' }} spacing={2}>\n          {/* [LNB] 모바일: 상단 full-width / 데스크톱: 264px 고정 (StnSectionSide CSS) */}\n          <aside style={{ display: 'flex', flexDirection: 'column' }}>\n            <StnSectionSide fill fullWidth>\n              <StnTree size=\"md\" nodes={treeNodes} />\n            </StnSectionSide>\n          </aside>\n\n          {/* [우측 본문] 검색바 + 표 데이터 그리드 세로 스택 */}\n          <StnStack\n            direction=\"column\"\n            spacing={2}\n            style={{ flex: 1, minWidth: 0, minHeight: 0 }}\n          >\n            <StnSearchRequirementBar>\n              {/* Fields · SearchButton · Export */}\n            </StnSearchRequirementBar>\n\n            <StnTable\n              fill\n              trackVisited\n              summary=\"총 128개 (1 to 20)\"\n              footerCenter={<StnPagination page={1} count={8} />}\n              footerRight={\n                <>\n                  <StnButton size=\"md\" variant=\"contained\">등록</StnButton>\n                  <StnButton size=\"md\" variant=\"ghost\">수정</StnButton>\n                </>\n              }\n            >\n              <StnTable.Grid>{/* StnTable.Head + Body */}</StnTable.Grid>\n            </StnTable>\n          </StnStack>\n        </StnStack>\n      </StnContainer>\n    </StnLayerShell>\n  )\n}`\n\nexport const STN_LAYOUT_MAP_DASHBOARD_INTRO =\n  '대시보드는 L0 배경 · L1(header 크롬 + content 본문 단 하나) · L2 모달입니다. 본문은 `layer1` 슬롯이 아니라 `left`/`right`/`children`으로 조립합니다. `DashboardPageScaffold` (type=\"map\" | \"topology\" | \"widget-grid\").'\n\n/** Map / Dashboard 문서 탭 — List view와 동일 층 모델 */\nexport type StnLayoutMapLayerTabId = StnLayoutListLayerTabId\n\nexport const STN_LAYOUT_MAP_LAYER_TABS: {\n  id: StnLayoutMapLayerTabId\n  label: string\n}[] = [\n  { id: 'live', label: '전체' },\n  { id: 'l0', label: 'L0 Background' },\n  { id: 'l1', label: 'L1 Main UI' },\n  { id: 'l2', label: 'L2 Modal' },\n]\n\nexport const STN_LAYOUT_MAP_DASHBOARD_USAGE = `import { DashboardPageScaffold, StnLayer0Background, StnSideNavigation, StnHeader } from '@stn-uiux/pub-ui-react'\n\nexport function TopologyMapPage() {\n  return (\n    <DashboardPageScaffold\n      type=\"map\"\n      shell=\"layer\"\n      gnbSide=\"left\"\n      layer0={<StnLayer0Background variant=\"map-light\" />}\n      gnb={<StnSideNavigation collapsed />}\n      header={<StnHeader variant=\"dashboard\" />}\n    />\n  )\n}`\n\nexport const STN_LAYOUT_MAP_DASHBOARD_HEADER_USAGE = `import {\n  DashboardPageScaffold,\n  StnHeader,\n  StnSideNavigation,\n} from '@stn-uiux/pub-ui-react'\n\nexport function TopologyMapPage() {\n  return (\n    <DashboardPageScaffold\n      type=\"topology\"\n      shell=\"layer\"\n      gnb={<StnSideNavigation collapsed />}\n      header={<StnHeader variant=\"widget\" />}\n      mapMessage=\"토폴로지 맵\"\n    />\n  )\n}`\n\n/** 경우의 수 — 무엇을 쓸지 */\nexport const STN_LAYOUT_WHEN_TO_USE: readonly {\n  situation: string\n  use: string\n  export: string\n}[] = [\n  {\n    situation: '표준 3단계 층위 기반 페이지 구성',\n    use: 'StnLayerShell — L0 Background · L1 Main UI · L2 Modal',\n    export: 'StnLayerShell · lnbSide left|right',\n  },\n  {\n    situation: '구역 라벨만 빠르게 (lnb, search, 맵 빈칸)',\n    use: 'Shell + StnPageScaffold.Region / MapPlaceholder',\n    export: 'StnPageScaffold.*',\n  },\n  {\n    situation: '대표 HTML 한 장을 1단계로 (alert_center, map)',\n    use: '화면별 레시피 (내부에서 Shell 이미 포함)',\n    export: 'DashboardPageScaffold · AlertCenterPageScaffold',\n  },\n  {\n    situation: 'L3 팝업 본문 자리만 표시',\n    use: 'StnLayer + StnPageScaffold.Layer',\n    export: 'StnPageScaffold.Layer',\n  },\n  {\n    situation: '위젯·테이블 본문이 API 로딩 중',\n    use: 'Components — Loading skeleton (Layout 아님)',\n    export: 'StnLoadingSkeleton',\n  },\n]\n\nexport type StnLayoutScreenKind =\n  | 'list'\n  | 'dashboard-map'\n  | 'alert-center'\n  | 'converged-dashboard'\n  | 'popup-overlay'\n  | 'widget-board'\n  | 'standard'\n\n/** @deprecated StnLayoutScreenKind */\nexport type StnPageScaffoldKind = StnLayoutScreenKind\n\nexport const STN_LAYOUT_SCREEN_RECIPES: readonly {\n  id: StnLayoutScreenKind\n  label: string\n  pubExamples: string\n  reactRecipe: string\n  layoutTab: 'list' | 'dashboard'\n  note: string\n}[] = [\n  {\n    id: 'list',\n    label: '리스트·상세',\n    pubExamples: 'interface_list.html · syslog_status.html',\n    reactRecipe: 'StnLayerShell + StnContainer + StnStack',\n    layoutTab: 'list',\n    note: 'L0 wrap · L1 StnContainer + StnStack',\n  },\n  {\n    id: 'dashboard-map',\n    label: '맵·대시보드',\n    pubExamples: 'basic/map.html · dashboard_map …',\n    reactRecipe: 'DashboardPageScaffold',\n    layoutTab: 'dashboard',\n    note: 'map(z50) · dashboard_left / dashboard_right',\n  },\n  {\n    id: 'alert-center',\n    label: '알림센터',\n    pubExamples: 'basic/alert_center.html',\n    reactRecipe: 'AlertCenterPageScaffold',\n    layoutTab: 'dashboard',\n    note: 'GNB 알림 · 맵 placeholder · 우측 4위젯',\n  },\n  {\n    id: 'converged-dashboard',\n    label: '융합망 대시',\n    pubExamples: 'converged/dashboard_map.html',\n    reactRecipe: 'DashboardPageScaffold (converged_header)',\n    layoutTab: 'dashboard',\n    note: 'wrap-converged',\n  },\n  {\n    id: 'popup-overlay',\n    label: '팝·딤',\n    pubExamples: 'regist_pop.html · widget_dim.html',\n    reactRecipe: 'StnPageScaffold.Layer + StnPopup',\n    layoutTab: 'list',\n    note: 'L3/L4',\n  },\n  {\n    id: 'widget-board',\n    label: '위젯보드',\n    pubExamples: 'widgetboard/widget*.html',\n    reactRecipe: 'StnWidget shell=board',\n    layoutTab: 'dashboard',\n    note: 'board-item',\n  },\n  {\n    id: 'standard',\n    label: '일반 콘텐츠',\n    pubExamples: 'CCTV · node tools …',\n    reactRecipe: 'StnLayerShell + Region',\n    layoutTab: 'list',\n    note: 'head_area · stn-content-area',\n  },\n]\n\n/** @deprecated STN_LAYOUT_SCREEN_RECIPES */\nexport const STN_PAGE_SCAFFOLD_KINDS = STN_LAYOUT_SCREEN_RECIPES\n\nexport const STN_LAYOUT_SLOT_USAGE = `import { StnPageScaffold, StnLayer, StnPopup } from '@stn-uiux/pub-ui-react'\n\n/** Shell children 안 — 구역 라벨 */\n<StnLayerShell gnb={<StnSideNavigation />} contentModifiers={['has_lnb', 'has_sch']} header={…}>\n  <StnPageScaffold.Region label=\"lnb_box\" hint=\"LNB 트리\" />\n  <StnPageScaffold.Region label=\"search_area\" />\n</StnLayerShell>\n\n/** 맵 빈 칸 */\n<StnPageScaffold.MapPlaceholder message=\"맵은 추후 연동\" />\n\n/** 맵 빈 본문 — L0만 보이는 캔버스 (위젯·placeholder 없음) */\n<DashboardPageScaffold bodyEmpty shell=\"layer\" gnb={gnb} layer0={layer0} />\n\n/** L3 팝업 슬롯 */\n<StnLayer level={3} surface=\"transparent\">\n  <StnPageScaffold.Layer level={3} label=\"팝업 본문\">\n    <StnPopup open>…</StnPopup>\n  </StnPageScaffold.Layer>\n</StnLayer>`\n\nexport const STN_LAYOUT_ALERT_CENTER_USAGE = `import { AlertCenterPageScaffold } from '@stn-uiux/pub-ui-react'\n\n<AlertCenterPageScaffold mapMessage=\"맵은 추후 연동\" showFaultPanelPlaceholder />`\n\n/** @deprecated */\nexport const STN_PAGE_SCAFFOLD_COMPOUND_USAGE = STN_LAYOUT_SLOT_USAGE\n\n/** @deprecated */\nexport const STN_ALERT_CENTER_PAGE_SCAFFOLD_USAGE = STN_LAYOUT_ALERT_CENTER_USAGE\n\n/** @deprecated */\nexport const STN_PAGE_SCAFFOLD_INTRO = STN_LAYOUT_INTRO\n\nexport const STN_LAYOUT_RECIPES: readonly {\n  id: 'list' | 'dashboard'\n  label: string\n  screen: string\n  shellProps: string\n  childrenHint: string\n}[] = [\n  {\n    id: 'list',\n    label: '리스트·상세',\n    screen: 'interface_list, syslog_status …',\n    shellProps: 'contentModifiers={[\\'has_lnb\\', \\'has_sch\\']} · header=<StnLayoutHeader>',\n    childrenHint: 'lnb_box · search_area · stn-table (+ StnTable, StnButton)',\n  },\n  {\n    id: 'dashboard',\n    label: '맵·대시보드',\n    screen: 'basic/map.html, dashboard_map …',\n    shellProps: 'bodyWrapper=\"none\" · chrome=\"network_topology_header\"',\n    childrenHint: '.dashboard · .dashboard_left · StnLayoutRegion(region=\"map\")',\n  },\n]\n\n/** Pub `.stn-content-area` modifier */\nexport type StnContentAreaModifier =\n  | 'has_lnb'\n  | 'has_lnb2'\n  | 'has_lnb_right'\n  | 'has_lnb_right2'\n  | 'has_sch'\n  | 'has_sch_row2'\n  | 'flexible'\n\n/** LNB·트리 열 위치 — `has_lnb*` modifier 와 조합 */\nexport type StnLnbSide = 'left' | 'right'\n\n\n\n/** 대시보드·맵 화면 내 고정 슬롯 */\nexport type StnLayoutRegion =\n  | 'top_right'\n  | 'dashboard'\n  | 'dashboard_left'\n  | 'dashboard_right'\n  | 'dashboard_body'\n  | 'wrap_topology'\n  | 'map'\n  | 'dash_canvas'\n\nexport const STN_LAYOUT_PAGE_TREE = `.stn-wrap (legacy v1: #wrap)\n├── .stn-side-nav           (absolute overlay · StnSideNavigation)\n└── .stn-layer-1            (L1 · 네비 제외 영역)\n    ├── .stn-layer-1__header     (Header)\n    └── .stn-content-area / .stn-stack\n        └── .stn-stack …` as const\n\nexport const STN_LAYOUT_LAYER_PAGE_TREE = `.stn-wrap                         (Root Shell · data-stn-layer-mode=\"v2\")\n├── StnLayer.Background           (L0 · layer0-bg)\n├── .stn-side-nav / StnSideNavigation  (absolute overlay · wrap 직속)\n├── [data-stn-layer-role=\"utility\"]  (toast · audio)\n└── StnLayer.Content (.stn-layer-1) (L1 — 하나)\n    ├── .stn-layer-1__header\n    └── .stn-content-area / .stn-stack\n        └── lnb_box | content_box | .stn-stack` as const\n\nexport const STN_LAYOUT_CONTENT_ROWS: {\n  modifier: StnContentAreaModifier\n  pubClass: string\n  label: string\n  note: string\n}[] = [\n  {\n    modifier: 'has_lnb',\n    pubClass: '.stn-content-area.has_lnb',\n    label: 'LNB 1열',\n    note: 'padding-left: 268px · head_area 동기화',\n  },\n  {\n    modifier: 'has_lnb2',\n    pubClass: '.stn-content-area.has_lnb2',\n    label: 'LNB 2열 (좌)',\n    note: 'padding-left: 536px',\n  },\n  {\n    modifier: 'has_lnb_right',\n    pubClass: '.stn-content-area.has_lnb_right',\n    label: 'LNB 1열 (우)',\n    note: 'padding-right: 268px · lnb_box_right',\n  },\n  {\n    modifier: 'has_lnb_right2',\n    pubClass: '.stn-content-area.has_lnb_right2',\n    label: 'LNB 2열 (우)',\n    note: 'padding-right: 536px',\n  },\n  {\n    modifier: 'has_sch',\n    pubClass: '.stn-content-area.has_sch',\n    label: '검색 영역',\n    note: 'flex column · search_area + content_box',\n  },\n  {\n    modifier: 'has_sch_row2',\n    pubClass: '.stn-content-area.has_sch_row2',\n    label: '검색 2줄',\n    note: 'padding-top: 94px',\n  },\n  {\n    modifier: 'flexible',\n    pubClass: '.stn-content-area.flexible',\n    label: '가변 높이 테이블',\n    note: 'stn-table flex fill',\n  },\n]\n\n\nexport const STN_LAYOUT_REGION_ROWS: {\n  region: StnLayoutRegion\n  pubClass: string\n  label: string\n  note: string\n}[] = [\n  { region: 'top_right', pubClass: '.dash-top-right-widget', label: '우상단 위젯', note: '시스템 감시·테마·시계' },\n  { region: 'dashboard', pubClass: '.dashboard', label: '대시보드 루트', note: '맵·위젯 본문' },\n  { region: 'dashboard_left', pubClass: '.dashboard_left', label: '좌측 열', note: '토폴로지·맵' },\n  { region: 'dashboard_right', pubClass: '.dashboard_right', label: '우측 열', note: '장애·위젯 패널' },\n  { region: 'dashboard_body', pubClass: '.dashboard_body', label: '융합망 본문', note: 'converged 레이아웃' },\n  { region: 'wrap_topology', pubClass: '.wrap_topology', label: '토폴로지 래퍼', note: 'stn-elev-map' },\n  { region: 'map', pubClass: '.map', label: '맵 영역', note: '' },\n  { region: 'dash_canvas', pubClass: '.stn-widget.shell-canvas', label: '캔버스', note: '토폴로지/맵 위젯 (variant=\"canvas\")' },\n]\n\nconst CONTENT_CLASS: Record<StnContentAreaModifier, string> = {\n  has_lnb: 'has_lnb',\n  has_lnb2: 'has_lnb2',\n  has_lnb_right: 'has_lnb_right',\n  has_lnb_right2: 'has_lnb_right2',\n  has_sch: 'has_sch',\n  has_sch_row2: 'has_sch_row2',\n  flexible: 'flexible',\n}\n\nconst REGION_CLASS: Record<StnLayoutRegion, string> = {\n  top_right: 'dash-top-right-widget',\n  dashboard: 'dashboard',\n  dashboard_left: 'dashboard_left',\n  dashboard_right: 'dashboard_right',\n  dashboard_body: 'dashboard_body',\n  wrap_topology: 'wrap_topology',\n  map: 'map',\n  dash_canvas: 'stn-widget shell-canvas',\n}\n\nfunction normalizeList<T>(value?: T | T[]): T[] {\n  if (value == null) return []\n  return Array.isArray(value) ? value : [value]\n}\n\nexport function pubContentAreaClasses(\n  modifiers?: StnContentAreaModifier | StnContentAreaModifier[],\n): string[] {\n  return normalizeList(modifiers).map((m) => CONTENT_CLASS[m])\n}\n\nexport function pubLayoutRegionClass(region: StnLayoutRegion): string {\n  return REGION_CLASS[region]\n}\n\n/** `lnbSide` — `has_lnb` / `has_lnb2` 를 좌·우 modifier 로 치환 */\nexport function applyLnbSideToModifiers(\n  modifiers?: StnContentAreaModifier | StnContentAreaModifier[],\n  lnbSide: StnLnbSide = 'left',\n): StnContentAreaModifier[] {\n  const list = normalizeList(modifiers)\n  if (lnbSide === 'left') return list\n  return list.map((m) => {\n    if (m === 'has_lnb') return 'has_lnb_right'\n    if (m === 'has_lnb2') return 'has_lnb_right2'\n    return m\n  })\n}\n\nexport const STN_LAYER_SHELL_USAGE = `import { StnSideNavigation, StnLayerShell } from '@stn-uiux/pub-ui-react'\n\n/** StnLayer role 페이지 셸 — 컨테이너(.stn-container)를 StnLayer.Content 가 겸함 */\nexport function ListPage({ gnb, title, children }) {\n  return (\n    <StnLayerShell\n      gnb={gnb}\n      lnbSide=\"left\"\n      contentModifiers={['has_lnb', 'has_sch']}\n      header={\n        <StnLayoutHeader>\n          <h3 className=\"title\">{title}</h3>\n        </StnLayoutHeader>\n      }\n    >\n      <aside className=\"lnb_box\">…트리·LNB…</aside>\n      <div className=\"content_box\">{children}</div>\n    </StnLayerShell>\n  )\n}\n\n/** 데이터 구조(트리)를 오른쪽에 */\n<StnLayerShell lnbSide=\"right\" contentModifiers={['has_lnb', 'has_sch']} …>\n  <div className=\"content_box\">…</div>\n  <aside className=\"lnb_box_right\">…</aside>\n</StnLayerShell>`\n\nexport const STN_LAYOUT_SHELL_USAGE = `import '@stn-uiux/pub-ui/styles.css'\n\nimport { StnSideNavigation, StnHeader, StnLayerShell, StnStack } from '@stn-uiux/pub-ui-react'\n\n/** interface_list 골격 */\nexport function InterfaceListPage({ gnb, title, children }) {\n  return (\n    <StnLayerShell\n      gnb={gnb}\n      header={\n        <StnHeader variant=\"page\">\n          <StnHeader.Left>\n            <h3 className=\"title\">{title}</h3>\n          </StnHeader.Left>\n        </StnHeader>\n      }\n    >\n      {children}\n    </StnLayerShell>\n  )\n}\n\n/** 대시보드 골격 */\nexport function MapDashboardPage({ gnb, header, children }) {\n  return (\n    <StnLayerShell gnb={gnb} header={header}>\n      <StnStack direction=\"column\">\n        {children}\n      </StnStack>\n    </StnLayerShell>\n  )\n}`\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../src/data/stnLayout.ts"],"sourcesContent":["/**\n * Pub page layout — `.stn-wrap` · `.stn-container` · `.stn-content-area` · 대시보드 region\n * @see layout.css · StnLayerShell (@stn-uiux/pub-ui-react)\n */\n\nexport const STN_LAYOUT_INTRO = ''\n\n/** 라이브 예제 탭 — shell 종류 + 대표 화면 레시피 */\nexport const STN_LAYOUT_PLAYGROUND_TABS: readonly {\n  id: 'list' | 'dashboard' | 'alert-center'\n  label: string\n  screen: string\n  shellProps: string\n  assemble: string\n}[] = [\n  {\n    id: 'list',\n    label: '리스트·상세',\n    screen: 'interface_list.html · syslog_status.html',\n    shellProps: \"contentModifiers={['has_lnb', 'has_sch']}\",\n    assemble: 'StnLayerShell — gnb · header · container(LNB aside + content stack)',\n  },\n  {\n    id: 'dashboard',\n    label: '맵·대시보드',\n    screen: 'basic/map.html · dashboard_map …',\n    shellProps: \"bodyWrapper='none'\",\n    assemble: 'DashboardPageScaffold · MapPlaceholder + dashboard_right',\n  },\n  {\n    id: 'alert-center',\n    label: '알림센터',\n    screen: 'basic/alert_center.html',\n    shellProps: \"bodyWrapper='none' · network_topology_header · GNB 알림패널\",\n    assemble: 'AlertCenterPageScaffold (맵 placeholder + 우측 4위젯)',\n  },\n]\n\nexport const STN_LAYOUT_LIST_VIEW_INTRO =\n  'List view는 배경 · Side Navigation · 페이지 헤더 · 트리 LNB · 검색 · 표로 구성됩니다. StnLayerShell 아래 StnContainer + StnStack으로 레이아웃을 투명하게 조립합니다. Playground에서 옵션을 고른 뒤 생성된 React/HTML 코드를 복사하세요.'\n\n/** 라이브러리 내부 조립 참고 — 제품 화면은 `STN_LAYOUT_LIST_VIEW_USAGE` 참고 */\nexport const STN_LAYOUT_LIST_VIEW_BARE_USAGE = `import {\n  StnLayerShell,\n  StnListViewLayout,\n  StnSideNavigation,\n  StnHeader,\n  StnSearchRequirementBar,\n  StnSectionSide,\n  StnTable,\n} from '@stn-uiux/pub-ui-react'\n\n/** StnLayerShell 안 — L1 listview 그리드만 (이중 L0/L2 없음) */\nexport function InterfaceListPage() {\n  return (\n    <StnLayerShell\n      gnb={<StnSideNavigation collapsed />}\n      header={<StnHeader variant=\"page\" />}\n      contentModifiers={['has_lnb', 'has_sch']}\n      lnbSide=\"left\"\n    >\n      <StnListViewLayout\n        bare\n        sidebar={<StnSectionSide>{/* StnTree */}</StnSectionSide>}\n        search={\n          <StnSearchRequirementBar>{/* Fields · SearchButton */}</StnSearchRequirementBar>\n        }\n      >\n        <StnTable summary=\"목록\" />\n      </StnListViewLayout>\n    </StnLayerShell>\n  )\n}`\n\n/** List view 문서 탭 */\nexport type StnLayoutListLayerTabId = 'live' | 'l0' | 'l1' | 'l2'\n\nexport const STN_LAYOUT_LIST_LAYER_TABS: {\n  id: StnLayoutListLayerTabId\n  label: string\n}[] = [\n  { id: 'live', label: '전체' },\n  { id: 'l0', label: 'L0 Background' },\n  { id: 'l1', label: 'L1 Main UI' },\n  { id: 'l2', label: 'L2 Modal' },\n]\n\nexport const STN_LAYOUT_LIST_VIEW_USAGE = `import {\n  StnLayerShell,\n  StnContainer,\n  StnStack,\n  StnHeader,\n  StnSideNavigation,\n  StnSectionSide,\n  StnTree,\n  StnSearchRequirementBar,\n  StnTable,\n  StnPagination,\n  StnButton,\n} from '@stn-uiux/pub-ui-react'\n\nexport function InterfaceListPage() {\n  return (\n    <StnLayerShell\n      lnbSide=\"left\"\n      gnb={<StnSideNavigation collapsed />}\n      header={<StnHeader variant=\"page\" />}\n    >\n      {/* 2단계: 최상위 본문 컨테이너 */}\n      <StnContainer maxWidth={false}>\n        {/* 3단계: 태블릿/모바일(<1280px)=세로 쌓기 / 데스크톱(lg ≥ 1280px)=가로 2분할 */}\n        <StnStack direction={{ xs: 'column', lg: 'row' }} spacing={2}>\n          {/* [LNB] 모바일: 상단 full-width / 데스크톱: 264px 고정 (StnSectionSide CSS) */}\n          <aside style={{ display: 'flex', flexDirection: 'column' }}>\n            <StnSectionSide fill fullWidth>\n              <StnTree size=\"md\" nodes={treeNodes} />\n            </StnSectionSide>\n          </aside>\n\n          {/* [우측 본문] 검색바 + 표 데이터 그리드 세로 스택 */}\n          <StnStack\n            direction=\"column\"\n            spacing={2}\n            style={{ flex: 1, minWidth: 0, minHeight: 0 }}\n          >\n            <StnSearchRequirementBar>\n              {/* Fields · SearchButton · Export */}\n            </StnSearchRequirementBar>\n\n            <StnTable\n              fill\n              trackVisited\n              summary=\"총 128개 (1 to 20)\"\n              footerCenter={<StnPagination page={1} count={8} />}\n              footerRight={\n                <>\n                  <StnButton size=\"md\" variant=\"contained\">등록</StnButton>\n                  <StnButton size=\"md\" variant=\"ghost\">수정</StnButton>\n                </>\n              }\n            >\n              <StnTable.Grid>{/* StnTable.Head + Body */}</StnTable.Grid>\n            </StnTable>\n          </StnStack>\n        </StnStack>\n      </StnContainer>\n    </StnLayerShell>\n  )\n}`\n\nexport const STN_LAYOUT_MAP_DASHBOARD_INTRO =\n  '대시보드는 L0 배경 · L1(header 크롬 + content 본문 단 하나) · L2 모달입니다. 본문은 `layer1` 슬롯이 아니라 `left`/`right`/`children`으로 조립합니다. `DashboardPageScaffold` (type=\"map\" | \"topology\" | \"widget-grid\").'\n\n/** Map / Dashboard 문서 탭 — List view와 동일 층 모델 */\nexport type StnLayoutMapLayerTabId = StnLayoutListLayerTabId\n\nexport const STN_LAYOUT_MAP_LAYER_TABS: {\n  id: StnLayoutMapLayerTabId\n  label: string\n}[] = [\n  { id: 'live', label: '전체' },\n  { id: 'l0', label: 'L0 Background' },\n  { id: 'l1', label: 'L1 Main UI' },\n  { id: 'l2', label: 'L2 Modal' },\n]\n\nexport const STN_LAYOUT_MAP_DASHBOARD_USAGE = `import { DashboardPageScaffold, StnLayer0Background, StnSideNavigation, StnHeader } from '@stn-uiux/pub-ui-react'\n\nexport function TopologyMapPage() {\n  return (\n    <DashboardPageScaffold\n      type=\"map\"\n      shell=\"layer\"\n      gnbSide=\"left\"\n      layer0={<StnLayer0Background variant=\"map-light\" />}\n      gnb={<StnSideNavigation collapsed />}\n      header={<StnHeader variant=\"dashboard\" />}\n    />\n  )\n}`\n\nexport const STN_LAYOUT_MAP_DASHBOARD_HEADER_USAGE = `import {\n  DashboardPageScaffold,\n  StnHeader,\n  StnSideNavigation,\n} from '@stn-uiux/pub-ui-react'\n\nexport function TopologyMapPage() {\n  return (\n    <DashboardPageScaffold\n      type=\"topology\"\n      shell=\"layer\"\n      gnb={<StnSideNavigation collapsed />}\n      header={<StnHeader variant=\"widget\" />}\n      mapMessage=\"토폴로지 맵\"\n    />\n  )\n}`\n\n/** 경우의 수 — 무엇을 쓸지 */\nexport const STN_LAYOUT_WHEN_TO_USE: readonly {\n  situation: string\n  use: string\n  export: string\n}[] = [\n  {\n    situation: '표준 3단계 층위 기반 페이지 구성',\n    use: 'StnLayerShell — L0 Background · L1 Main UI · L2 Modal',\n    export: 'StnLayerShell · lnbSide left|right',\n  },\n  {\n    situation: '구역 라벨만 빠르게 (lnb, search, 맵 빈칸)',\n    use: 'Shell + StnPageScaffold.Region / MapPlaceholder',\n    export: 'StnPageScaffold.*',\n  },\n  {\n    situation: '대표 HTML 한 장을 1단계로 (alert_center, map)',\n    use: '화면별 레시피 (내부에서 Shell 이미 포함)',\n    export: 'DashboardPageScaffold · AlertCenterPageScaffold',\n  },\n  {\n    situation: 'L3 팝업 본문 자리만 표시',\n    use: 'StnLayer + StnPageScaffold.Layer',\n    export: 'StnPageScaffold.Layer',\n  },\n  {\n    situation: '위젯·테이블 본문이 API 로딩 중',\n    use: 'Components — Loading skeleton (Layout 아님)',\n    export: 'StnLoadingSkeleton',\n  },\n]\n\nexport type StnLayoutScreenKind =\n  | 'list'\n  | 'dashboard-map'\n  | 'alert-center'\n  | 'converged-dashboard'\n  | 'popup-overlay'\n  | 'widget-board'\n  | 'standard'\n\n/** @deprecated StnLayoutScreenKind */\nexport type StnPageScaffoldKind = StnLayoutScreenKind\n\nexport const STN_LAYOUT_SCREEN_RECIPES: readonly {\n  id: StnLayoutScreenKind\n  label: string\n  pubExamples: string\n  reactRecipe: string\n  layoutTab: 'list' | 'dashboard'\n  note: string\n}[] = [\n  {\n    id: 'list',\n    label: '리스트·상세',\n    pubExamples: 'interface_list.html · syslog_status.html',\n    reactRecipe: 'StnLayerShell + StnContainer + StnStack',\n    layoutTab: 'list',\n    note: 'L0 wrap · L1 StnContainer + StnStack',\n  },\n  {\n    id: 'dashboard-map',\n    label: '맵·대시보드',\n    pubExamples: 'basic/map.html · dashboard_map …',\n    reactRecipe: 'DashboardPageScaffold',\n    layoutTab: 'dashboard',\n    note: 'map(z50) · dashboard_left / dashboard_right',\n  },\n  {\n    id: 'alert-center',\n    label: '알림센터',\n    pubExamples: 'basic/alert_center.html',\n    reactRecipe: 'AlertCenterPageScaffold',\n    layoutTab: 'dashboard',\n    note: 'GNB 알림 · 맵 placeholder · 우측 4위젯',\n  },\n  {\n    id: 'converged-dashboard',\n    label: '융합망 대시',\n    pubExamples: 'converged/dashboard_map.html',\n    reactRecipe: 'DashboardPageScaffold (converged_header)',\n    layoutTab: 'dashboard',\n    note: 'wrap-converged',\n  },\n  {\n    id: 'popup-overlay',\n    label: '팝·딤',\n    pubExamples: 'regist_pop.html · widget_dim.html',\n    reactRecipe: 'StnPageScaffold.Layer + StnPopup',\n    layoutTab: 'list',\n    note: 'L3/L4',\n  },\n  {\n    id: 'widget-board',\n    label: '위젯보드',\n    pubExamples: 'widgetboard/widget*.html',\n    reactRecipe: 'StnWidget shell=board',\n    layoutTab: 'dashboard',\n    note: 'board-item',\n  },\n  {\n    id: 'standard',\n    label: '일반 콘텐츠',\n    pubExamples: 'CCTV · node tools …',\n    reactRecipe: 'StnLayerShell + Region',\n    layoutTab: 'list',\n    note: 'head_area · stn-content-area',\n  },\n]\n\n/** @deprecated STN_LAYOUT_SCREEN_RECIPES */\nexport const STN_PAGE_SCAFFOLD_KINDS = STN_LAYOUT_SCREEN_RECIPES\n\nexport const STN_LAYOUT_SLOT_USAGE = `import { StnPageScaffold, StnLayer, StnPopup } from '@stn-uiux/pub-ui-react'\n\n/** Shell children 안 — 구역 라벨 */\n<StnLayerShell gnb={<StnSideNavigation />} contentModifiers={['has_lnb', 'has_sch']} header={…}>\n  <StnPageScaffold.Region label=\"lnb_box\" hint=\"LNB 트리\" />\n  <StnPageScaffold.Region label=\"search_area\" />\n</StnLayerShell>\n\n/** 맵 빈 칸 */\n<StnPageScaffold.MapPlaceholder message=\"맵은 추후 연동\" />\n\n/** 맵 빈 본문 — L0만 보이는 캔버스 (위젯·placeholder 없음) */\n<DashboardPageScaffold bodyEmpty shell=\"layer\" gnb={gnb} layer0={layer0} />\n\n/** L3 팝업 슬롯 */\n<StnLayer level={3} surface=\"transparent\">\n  <StnPageScaffold.Layer level={3} label=\"팝업 본문\">\n    <StnPopup open>…</StnPopup>\n  </StnPageScaffold.Layer>\n</StnLayer>`\n\nexport const STN_LAYOUT_ALERT_CENTER_USAGE = `import { AlertCenterPageScaffold } from '@stn-uiux/pub-ui-react'\n\n<AlertCenterPageScaffold mapMessage=\"맵은 추후 연동\" showFaultPanelPlaceholder />`\n\n/** @deprecated */\nexport const STN_PAGE_SCAFFOLD_COMPOUND_USAGE = STN_LAYOUT_SLOT_USAGE\n\n/** @deprecated */\nexport const STN_ALERT_CENTER_PAGE_SCAFFOLD_USAGE = STN_LAYOUT_ALERT_CENTER_USAGE\n\n/** @deprecated */\nexport const STN_PAGE_SCAFFOLD_INTRO = STN_LAYOUT_INTRO\n\nexport const STN_LAYOUT_RECIPES: readonly {\n  id: 'list' | 'dashboard'\n  label: string\n  screen: string\n  shellProps: string\n  childrenHint: string\n}[] = [\n  {\n    id: 'list',\n    label: '리스트·상세',\n    screen: 'interface_list, syslog_status …',\n    shellProps: 'contentModifiers={[\\'has_lnb\\', \\'has_sch\\']} · header=<StnLayoutHeader>',\n    childrenHint: 'lnb_box · search_area · stn-table (+ StnTable, StnButton)',\n  },\n  {\n    id: 'dashboard',\n    label: '맵·대시보드',\n    screen: 'basic/map.html, dashboard_map …',\n    shellProps: 'bodyWrapper=\"none\" · chrome=\"network_topology_header\"',\n    childrenHint: '.dashboard · .dashboard_left · StnLayoutRegion(region=\"map\")',\n  },\n]\n\n/** Pub `.stn-content-area` modifier */\nexport type StnContentAreaModifier =\n  | 'has_lnb'\n  | 'has_lnb2'\n  | 'has_lnb_right'\n  | 'has_lnb_right2'\n  | 'has_sch'\n  | 'has_sch_row2'\n  | 'flexible'\n\n/** LNB·트리 열 위치 — `has_lnb*` modifier 와 조합 */\nexport type StnLnbSide = 'left' | 'right'\n\n\n\n/** 대시보드·맵 화면 내 고정 슬롯 */\nexport type StnLayoutRegion =\n  | 'top_right'\n  | 'dashboard'\n  | 'dashboard_left'\n  | 'dashboard_right'\n  | 'dashboard_body'\n  | 'wrap_topology'\n  | 'map'\n  | 'dash_canvas'\n\nexport const STN_LAYOUT_PAGE_TREE = `.stn-wrap (legacy v1: #wrap)\n├── .stn-side-nav           (absolute overlay · StnSideNavigation)\n└── .stn-layer-1            (L1 · 네비 제외 영역)\n    ├── .stn-layer-1__header     (Header)\n    └── .stn-content-area / .stn-stack\n        └── .stn-stack …` as const\n\nexport const STN_LAYOUT_LAYER_PAGE_TREE = `.stn-wrap                         (Root Shell)\n├── StnLayer.Background           (L0 · layer0-bg)\n├── .stn-side-nav / StnSideNavigation  (absolute overlay · wrap 직속)\n├── [data-stn-layer-role=\"utility\"]  (toast · audio)\n└── StnLayer.Content (.stn-layer-1) (L1 — 하나)\n    ├── .stn-layer-1__header\n    └── .stn-content-area / .stn-stack\n        └── lnb_box | content_box | .stn-stack` as const\n\nexport const STN_LAYOUT_CONTENT_ROWS: {\n  modifier: StnContentAreaModifier\n  pubClass: string\n  label: string\n  note: string\n}[] = [\n  {\n    modifier: 'has_lnb',\n    pubClass: '.stn-content-area.has_lnb',\n    label: 'LNB 1열',\n    note: 'padding-left: 268px · head_area 동기화',\n  },\n  {\n    modifier: 'has_lnb2',\n    pubClass: '.stn-content-area.has_lnb2',\n    label: 'LNB 2열 (좌)',\n    note: 'padding-left: 536px',\n  },\n  {\n    modifier: 'has_lnb_right',\n    pubClass: '.stn-content-area.has_lnb_right',\n    label: 'LNB 1열 (우)',\n    note: 'padding-right: 268px · lnb_box_right',\n  },\n  {\n    modifier: 'has_lnb_right2',\n    pubClass: '.stn-content-area.has_lnb_right2',\n    label: 'LNB 2열 (우)',\n    note: 'padding-right: 536px',\n  },\n  {\n    modifier: 'has_sch',\n    pubClass: '.stn-content-area.has_sch',\n    label: '검색 영역',\n    note: 'flex column · search_area + content_box',\n  },\n  {\n    modifier: 'has_sch_row2',\n    pubClass: '.stn-content-area.has_sch_row2',\n    label: '검색 2줄',\n    note: 'padding-top: 94px',\n  },\n  {\n    modifier: 'flexible',\n    pubClass: '.stn-content-area.flexible',\n    label: '가변 높이 테이블',\n    note: 'stn-table flex fill',\n  },\n]\n\n\nexport const STN_LAYOUT_REGION_ROWS: {\n  region: StnLayoutRegion\n  pubClass: string\n  label: string\n  note: string\n}[] = [\n  { region: 'top_right', pubClass: '.dash-top-right-widget', label: '우상단 위젯', note: '시스템 감시·테마·시계' },\n  { region: 'dashboard', pubClass: '.dashboard', label: '대시보드 루트', note: '맵·위젯 본문' },\n  { region: 'dashboard_left', pubClass: '.dashboard_left', label: '좌측 열', note: '토폴로지·맵' },\n  { region: 'dashboard_right', pubClass: '.dashboard_right', label: '우측 열', note: '장애·위젯 패널' },\n  { region: 'dashboard_body', pubClass: '.dashboard_body', label: '융합망 본문', note: 'converged 레이아웃' },\n  { region: 'wrap_topology', pubClass: '.wrap_topology', label: '토폴로지 래퍼', note: 'stn-elev-map' },\n  { region: 'map', pubClass: '.map', label: '맵 영역', note: '' },\n  { region: 'dash_canvas', pubClass: '.stn-widget.shell-canvas', label: '캔버스', note: '토폴로지/맵 위젯 (variant=\"canvas\")' },\n]\n\nconst CONTENT_CLASS: Record<StnContentAreaModifier, string> = {\n  has_lnb: 'has_lnb',\n  has_lnb2: 'has_lnb2',\n  has_lnb_right: 'has_lnb_right',\n  has_lnb_right2: 'has_lnb_right2',\n  has_sch: 'has_sch',\n  has_sch_row2: 'has_sch_row2',\n  flexible: 'flexible',\n}\n\nconst REGION_CLASS: Record<StnLayoutRegion, string> = {\n  top_right: 'dash-top-right-widget',\n  dashboard: 'dashboard',\n  dashboard_left: 'dashboard_left',\n  dashboard_right: 'dashboard_right',\n  dashboard_body: 'dashboard_body',\n  wrap_topology: 'wrap_topology',\n  map: 'map',\n  dash_canvas: 'stn-widget shell-canvas',\n}\n\nfunction normalizeList<T>(value?: T | T[]): T[] {\n  if (value == null) return []\n  return Array.isArray(value) ? value : [value]\n}\n\nexport function pubContentAreaClasses(\n  modifiers?: StnContentAreaModifier | StnContentAreaModifier[],\n): string[] {\n  return normalizeList(modifiers).map((m) => CONTENT_CLASS[m])\n}\n\nexport function pubLayoutRegionClass(region: StnLayoutRegion): string {\n  return REGION_CLASS[region]\n}\n\n/** `lnbSide` — `has_lnb` / `has_lnb2` 를 좌·우 modifier 로 치환 */\nexport function applyLnbSideToModifiers(\n  modifiers?: StnContentAreaModifier | StnContentAreaModifier[],\n  lnbSide: StnLnbSide = 'left',\n): StnContentAreaModifier[] {\n  const list = normalizeList(modifiers)\n  if (lnbSide === 'left') return list\n  return list.map((m) => {\n    if (m === 'has_lnb') return 'has_lnb_right'\n    if (m === 'has_lnb2') return 'has_lnb_right2'\n    return m\n  })\n}\n\nexport const STN_LAYER_SHELL_USAGE = `import { StnSideNavigation, StnLayerShell } from '@stn-uiux/pub-ui-react'\n\n/** StnLayer role 페이지 셸 — 컨테이너(.stn-container)를 StnLayer.Content 가 겸함 */\nexport function ListPage({ gnb, title, children }) {\n  return (\n    <StnLayerShell\n      gnb={gnb}\n      lnbSide=\"left\"\n      contentModifiers={['has_lnb', 'has_sch']}\n      header={\n        <StnLayoutHeader>\n          <h3 className=\"title\">{title}</h3>\n        </StnLayoutHeader>\n      }\n    >\n      <aside className=\"lnb_box\">…트리·LNB…</aside>\n      <div className=\"content_box\">{children}</div>\n    </StnLayerShell>\n  )\n}\n\n/** 데이터 구조(트리)를 오른쪽에 */\n<StnLayerShell lnbSide=\"right\" contentModifiers={['has_lnb', 'has_sch']} …>\n  <div className=\"content_box\">…</div>\n  <aside className=\"lnb_box_right\">…</aside>\n</StnLayerShell>`\n\nexport const STN_LAYOUT_SHELL_USAGE = `import '@stn-uiux/pub-ui/styles.css'\n\nimport { StnSideNavigation, StnHeader, StnLayerShell, StnStack } from '@stn-uiux/pub-ui-react'\n\n/** interface_list 골격 */\nexport function InterfaceListPage({ gnb, title, children }) {\n  return (\n    <StnLayerShell\n      gnb={gnb}\n      header={\n        <StnHeader variant=\"page\">\n          <StnHeader.Left>\n            <h3 className=\"title\">{title}</h3>\n          </StnHeader.Left>\n        </StnHeader>\n      }\n    >\n      {children}\n    </StnLayerShell>\n  )\n}\n\n/** 대시보드 골격 */\nexport function MapDashboardPage({ gnb, header, children }) {\n  return (\n    <StnLayerShell gnb={gnb} header={header}>\n      <StnStack direction=\"column\">\n        {children}\n      </StnStack>\n    </StnLayerShell>\n  )\n}`\n"],"mappings":"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","names":[]}

package/dist/{chunk-VC72NQIU.js → chunk-EKPLU5KT.js}

@@ -6,11 +6,11 @@ var STN_TYPE_SCALE_ROWS = [
     category: "Display",
     name: "Display 1",
     weights: "Medium, Bold",
-    sizePx: 60,
-    sizeRem: "4rem",
+    sizePx: 52,
+    sizeRem: "3.25rem",
     lineHeight: "130%",
     role: "\uCD5C\uC0C1\uC704 \uD5E4\uB4DC\uB77C\uC778 (PC\uAD8C\uC7A5)",
-    pubSizeToken: "pub.font-size.60",
+    pubSizeToken: "pub.font-size.52",
     semanticToken: "pub.text.display.xlarge"
   },
   {
@@ -18,11 +18,11 @@ var STN_TYPE_SCALE_ROWS = [
     category: "Display",
     name: "Display 2",
     weights: "Medium, Bold",
-    sizePx: 40,
-    sizeRem: "2.67rem",
+    sizePx: 44,
+    sizeRem: "2.75rem",
     lineHeight: "130%",
     role: "\uBA54\uC778 \uD0C0\uC774\uD2C0 (PC \uAD8C\uC7A5)",
-    pubSizeToken: "pub.font-size.40",
+    pubSizeToken: "pub.font-size.44",
     semanticToken: "pub.text.display.large"
   },
   {
@@ -30,11 +30,11 @@ var STN_TYPE_SCALE_ROWS = [
     category: "Display",
     name: "Display 3",
     weights: "Medium, Bold",
-    sizePx: 36,
-    sizeRem: "2.4rem",
+    sizePx: 40,
+    sizeRem: "2.5rem",
     lineHeight: "148%",
     role: "\uAC15\uC870\uD615 \uD5E4\uB4DC\uB77C\uC778",
-    pubSizeToken: "pub.font-size.36",
+    pubSizeToken: "pub.font-size.40",
     semanticToken: "pub.text.display.medium"
   },
   {
@@ -137,6 +137,7 @@ var STN_TYPE_SCALE_ROWS = [
     lineHeight: "148% / 158%",
     role: "\uBCF8\uBB38 \uD14D\uC2A4\uD2B8",
     pubSizeToken: "pub.font-size.15",
+    semanticToken: "pub.text.body.medium-large",
     pubHtmlExample: "dashboard_map \xB7 GNB 1Depth \xB7 \uD14C\uC774\uBE14 \uD5E4\uB354"
   },
   {
@@ -253,6 +254,27 @@ var STN_TYPE_SCALE_ROWS = [
     pubHtmlExample: "dashboard_map \xB7 node_icon \uB77C\uBCA8 \xB7 gnb_alert \uD0DC\uADF8"
   }
 ];
+var STN_TYPE_SCALE_CLASS = {
+  "display-1": { className: "stn-text-display-1", variant: "display-1" },
+  "display-2": { className: "stn-text-display-2", variant: "display-2" },
+  "display-3": { className: "stn-text-display-3", variant: "display-3" },
+  "heading-1": { className: "stn-text-heading-1", variant: "heading-1" },
+  "heading-2": { className: "stn-text-heading-2", variant: "heading-2" },
+  "heading-3": { className: "stn-text-heading-3", variant: "heading-3" },
+  "title-1": { className: "stn-text-title-1", variant: "title-1" },
+  "title-2": { className: "stn-text-title-2", variant: "title-2" },
+  "title-3": { className: "stn-text-title-3", variant: "title-3" },
+  "body-1": { className: "stn-text-body-1", variant: "body-1" },
+  "body-2": { className: "stn-text-body-2", variant: "body-2" },
+  "body-3": { className: "stn-text-body-3", variant: "body-3" },
+  "body-small": { className: "stn-text-body-small", variant: "body-small" },
+  "label-1": { className: "stn-text-label-1", variant: "label-1" },
+  "label-2": { className: "stn-text-label-2", variant: "label-2" },
+  "label-3": { className: "stn-text-label-3", variant: "label-3" },
+  "label-4": { className: "stn-text-label-4", variant: "label-4" },
+  "caption-large": { className: "stn-text-caption-large", variant: "caption-large" },
+  caption: { className: "stn-text-caption", variant: "caption" }
+};
 var WEIGHT_LABEL = {
   300: "Regular",
   500: "Medium",
@@ -273,7 +295,8 @@ function typeScalePill(scaleName, sizePx, weight) {
 export {
   STN_TYPE_SCALE_INTRO,
   STN_TYPE_SCALE_ROWS,
+  STN_TYPE_SCALE_CLASS,
   resolveTypeScaleName,
   typeScalePill
 };
-//# sourceMappingURL=chunk-VC72NQIU.js.map
+//# sourceMappingURL=chunk-EKPLU5KT.js.map

package/dist/chunk-EKPLU5KT.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/data/stnTypeScale.ts"],"sourcesContent":["/**\n * Figma Type Scale — Display / Heading / Title / Body / Label / Caption\n * Pub HTML은 primitive(font-size·weight)로 조합하며, semantic samples는 일부만 시연합니다.\n */\n\nexport type StnTypeScaleCategory =\n  | 'Display'\n  | 'Heading'\n  | 'Title'\n  | 'Body'\n  | 'Label'\n  | 'Caption'\n  | 'Pub extension'\n\nexport type StnTypeScaleRow = {\n  id: string\n  category: StnTypeScaleCategory\n  name: string\n  weights: string\n  sizePx: number\n  sizeRem: string\n  lineHeight: string\n  role: string\n  pubSizeToken: string\n  /** Tokens 탭 semantic (있으면) */\n  semanticToken?: string\n  /** dashboard_map.html 등 실제 화면 예 (있을 때만) */\n  pubHtmlExample?: string\n}\n\nexport const STN_TYPE_SCALE_INTRO =\n  'Display, Heading, Title, Body, Label, Caption으로 정의한 6단계 위계에 맞게 조합하여 사용합니다.'\n\nexport const STN_TYPE_SCALE_ROWS: StnTypeScaleRow[] = [\n  {\n    id: 'display-1',\n    category: 'Display',\n    name: 'Display 1',\n    weights: 'Medium, Bold',\n    sizePx: 52,\n    sizeRem: '3.25rem',\n    lineHeight: '130%',\n    role: '최상위 헤드라인 (PC권장)',\n    pubSizeToken: 'pub.font-size.52',\n    semanticToken: 'pub.text.display.xlarge',\n  },\n  {\n    id: 'display-2',\n    category: 'Display',\n    name: 'Display 2',\n    weights: 'Medium, Bold',\n    sizePx: 44,\n    sizeRem: '2.75rem',\n    lineHeight: '130%',\n    role: '메인 타이틀 (PC 권장)',\n    pubSizeToken: 'pub.font-size.44',\n    semanticToken: 'pub.text.display.large',\n  },\n  {\n    id: 'display-3',\n    category: 'Display',\n    name: 'Display 3',\n    weights: 'Medium, Bold',\n    sizePx: 40,\n    sizeRem: '2.5rem',\n    lineHeight: '148%',\n    role: '강조형 헤드라인',\n    pubSizeToken: 'pub.font-size.40',\n    semanticToken: 'pub.text.display.medium',\n  },\n  {\n    id: 'heading-1',\n    category: 'Heading',\n    name: 'Heading 1',\n    weights: 'Medium, Bold',\n    sizePx: 32,\n    sizeRem: '2.133rem',\n    lineHeight: '148%',\n    role: '페이지 상위 제목',\n    pubSizeToken: 'pub.font-size.32',\n    semanticToken: 'pub.text.heading.large',\n    pubHtmlExample: 'dashboard_map · converged-header 페이지명',\n  },\n  {\n    id: 'heading-2',\n    category: 'Heading',\n    name: 'Heading 2',\n    weights: 'Medium, Bold',\n    sizePx: 24,\n    sizeRem: '1.6rem',\n    lineHeight: '148%',\n    role: '하위 제목',\n    pubSizeToken: 'pub.font-size.24',\n    semanticToken: 'pub.text.heading.medium',\n    pubHtmlExample: 'dashboard_map · 장애 등급 수치(24px Bold)',\n  },\n  {\n    id: 'heading-3',\n    category: 'Heading',\n    name: 'Heading 3',\n    weights: 'Medium, Bold',\n    sizePx: 22,\n    sizeRem: '1.47rem',\n    lineHeight: '148%',\n    role: '소제목, 그룹 제목',\n    pubSizeToken: 'pub.font-size.22',\n    semanticToken: 'pub.text.heading.small',\n  },\n  {\n    id: 'title-1',\n    category: 'Title',\n    name: 'Title 1',\n    weights: 'Medium, Bold',\n    sizePx: 20,\n    sizeRem: '1.33rem',\n    lineHeight: '148%',\n    role: '콘텐츠 타이틀',\n    pubSizeToken: 'pub.font-size.20',\n    semanticToken: 'pub.text.title.large',\n    pubHtmlExample: 'dashboard_map · 헤더 시계(#time)',\n  },\n  {\n    id: 'title-2',\n    category: 'Title',\n    name: 'Title 2',\n    weights: 'Medium, Semibold, Bold',\n    sizePx: 18,\n    sizeRem: '1.2rem',\n    lineHeight: '148%',\n    role: '서브 페이지 제목',\n    pubSizeToken: 'pub.font-size.18',\n    semanticToken: 'pub.text.title.medium',\n    pubHtmlExample: 'alert_center · 모달 타이틀「알림센터」',\n  },\n  {\n    id: 'title-3',\n    category: 'Title',\n    name: 'Title 3',\n    weights: 'Medium',\n    sizePx: 16,\n    sizeRem: '1.07rem',\n    lineHeight: '148%',\n    role: '서브 타이틀 · 헤더',\n    pubSizeToken: 'pub.font-size.16',\n    semanticToken: 'pub.text.title.small',\n    pubHtmlExample: 'stn-header · stn-widget 헤더',\n  },\n  {\n    id: 'body-1',\n    category: 'Body',\n    name: 'Body 1',\n    weights: 'Regular, Medium, Semibold, Bold',\n    sizePx: 16,\n    sizeRem: '1.07rem',\n    lineHeight: '148% / 170%',\n    role: '본문 텍스트 (PC 권장)',\n    pubSizeToken: 'pub.font-size.16',\n    semanticToken: 'pub.text.body.large',\n    pubHtmlExample: 'dashboard_map · fault_table 본문 셀',\n  },\n  {\n    id: 'body-2',\n    category: 'Body',\n    name: 'Body 2',\n    weights: 'Regular, Medium, Semibold, Bold',\n    sizePx: 15,\n    sizeRem: '1rem',\n    lineHeight: '148% / 158%',\n    role: '본문 텍스트',\n    pubSizeToken: 'pub.font-size.15',\n    semanticToken: 'pub.text.body.medium-large',\n    pubHtmlExample: 'dashboard_map · GNB 1Depth · 테이블 헤더',\n  },\n  {\n    id: 'body-3',\n    category: 'Body',\n    name: 'Body 3',\n    weights: 'Regular, Medium, Semibold, Bold',\n    sizePx: 14,\n    sizeRem: '0.933rem',\n    lineHeight: '148% / 158%',\n    role: '본문 소형 텍스트',\n    pubSizeToken: 'pub.font-size.14',\n    semanticToken: 'pub.text.body.medium',\n    pubHtmlExample: 'Pub reset 기본 · 위젯 타이틀·GNB 하단·헤더 날짜',\n  },\n  {\n    id: 'body-small',\n    category: 'Body',\n    name: 'Body Small',\n    weights: 'Regular',\n    sizePx: 13,\n    sizeRem: '0.87rem',\n    lineHeight: '148%',\n    role: '본문 소형 · 입력·드롭다운·테이블',\n    pubSizeToken: 'pub.font-size.13',\n    semanticToken: 'pub.text.body.small',\n    pubHtmlExample: 'stn-table · stn-dropdown · stn-text-field · stn-btn(sm)',\n  },\n  {\n    id: 'label-1',\n    category: 'Label',\n    name: 'Label 1',\n    weights: 'Medium',\n    sizePx: 17,\n    sizeRem: '1.133rem',\n    lineHeight: '148%',\n    role: '버튼 라벨 (PC 권장)',\n    pubSizeToken: 'pub.font-size.17',\n    semanticToken: 'pub.text.label.large',\n  },\n  {\n    id: 'label-2',\n    category: 'Label',\n    name: 'Label 2',\n    weights: 'SemiBold',\n    sizePx: 15,\n    sizeRem: '1rem',\n    lineHeight: '148%',\n    role: '버튼, 입력 폼',\n    pubSizeToken: 'pub.font-size.15',\n    semanticToken: 'pub.text.label.medium',\n  },\n  {\n    id: 'label-3',\n    category: 'Label',\n    name: 'Label 3',\n    weights: 'Medium, Semibold',\n    sizePx: 13,\n    sizeRem: '0.87rem',\n    lineHeight: '148%',\n    role: '입력 레이블',\n    pubSizeToken: 'pub.font-size.13',\n    semanticToken: 'pub.text.label.small',\n    pubHtmlExample: 'dashboard_map · GNB 2Depth · 장애 요약',\n  },\n  {\n    id: 'label-4',\n    category: 'Label',\n    name: 'Label 4',\n    weights: 'Medium, Semibold, Bold',\n    sizePx: 10,\n    sizeRem: '0.625rem',\n    lineHeight: 'Auto',\n    role: '바텀 아이콘 레이블',\n    pubSizeToken: 'pub.font-size.10',\n    semanticToken: 'pub.text.label.xsmall',\n  },\n  {\n    id: 'caption-large',\n    category: 'Caption',\n    name: 'Caption Large',\n    weights: 'Regular',\n    sizePx: 14,\n    sizeRem: '0.933rem',\n    lineHeight: '130%',\n    role: '캡션 대형 · 로그인 카드 서브캡션',\n    pubSizeToken: 'pub.font-size.14',\n    semanticToken: 'pub.text.caption.large',\n    pubHtmlExample: 'stn-login-card 서브캡션',\n  },\n  {\n    id: 'caption',\n    category: 'Caption',\n    name: 'Caption',\n    weights: 'Medium, SemiBold',\n    sizePx: 12,\n    sizeRem: '0.8rem',\n    lineHeight: '148%',\n    role: '툴팁, 보조 설명',\n    pubSizeToken: 'pub.font-size.12',\n    semanticToken: 'pub.text.caption.medium',\n    pubHtmlExample: 'alert_center 목록 · dashboard_map 등급 라벨·위젯 소제목',\n  },\n  {\n    id: 'pub-11',\n    category: 'Pub extension',\n    name: '11px (Pub)',\n    weights: 'Bold',\n    sizePx: 11,\n    sizeRem: '0.73rem',\n    lineHeight: '148%',\n    role: '지도 노드·알림 등급 태그 등 Pub 전용',\n    pubSizeToken: 'pub.font-size.11',\n    pubHtmlExample: 'dashboard_map · node_icon 라벨 · gnb_alert 태그',\n  },\n]\n\n/** Type Scale id → 유틸리티 클래스 (styles/foundations/stn-typography.css) · StnText variant */\nexport const STN_TYPE_SCALE_CLASS: Record<string, { className: string; variant: string }> = {\n  'display-1': { className: 'stn-text-display-1', variant: 'display-1' },\n  'display-2': { className: 'stn-text-display-2', variant: 'display-2' },\n  'display-3': { className: 'stn-text-display-3', variant: 'display-3' },\n  'heading-1': { className: 'stn-text-heading-1', variant: 'heading-1' },\n  'heading-2': { className: 'stn-text-heading-2', variant: 'heading-2' },\n  'heading-3': { className: 'stn-text-heading-3', variant: 'heading-3' },\n  'title-1': { className: 'stn-text-title-1', variant: 'title-1' },\n  'title-2': { className: 'stn-text-title-2', variant: 'title-2' },\n  'title-3': { className: 'stn-text-title-3', variant: 'title-3' },\n  'body-1': { className: 'stn-text-body-1', variant: 'body-1' },\n  'body-2': { className: 'stn-text-body-2', variant: 'body-2' },\n  'body-3': { className: 'stn-text-body-3', variant: 'body-3' },\n  'body-small': { className: 'stn-text-body-small', variant: 'body-small' },\n  'label-1': { className: 'stn-text-label-1', variant: 'label-1' },\n  'label-2': { className: 'stn-text-label-2', variant: 'label-2' },\n  'label-3': { className: 'stn-text-label-3', variant: 'label-3' },\n  'label-4': { className: 'stn-text-label-4', variant: 'label-4' },\n  'caption-large': { className: 'stn-text-caption-large', variant: 'caption-large' },\n  caption: { className: 'stn-text-caption', variant: 'caption' },\n}\n\nconst WEIGHT_LABEL: Record<number, string> = {\n  300: 'Regular',\n  500: 'Medium',\n  700: 'Bold',\n}\n\n/** px(+weight) → Type Scale 이름 (가장 가까운 스케일) */\nexport function resolveTypeScaleName(sizePx: number, weight = 400): {\n  scale: string\n  weightLabel: string\n  pill: string\n} {\n  const w = weight >= 600 ? 700 : weight >= 500 ? 500 : 300\n  const weightLabel = WEIGHT_LABEL[w] ?? `${weight}`\n  const row =\n    STN_TYPE_SCALE_ROWS.find((r) => r.sizePx === sizePx) ??\n    STN_TYPE_SCALE_ROWS.find((r) => Math.abs(r.sizePx - sizePx) <= 1)\n  const scale = row?.name ?? `${sizePx}px`\n  const pill = `${scale} (${sizePx}, ${w})`\n  return { scale, weightLabel, pill }\n}\n\n/** dashboard_map Use case — Type Scale 기준 라벨 */\nexport function typeScalePill(\n  scaleName: string,\n  sizePx: number,\n  weight: number,\n): string {\n  return `${scaleName} (${sizePx}, ${weight})`\n}\n"],"mappings":"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","names":[]}

package/dist/{chunk-75GHU6VI.js → chunk-G4SOYIHZ.js}

@@ -22,9 +22,13 @@ var STN_POPUP_USAGE_HTML = `${STN_POPUP_STACK_HTML.replace("    <!-- .stn-pop \u
       <div class="stn-pop__cont">
         <div class="stn-pop__panel">
           <div class="stn-pop__head">
-            <h4>\uC81C\uBAA9</h4>
+            <div class="stn-pop__head-start">
+              <h4>\uC81C\uBAA9</h4>
+            </div>
+            <button type="button" class="stn-btn stn-btn--ghost stn-btn--sm" aria-label="\uB2EB\uAE30">
+              <span class="stn-btn__icon"></span>
+            </button>
           </div>
-          <button type="button" class="stn-pop__close" aria-label="\uB2EB\uAE30"></button>
           <div class="stn-pop__body"><!-- \uBCF8\uBB38 --></div>
           <div class="stn-pop__actions"><!-- StnButton primary \xB7 secondary --></div>
         </div>
@@ -139,8 +143,8 @@ var STN_POPUP_PARTS = [
   },
   {
     part: "Close",
-    selector: ".stn-pop__close",
-    note: 'StnButton icon="line/x" size=sm \xB7 top 14 / right 16'
+    selector: "StnButton (line/x)",
+    note: 'StnButton icon="line/x" size=sm (24px) \xB7 \uD5E4\uB354 Flex \uC6B0\uCE21'
   },
   { part: "Body", selector: ".stn-pop__body", note: "padding 20px \xB7 overflow auto \xB7 \uD654\uBA74\uBCC4 \uC2AC\uB86F" },
   {
@@ -160,8 +164,8 @@ var STN_POPUP_TOKEN_ROWS = [
   { token: "--stn-pop-max-height", resolvesTo: "min(85dvh, \u2026)", usage: ".stn-pop \uBCF8\uBB38 \uC2A4\uD06C\uB864" },
   { token: "--stn-pop-header-height", resolvesTo: "56px", usage: ".stn-pop__head min-height" },
   { token: "--stn-pop-footer-height", resolvesTo: "56px", usage: ".stn-pop__actions" },
-  { token: "--stn-pop-close-size", resolvesTo: "icon-size.xsmall (16px)", usage: ".stn-pop__close hit" },
-  { token: "--stn-pop-close-icon", resolvesTo: "icon-size.xsmall (16px)", usage: ".stn-pop__close glyph" },
+  { token: "--stn-size-24", resolvesTo: "24px", usage: "\uB2EB\uAE30 \uBC84\uD2BC \uADDC\uACA9 (sm 24px)" },
+  { token: "--stn-size-16", resolvesTo: "16px", usage: "\uB2EB\uAE30 \uC544\uC774\uCF58 \uADDC\uACA9 (16px)" },
   { token: "--stn-pop-surface", resolvesTo: "gray.850 (dark) \xB7 white (light)", usage: ".stn-pop__panel background" },
   { token: "--stn-pop-border", resolvesTo: "gray.700 (dark) \xB7 gray.100 (light)", usage: ".stn-pop__panel border" },
   { token: "--stn-pop-title", resolvesTo: "static.white (dark) \xB7 gray.650 (light)", usage: ".stn-pop__head h4" },
@@ -220,4 +224,4 @@ export {
   STN_POPUP_TOKEN_ROWS,
   STN_POPUP_INVENTORY_ROWS
 };
-//# sourceMappingURL=chunk-75GHU6VI.js.map
+//# sourceMappingURL=chunk-G4SOYIHZ.js.map

package/dist/chunk-G4SOYIHZ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/data/stnPopup.ts"],"sourcesContent":["/**\n * Pub HTML Popup (.stn-pop) — StnPopup shell · sizes · pattern\n */\n\nexport const STN_POPUP_INTRO =\n  '사용자의 주의를 환기시키거나 추가 입력을 받는 팝업/모달 패턴입니다. React에서는 `<StnPopup>` 컴포넌트 하나만 사용하면 내부에서 배경 딤(Overlay)과 레이어 층을 자동으로 내장 처리해 줍니다.'\n\nexport const STN_POPUP_STACK_HTML = `<div class=\"stn-pop-stack\">\n  <div\n    class=\"stn-layer stn-elev-3 stn-elev--shell stn-elev--dim stn-pop-stack__dim\"\n    data-stn-layer=\"3\"\n    data-stn-layer-role=\"dim\"\n    data-stn-layer-surface=\"dim\"\n  >\n    <button type=\"button\" class=\"stn-layer__dim-hit\" aria-label=\"닫기\"></button>\n  </div>\n  <div\n    class=\"stn-layer stn-elev-4 stn-elev--shell stn-pop-stack__modal\"\n    data-stn-layer=\"4\"\n    data-stn-layer-role=\"modal\"\n    data-stn-layer-surface=\"transparent\"\n  >\n    <!-- .stn-pop — 패널 셸 -->\n  </div>\n</div>`\n\nexport const STN_POPUP_USAGE_HTML = `${STN_POPUP_STACK_HTML.replace('    <!-- .stn-pop — 패널 셸 -->', `<div class=\"stn-pop stn-pop--md stn-pop--open\">\n      <div class=\"stn-pop__cont\">\n        <div class=\"stn-pop__panel\">\n          <div class=\"stn-pop__head\">\n            <div class=\"stn-pop__head-start\">\n              <h4>제목</h4>\n            </div>\n            <button type=\"button\" class=\"stn-btn stn-btn--ghost stn-btn--sm\" aria-label=\"닫기\">\n              <span class=\"stn-btn__icon\"></span>\n            </button>\n          </div>\n          <div class=\"stn-pop__body\"><!-- 본문 --></div>\n          <div class=\"stn-pop__actions\"><!-- StnButton primary · secondary --></div>\n        </div>\n      </div>\n    </div>`)}`\n\nexport const STN_POPUP_USAGE = `import { StnButton, StnPopup } from '@stn-uiux/pub-ui-react'\nimport { useState } from 'react'\n\nconst [open, setOpen] = useState(false)\n\n<StnButton size=\"M\" variant=\"contained\" onClick={() => setOpen(true)}>열기</StnButton>\n<StnPopup\n  open={open}\n  onClose={() => setOpen(false)}\n  size=\"md\"\n  title=\"제목\"\n  actions={\n    <StnButton size=\"S\" variant=\"contained\" onClick={() => setOpen(false)}>\n      확인\n    </StnButton>\n  }\n>\n  본문\n</StnPopup>`\n\nexport const STN_POPUP_RESPONSIVE_NOTE =\n  '가로: `width: min(var(--stn-pop-active-width), calc(100vw - var(--stn-pop-gutter) * 2))` · `--full`: `calc(100vw - gutter×2)`. 세로: `.pop_con` overflow + `--stn-pop-max-height`.'\n\nexport const STN_POPUP_SHELL_PARTIAL =\n  '01 PC_HTML_Revision/html/_partials/popup-shell.partial.html'\n\nexport const STN_POPUP_SYNC_CSS = [\n  'packages/stn-pub-ui/css/stn-pub-popup.css',\n  '01 PC_HTML_Revision/resource/css/stn-pub-popup.css',\n  'style-pub.css · style.css → @import stn-popup.css',\n] as const\n\nexport const STN_POPUP_SIZES = [\n  {\n    id: 'xs',\n    label: 'Extra Small',\n    className: 'stn-pop--xs',\n    width: '400px',\n    token: '--stn-pop-width-xs',\n    usage: '단순 확인 · 삭제/경고 확인 얼럿 · 상태 변경',\n  },\n  {\n    id: 'sm',\n    label: 'Small',\n    className: 'stn-pop--sm',\n    width: '520px',\n    token: '--stn-pop-width-sm',\n    usage: '1~2개 입력 숏 폼 · 단축 검색 · 명칭 변경',\n  },\n  {\n    id: 'md',\n    label: 'Medium',\n    className: 'stn-pop--md',\n    width: '680px',\n    token: '--stn-pop-width-md',\n    usage: '단일 입력 폼 · 사용자 설정 · 저장 확인 (권장 기본)',\n  },\n  {\n    id: 'lg',\n    label: 'Large',\n    className: 'stn-pop--lg',\n    width: '920px',\n    token: '--stn-pop-width-lg',\n    usage: '복합 필터 · 2열 폼 · 짧은 테이블 목록',\n  },\n  {\n    id: 'xl',\n    label: 'XL',\n    className: 'stn-pop--xl',\n    width: '1200px',\n    token: '--stn-pop-width-xl',\n    usage: '대형 데이터 테이블 · 다열 프로비저닝 폼 · 대형 상세',\n  },\n  {\n    id: 'full',\n    label: 'Full',\n    className: 'stn-pop--full',\n    width: 'calc(100vw − 40px)',\n    token: '(viewport − gutter)',\n    usage: '전체 화면 대시보드 설정 및 토폴로지 매핑',\n  },\n] as const\n\nexport type StnPopupSizeId = (typeof STN_POPUP_SIZES)[number]['id']\n\n/** 레거시 `content.css` 고정 px → 권장 modifier (마이그레이션 참고) */\nexport function resolveStnPopupSizeFromWidth(px: number): StnPopupSizeId {\n  if (px <= 400) return 'xs'\n  if (px <= 480) return 'sm'\n  if (px <= 640) return 'md'\n  if (px <= 960) return 'lg'\n  if (px <= 1200) return 'xl'\n  return 'full'\n}\n\nexport const STN_POPUP_LEGACY_WIDTH_SAMPLES = [\n  { popClass: 'batch_equip_pop', widthPx: 1780, suggested: 'full' as const },\n  { popClass: 'template_history_pop', widthPx: 1565, suggested: 'full' as const },\n  { popClass: 'real_time_view_pop', widthPx: 1500, suggested: 'full' as const },\n  { popClass: 'select_equip_pop', widthPx: 1412, suggested: 'xl' as const },\n  { popClass: 'equip_regist_pop', widthPx: 1070, suggested: 'xl' as const },\n  { popClass: 'fail_measure_pop', widthPx: 1100, suggested: 'xl' as const },\n] as const\n\nexport const STN_POPUP_PARTS = [\n  { part: 'Stack', selector: '.stn-pop-stack', note: 'Dim + Modal 래퍼 · StnLayer.Modal (L2)' },\n  { part: 'Dim', selector: '.stn-layer-dim · .stn-elev--dim', note: 'L2 내장 scrim · blur · dim-hit 클릭 닫기' },\n  { part: 'Modal host', selector: '.stn-pop', note: 'L2 모달 도화지 · 중앙 정렬' },\n  { part: 'Width host', selector: '.stn-pop__cont', note: 'size modifier · responsive min()' },\n  {\n    part: 'Panel',\n    selector: '.stn-pop__panel',\n    note: 'surface · border · radius 8 · shadow · overflow',\n  },\n  {\n    part: 'Header',\n    selector: '.stn-pop__head',\n    note: '56px · h4 16 SemiBold · theme title token',\n  },\n  {\n    part: 'Close',\n    selector: 'StnButton (line/x)',\n    note: 'StnButton icon=\"line/x\" size=sm (24px) · 헤더 Flex 우측',\n  },\n  { part: 'Body', selector: '.stn-pop__body', note: 'padding 20px · overflow auto · 화면별 슬롯' },\n  {\n    part: 'Actions',\n    selector: '.stn-pop__actions',\n    note: '56px · right/center · gap 8 · StnButton',\n  },\n] as const\n\nexport const STN_POPUP_TOKEN_ROWS = [\n  { token: '--stn-pop-gutter', resolvesTo: '20px', usage: '좌우·portal padding' },\n  { token: '--stn-pop-width-xs', resolvesTo: '400px', usage: '.stn-pop--xs · 단순 확인/얼럿' },\n  { token: '--stn-pop-width-sm', resolvesTo: '480px', usage: '.stn-pop--sm · 1~2개 입력 폼' },\n  { token: '--stn-pop-width-md', resolvesTo: '640px', usage: '.stn-pop--md · 기본 표준' },\n  { token: '--stn-pop-width-lg', resolvesTo: '960px', usage: '.stn-pop--lg · 2단 분할/상세' },\n  { token: '--stn-pop-width-xl', resolvesTo: '1200px', usage: '.stn-pop--xl · 대형 테이블/그리드' },\n  { token: '.stn-pop--full', resolvesTo: '100vw − gutter×2', usage: '전체화면 모달' },\n  { token: '--stn-pop-max-height', resolvesTo: 'min(85dvh, …)', usage: '.stn-pop 본문 스크롤' },\n  { token: '--stn-pop-header-height', resolvesTo: '56px', usage: '.stn-pop__head min-height' },\n  { token: '--stn-pop-footer-height', resolvesTo: '56px', usage: '.stn-pop__actions' },\n  { token: '--stn-size-24', resolvesTo: '24px', usage: '닫기 버튼 규격 (sm 24px)' },\n  { token: '--stn-size-16', resolvesTo: '16px', usage: '닫기 아이콘 규격 (16px)' },\n  { token: '--stn-pop-surface', resolvesTo: 'gray.850 (dark) · white (light)', usage: '.stn-pop__panel background' },\n  { token: '--stn-pop-border', resolvesTo: 'gray.700 (dark) · gray.100 (light)', usage: '.stn-pop__panel border' },\n  { token: '--stn-pop-title', resolvesTo: 'static.white (dark) · gray.650 (light)', usage: '.stn-pop__head h4' },\n  { token: '--stn-pop-shadow', resolvesTo: '0 0 10px black (dark) · 0 4px 10px / 25% (light)', usage: '팝업 패널' },\n  { token: '--stn-radius-pop-wrap', resolvesTo: 'radius.10', usage: '.stn-pop__panel border-radius' },\n  {\n    token: '--stn-dim-bg',\n    resolvesTo: 'Dark gray-950/50 · Light gray-900/20',\n    usage: 'StnLayer.Dim scrim',\n  },\n  {\n    token: '--stn-dim-blur',\n    resolvesTo: 'Dark 4px · Light 2px',\n    usage: 'backdrop-filter on scrim',\n  },\n] as const\n\nexport const STN_POPUP_INVENTORY_ROWS = [\n  {\n    pattern: 'Popup panel shell',\n    pubClass: '.stn-pop .stn-pop__panel',\n    size: 'radius 10 · 934 xl',\n    status: 'implemented' as const,\n  },\n  {\n    pattern: 'Size SM–Full',\n    pubClass: '.stn-pop--sm … --full',\n    size: 'responsive min(토큰, 100vw−40px)',\n    status: 'implemented' as const,\n  },\n  {\n    pattern: '화면별 width',\n    pubClass: '.equip_regist_pop .stn-pop__cont 등',\n    size: 'content.css override → xxl/2xl/full로 이전 권장',\n    status: 'partial' as const,\n  },\n  {\n    pattern: 'MUI Dialog (migrated)',\n    pubClass: '.stn-pop',\n    size: 'sm–full',\n    status: 'implemented' as const,\n  },\n] as const\n"],"mappings":"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","names":[]}

package/dist/chunk-GYPBZAB2.js

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

package/dist/chunk-GYPBZAB2.js.map

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

package/dist/{chunk-3CYSR7V4.js → chunk-QGC3IK52.js}

@@ -93,7 +93,7 @@ function LoginPage() {
     </LoginPageScaffold>
   )
 }`;
-var STN_LOGIN_HTML = `<div class="stn-wrap stn-page--login" data-stn-layer-mode="v2">
+var STN_LOGIN_HTML = `<div class="stn-wrap stn-page--login">
   <div class="stn-layer0-bg image" aria-hidden="true"><!-- L0 login --></div>
   <main class="stn-elev-1" data-stn-layer-role="content">
     <div class="stn-login">
@@ -146,4 +146,4 @@ export {
   STN_LOGIN_USAGE,
   STN_LOGIN_HTML
 };
-//# sourceMappingURL=chunk-3CYSR7V4.js.map
+//# sourceMappingURL=chunk-QGC3IK52.js.map

package/dist/{chunk-3CYSR7V4.js.map → chunk-QGC3IK52.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["../src/data/stnLogin.ts"],"sourcesContent":["/**\n * Pub login screen — Figma 40004209:78293\n * L0 image + L1 centered card · no L2 GNB\n */\n\nimport { STN_LAYER0_BACKGROUND_DEMO_IMAGES } from './stnLayer0BackgroundAssets'\n\nexport const STN_LOGIN_FIGMA = '40004209:78293'\n\nexport const STN_LOGIN_ASSETS = {\n  backgroundLight: STN_LAYER0_BACKGROUND_DEMO_IMAGES.loginLight,\n  backgroundDark: STN_LAYER0_BACKGROUND_DEMO_IMAGES.loginDark,\n} as const\n\nexport const STN_LOGIN_INTRO =\n  '로그인 페이지는 LoginPageScaffold(페이지) + StnLayer0BackgroundPreset(바닥) + StnLoginCard(카드)입니다. 배경·로고는 각 컴포넌트의 variant를 바꿔 잡습니다. onLogin만 넘기면 기본 조립(login 배경 · 가로 XL 로고)이 들어갑니다.'\n\nexport const STN_LOGIN_USAGE = `import { useState, type FormEvent } from 'react'\nimport {\n  LoginPageScaffold,\n  StnLayer0BackgroundPreset,\n  StnLoginCard,\n  StnLoginBrandStack,\n  StnLoginFormStack,\n  StnLoginFormFields,\n  StnLoginFormLinks,\n  StnLoginTextField,\n  StnLogo,\n  StnSegmented,\n  StnButton,\n} from '@stn-uiux/pub-ui-react'\n\nfunction LoginPage() {\n  const [mode, setMode] = useState<'normal' | 'social'>('normal')\n  const [userId, setUserId] = useState('')\n  const [password, setPassword] = useState('')\n\n  function handleSubmit(e: FormEvent) {\n    e.preventDefault()\n    // 로그인 API 호출\n  }\n\n  return (\n    <LoginPageScaffold\n      layer0={<StnLayer0BackgroundPreset variant=\"login\" />}\n      cardGlow={true}\n    >\n      <StnLoginCard\n        glow={true}\n        brand={\n          <StnLoginBrandStack>\n            <StnLogo variant=\"vertical\" size=\"xl\" />\n            <p className=\"stn-login-card__caption\">Server Resource Monitoring</p>\n          </StnLoginBrandStack>\n        }\n      >\n        <StnLoginFormStack onSubmit={handleSubmit}>\n          <StnSegmented\n            aria-label=\"로그인 방식\"\n            value={mode}\n            onChange={(v) => setMode(v as 'normal' | 'social')}\n            options={[\n              { value: 'normal', label: '일반 로그인' },\n              { value: 'social', label: '소셜 로그인' },\n            ]}\n          />\n          {mode === 'normal' && (\n            <StnLoginFormFields>\n              <StnLoginTextField\n                icon=\"line/user\"\n                name=\"username\"\n                autoComplete=\"username\"\n                placeholder=\"아이디\"\n                value={userId}\n                onChange={(e) => setUserId(e.target.value)}\n                aria-label=\"아이디\"\n              />\n              <StnLoginTextField\n                icon=\"line/lock\"\n                type=\"password\"\n                name=\"password\"\n                autoComplete=\"current-password\"\n                placeholder=\"비밀번호\"\n                value={password}\n                onChange={(e) => setPassword(e.target.value)}\n                aria-label=\"비밀번호\"\n              />\n            </StnLoginFormFields>\n          )}\n          <StnButton type=\"submit\" size=\"xl\" fullWidth>\n            로그인\n          </StnButton>\n          <StnLoginFormLinks>\n            <a href=\"#signup\">회원가입</a>\n            <a href=\"#recover\">아이디 / 비밀번호 찾기</a>\n          </StnLoginFormLinks>\n        </StnLoginFormStack>\n      </StnLoginCard>\n    </LoginPageScaffold>\n  )\n}`\n\nexport const STN_LOGIN_HTML = `<div class=\"stn-wrap stn-page--login\" data-stn-layer-mode=\"v2\">\n  <div class=\"stn-layer0-bg image\" aria-hidden=\"true\"><!-- L0 login --></div>\n  <main class=\"stn-elev-1\" data-stn-layer-role=\"content\">\n    <div class=\"stn-login\">\n      <div class=\"stn-login-card\">\n        <div class=\"stn-login-card__brand\">\n          <div class=\"stn-login-brand-stack\">\n            <span class=\"stn-logo horizontal xl\">\n              <img class=\"stn-logo__img light\" src=\"/@assets/svg/brand/infomap-logo-full.png\" alt=\"InfoMap SRM\" />\n              <img class=\"stn-logo__img dark\" src=\"/@assets/svg/brand/infomap-logo-full-dark.png\" alt=\"\" />\n            </span>\n            <p class=\"stn-login-card__caption\">Server Resource Monitoring</p>\n          </div>\n        </div>\n        <div class=\"stn-login-card__form\">\n          <form class=\"stn-login-form-stack\">\n            <div class=\"stn-segmented\" role=\"radiogroup\" aria-label=\"로그인 방식\">\n              <button type=\"button\" class=\"stn-segmented__item active\" role=\"radio\" aria-checked=\"true\">일반 로그인</button>\n              <button type=\"button\" class=\"stn-segmented__item\" role=\"radio\" aria-checked=\"false\">소셜 로그인</button>\n            </div>\n            <div class=\"stn-login-form-fields\">\n              <div class=\"stn-login-text-field\">\n                <span class=\"stn-icon-box md stn-login-text-field__icon-box\" aria-hidden>\n                  <span class=\"stn-icon stn-icon--masked\" style=\"background-color: currentColor; width: 16px; height: 16px;\"></span>\n                </span>\n                <input type=\"text\" class=\"stn-login-text-field__control\" placeholder=\"아이디\" autocomplete=\"username\" />\n              </div>\n              <div class=\"stn-login-text-field\">\n                <span class=\"stn-icon-box md stn-login-text-field__icon-box\" aria-hidden>\n                  <span class=\"stn-icon stn-icon--masked\" style=\"background-color: currentColor; width: 16px; height: 16px;\"></span>\n                </span>\n                <input type=\"password\" class=\"stn-login-text-field__control\" placeholder=\"비밀번호\" autocomplete=\"current-password\" />\n              </div>\n            </div>\n            <button type=\"submit\" class=\"stn-btn contained xl full\">로그인</button>\n            <nav class=\"stn-login-form-links\" aria-label=\"계정 관리 링크\">\n              <a href=\"#signup\">회원가입</a>\n              <a href=\"#recover\">아이디 / 비밀번호 찾기</a>\n            </nav>\n          </form>\n        </div>\n      </div>\n    </div>\n  </main>\n</div>`\n"],"mappings":";;;;;AAOO,IAAM,kBAAkB;AAExB,IAAM,mBAAmB;AAAA,EAC9B,iBAAiB,kCAAkC;AAAA,EACnD,gBAAgB,kCAAkC;AACpD;AAEO,IAAM,kBACX;AAEK,IAAM,kBAAkB;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;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;AAAA;AAAA;AAAA;AAqFxB,IAAM,iBAAiB;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;AAAA;AAAA;AAAA;AAAA;","names":[]}
+{"version":3,"sources":["../src/data/stnLogin.ts"],"sourcesContent":["/**\n * Pub login screen — Figma 40004209:78293\n * L0 image + L1 centered card · no L2 GNB\n */\n\nimport { STN_LAYER0_BACKGROUND_DEMO_IMAGES } from './stnLayer0BackgroundAssets'\n\nexport const STN_LOGIN_FIGMA = '40004209:78293'\n\nexport const STN_LOGIN_ASSETS = {\n  backgroundLight: STN_LAYER0_BACKGROUND_DEMO_IMAGES.loginLight,\n  backgroundDark: STN_LAYER0_BACKGROUND_DEMO_IMAGES.loginDark,\n} as const\n\nexport const STN_LOGIN_INTRO =\n  '로그인 페이지는 LoginPageScaffold(페이지) + StnLayer0BackgroundPreset(바닥) + StnLoginCard(카드)입니다. 배경·로고는 각 컴포넌트의 variant를 바꿔 잡습니다. onLogin만 넘기면 기본 조립(login 배경 · 가로 XL 로고)이 들어갑니다.'\n\nexport const STN_LOGIN_USAGE = `import { useState, type FormEvent } from 'react'\nimport {\n  LoginPageScaffold,\n  StnLayer0BackgroundPreset,\n  StnLoginCard,\n  StnLoginBrandStack,\n  StnLoginFormStack,\n  StnLoginFormFields,\n  StnLoginFormLinks,\n  StnLoginTextField,\n  StnLogo,\n  StnSegmented,\n  StnButton,\n} from '@stn-uiux/pub-ui-react'\n\nfunction LoginPage() {\n  const [mode, setMode] = useState<'normal' | 'social'>('normal')\n  const [userId, setUserId] = useState('')\n  const [password, setPassword] = useState('')\n\n  function handleSubmit(e: FormEvent) {\n    e.preventDefault()\n    // 로그인 API 호출\n  }\n\n  return (\n    <LoginPageScaffold\n      layer0={<StnLayer0BackgroundPreset variant=\"login\" />}\n      cardGlow={true}\n    >\n      <StnLoginCard\n        glow={true}\n        brand={\n          <StnLoginBrandStack>\n            <StnLogo variant=\"vertical\" size=\"xl\" />\n            <p className=\"stn-login-card__caption\">Server Resource Monitoring</p>\n          </StnLoginBrandStack>\n        }\n      >\n        <StnLoginFormStack onSubmit={handleSubmit}>\n          <StnSegmented\n            aria-label=\"로그인 방식\"\n            value={mode}\n            onChange={(v) => setMode(v as 'normal' | 'social')}\n            options={[\n              { value: 'normal', label: '일반 로그인' },\n              { value: 'social', label: '소셜 로그인' },\n            ]}\n          />\n          {mode === 'normal' && (\n            <StnLoginFormFields>\n              <StnLoginTextField\n                icon=\"line/user\"\n                name=\"username\"\n                autoComplete=\"username\"\n                placeholder=\"아이디\"\n                value={userId}\n                onChange={(e) => setUserId(e.target.value)}\n                aria-label=\"아이디\"\n              />\n              <StnLoginTextField\n                icon=\"line/lock\"\n                type=\"password\"\n                name=\"password\"\n                autoComplete=\"current-password\"\n                placeholder=\"비밀번호\"\n                value={password}\n                onChange={(e) => setPassword(e.target.value)}\n                aria-label=\"비밀번호\"\n              />\n            </StnLoginFormFields>\n          )}\n          <StnButton type=\"submit\" size=\"xl\" fullWidth>\n            로그인\n          </StnButton>\n          <StnLoginFormLinks>\n            <a href=\"#signup\">회원가입</a>\n            <a href=\"#recover\">아이디 / 비밀번호 찾기</a>\n          </StnLoginFormLinks>\n        </StnLoginFormStack>\n      </StnLoginCard>\n    </LoginPageScaffold>\n  )\n}`\n\nexport const STN_LOGIN_HTML = `<div class=\"stn-wrap stn-page--login\">\n  <div class=\"stn-layer0-bg image\" aria-hidden=\"true\"><!-- L0 login --></div>\n  <main class=\"stn-elev-1\" data-stn-layer-role=\"content\">\n    <div class=\"stn-login\">\n      <div class=\"stn-login-card\">\n        <div class=\"stn-login-card__brand\">\n          <div class=\"stn-login-brand-stack\">\n            <span class=\"stn-logo horizontal xl\">\n              <img class=\"stn-logo__img light\" src=\"/@assets/svg/brand/infomap-logo-full.png\" alt=\"InfoMap SRM\" />\n              <img class=\"stn-logo__img dark\" src=\"/@assets/svg/brand/infomap-logo-full-dark.png\" alt=\"\" />\n            </span>\n            <p class=\"stn-login-card__caption\">Server Resource Monitoring</p>\n          </div>\n        </div>\n        <div class=\"stn-login-card__form\">\n          <form class=\"stn-login-form-stack\">\n            <div class=\"stn-segmented\" role=\"radiogroup\" aria-label=\"로그인 방식\">\n              <button type=\"button\" class=\"stn-segmented__item active\" role=\"radio\" aria-checked=\"true\">일반 로그인</button>\n              <button type=\"button\" class=\"stn-segmented__item\" role=\"radio\" aria-checked=\"false\">소셜 로그인</button>\n            </div>\n            <div class=\"stn-login-form-fields\">\n              <div class=\"stn-login-text-field\">\n                <span class=\"stn-icon-box md stn-login-text-field__icon-box\" aria-hidden>\n                  <span class=\"stn-icon stn-icon--masked\" style=\"background-color: currentColor; width: 16px; height: 16px;\"></span>\n                </span>\n                <input type=\"text\" class=\"stn-login-text-field__control\" placeholder=\"아이디\" autocomplete=\"username\" />\n              </div>\n              <div class=\"stn-login-text-field\">\n                <span class=\"stn-icon-box md stn-login-text-field__icon-box\" aria-hidden>\n                  <span class=\"stn-icon stn-icon--masked\" style=\"background-color: currentColor; width: 16px; height: 16px;\"></span>\n                </span>\n                <input type=\"password\" class=\"stn-login-text-field__control\" placeholder=\"비밀번호\" autocomplete=\"current-password\" />\n              </div>\n            </div>\n            <button type=\"submit\" class=\"stn-btn contained xl full\">로그인</button>\n            <nav class=\"stn-login-form-links\" aria-label=\"계정 관리 링크\">\n              <a href=\"#signup\">회원가입</a>\n              <a href=\"#recover\">아이디 / 비밀번호 찾기</a>\n            </nav>\n          </form>\n        </div>\n      </div>\n    </div>\n  </main>\n</div>`\n"],"mappings":";;;;;AAOO,IAAM,kBAAkB;AAExB,IAAM,mBAAmB;AAAA,EAC9B,iBAAiB,kCAAkC;AAAA,EACnD,gBAAgB,kCAAkC;AACpD;AAEO,IAAM,kBACX;AAEK,IAAM,kBAAkB;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;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;AAAA;AAAA;AAAA;AAqFxB,IAAM,iBAAiB;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;AAAA;AAAA;AAAA;AAAA;","names":[]}

package/dist/{chunk-7YKAIENZ.js → chunk-RVYQ7WL3.js}

@@ -20,7 +20,7 @@ var STN_SECTION_SIDE_SPEC = [
   {
     property: "Translucent Bg",
     value: "`--stn-section-side-bg-translucent`",
-    note: 'variant="translucent" \u2014 light white-50 \xB7 dark black-50 (blur 8px)'
+    note: 'variant="translucent" \u2014 light white-50 \xB7 dark black-25 (blur 8px)'
   },
   {
     property: "Border",
@@ -37,11 +37,6 @@ var STN_SECTION_SIDE_SPEC = [
     property: "fill",
     value: "`fill` prop \u2192 `.stn-section-side--fill`",
     note: "list view \u2014 search+table \uC5F4 \uB192\uC774 \xB7 \uD558\uB2E8 inset\uC740 .stn-container padding-bottom"
-  },
-  {
-    property: "variant",
-    value: '`variant="translucent"`',
-    note: "\uAE00\uB798\uC2A4\uBAA8\uD53C\uC998 \uBC18\uD22C\uBA85 \uBE14\uB7EC \uD328\uB110 (.stn-section-side.translucent)"
   }
 ];
 var STN_SECTION_SIDE_USAGE = `import {
@@ -64,4 +59,4 @@ export {
   STN_SECTION_SIDE_SPEC,
   STN_SECTION_SIDE_USAGE
 };
-//# sourceMappingURL=chunk-7YKAIENZ.js.map
+//# sourceMappingURL=chunk-RVYQ7WL3.js.map

package/dist/{chunk-7YKAIENZ.js.map → chunk-RVYQ7WL3.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["../src/data/stnSectionSide.ts"],"sourcesContent":["/**\n * Infomap section-side panel\n * Dark 40000040:102539 · Light 40000042:187762\n * @see StnSectionSide · stn-section-side.css\n */\n\nexport const STN_SECTION_SIDE_FIGMA = {\n  dark: '40000040:102539',\n  light: '40000042:187762',\n} as const\n\nexport const STN_SECTION_SIDE_INTRO =\n  '맵·대시보드 **사이드 패널** 패턴. Light: white · gray-25 border · radius 8 · shadow. Dark: gray-900 · gray-800 border · radius 10. 본문 `StnScroll` + `StnTree`.'\n\nexport const STN_SECTION_SIDE_SPEC = [\n  { property: 'Width', value: '264px', note: 'Figma frame' },\n  { property: 'Padding', value: '8px', note: '' },\n  {\n    property: 'Radius',\n    value: '`--stn-section-side-radius`',\n    note: 'light 8 · dark 10',\n  },\n  {\n    property: 'Background',\n    value: '`--stn-section-side-bg`',\n    note: 'light white · dark gray-900',\n  },\n  {\n    property: 'Translucent Bg',\n    value: '`--stn-section-side-bg-translucent`',\n    note: 'variant=\"translucent\" — light white-50 · dark black-50 (blur 8px)',\n  },\n  {\n    property: 'Border',\n    value: '`--stn-section-side-border`',\n    note: 'light gray-25 · dark gray-800',\n  },\n  {\n    property: 'Shadow',\n    value: '`--stn-section-side-shadow`',\n    note: 'light 0 3px 10px gray-75 · dark none',\n  },\n  { property: 'Body', value: 'StnScroll vertical', note: 'overflow tree' },\n  {\n    property: 'fill',\n    value: '`fill` prop → `.stn-section-side--fill`',\n    note: 'list view — search+table 열 높이 · 하단 inset은 .stn-container padding-bottom',\n  },\n  {\n    property: 'variant',\n    value: '`variant=\"translucent\"`',\n    note: '글래스모피즘 반투명 블러 패널 (.stn-section-side.translucent)',\n  },\n] as const\n\nexport const STN_SECTION_SIDE_USAGE = `import {\n  StnSectionSide,\n  StnTree,\n} from '@stn-uiux/pub-ui-react'\nimport { STN_TREE_DEMO } from '@stn-uiux/pub-ui/data/stnTree'\n\n<StnSectionSide style={{ height: 360 }}>\n  <StnTree\n    heading=\"FOLDER STRUCTURE\"\n    nodes={STN_TREE_DEMO}\n    defaultExpandedIds={['root', 'group-a', 'equip', 'group-b']}\n  />\n</StnSectionSide>`\n"],"mappings":";AAMO,IAAM,yBAAyB;AAAA,EACpC,MAAM;AAAA,EACN,OAAO;AACT;AAEO,IAAM,yBACX;AAEK,IAAM,wBAAwB;AAAA,EACnC,EAAE,UAAU,SAAS,OAAO,SAAS,MAAM,cAAc;AAAA,EACzD,EAAE,UAAU,WAAW,OAAO,OAAO,MAAM,GAAG;AAAA,EAC9C;AAAA,IACE,UAAU;AAAA,IACV,OAAO;AAAA,IACP,MAAM;AAAA,EACR;AAAA,EACA;AAAA,IACE,UAAU;AAAA,IACV,OAAO;AAAA,IACP,MAAM;AAAA,EACR;AAAA,EACA;AAAA,IACE,UAAU;AAAA,IACV,OAAO;AAAA,IACP,MAAM;AAAA,EACR;AAAA,EACA;AAAA,IACE,UAAU;AAAA,IACV,OAAO;AAAA,IACP,MAAM;AAAA,EACR;AAAA,EACA;AAAA,IACE,UAAU;AAAA,IACV,OAAO;AAAA,IACP,MAAM;AAAA,EACR;AAAA,EACA,EAAE,UAAU,QAAQ,OAAO,sBAAsB,MAAM,gBAAgB;AAAA,EACvE;AAAA,IACE,UAAU;AAAA,IACV,OAAO;AAAA,IACP,MAAM;AAAA,EACR;AAAA,EACA;AAAA,IACE,UAAU;AAAA,IACV,OAAO;AAAA,IACP,MAAM;AAAA,EACR;AACF;AAEO,IAAM,yBAAyB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;","names":[]}
+{"version":3,"sources":["../src/data/stnSectionSide.ts"],"sourcesContent":["/**\n * Infomap section-side panel\n * Dark 40000040:102539 · Light 40000042:187762\n * @see StnSectionSide · stn-section-side.css\n */\n\nexport const STN_SECTION_SIDE_FIGMA = {\n  dark: '40000040:102539',\n  light: '40000042:187762',\n} as const\n\nexport const STN_SECTION_SIDE_INTRO =\n  '맵·대시보드 **사이드 패널** 패턴. Light: white · gray-25 border · radius 8 · shadow. Dark: gray-900 · gray-800 border · radius 10. 본문 `StnScroll` + `StnTree`.'\n\nexport const STN_SECTION_SIDE_SPEC = [\n  { property: 'Width', value: '264px', note: 'Figma frame' },\n  { property: 'Padding', value: '8px', note: '' },\n  {\n    property: 'Radius',\n    value: '`--stn-section-side-radius`',\n    note: 'light 8 · dark 10',\n  },\n  {\n    property: 'Background',\n    value: '`--stn-section-side-bg`',\n    note: 'light white · dark gray-900',\n  },\n  {\n    property: 'Translucent Bg',\n    value: '`--stn-section-side-bg-translucent`',\n    note: 'variant=\"translucent\" — light white-50 · dark black-25 (blur 8px)',\n  },\n  {\n    property: 'Border',\n    value: '`--stn-section-side-border`',\n    note: 'light gray-25 · dark gray-800',\n  },\n  {\n    property: 'Shadow',\n    value: '`--stn-section-side-shadow`',\n    note: 'light 0 3px 10px gray-75 · dark none',\n  },\n  { property: 'Body', value: 'StnScroll vertical', note: 'overflow tree' },\n  {\n    property: 'fill',\n    value: '`fill` prop → `.stn-section-side--fill`',\n    note: 'list view — search+table 열 높이 · 하단 inset은 .stn-container padding-bottom',\n  },\n] as const\n\nexport const STN_SECTION_SIDE_USAGE = `import {\n  StnSectionSide,\n  StnTree,\n} from '@stn-uiux/pub-ui-react'\nimport { STN_TREE_DEMO } from '@stn-uiux/pub-ui/data/stnTree'\n\n<StnSectionSide style={{ height: 360 }}>\n  <StnTree\n    heading=\"FOLDER STRUCTURE\"\n    nodes={STN_TREE_DEMO}\n    defaultExpandedIds={['root', 'group-a', 'equip', 'group-b']}\n  />\n</StnSectionSide>`\n"],"mappings":";AAMO,IAAM,yBAAyB;AAAA,EACpC,MAAM;AAAA,EACN,OAAO;AACT;AAEO,IAAM,yBACX;AAEK,IAAM,wBAAwB;AAAA,EACnC,EAAE,UAAU,SAAS,OAAO,SAAS,MAAM,cAAc;AAAA,EACzD,EAAE,UAAU,WAAW,OAAO,OAAO,MAAM,GAAG;AAAA,EAC9C;AAAA,IACE,UAAU;AAAA,IACV,OAAO;AAAA,IACP,MAAM;AAAA,EACR;AAAA,EACA;AAAA,IACE,UAAU;AAAA,IACV,OAAO;AAAA,IACP,MAAM;AAAA,EACR;AAAA,EACA;AAAA,IACE,UAAU;AAAA,IACV,OAAO;AAAA,IACP,MAAM;AAAA,EACR;AAAA,EACA;AAAA,IACE,UAAU;AAAA,IACV,OAAO;AAAA,IACP,MAAM;AAAA,EACR;AAAA,EACA;AAAA,IACE,UAAU;AAAA,IACV,OAAO;AAAA,IACP,MAAM;AAAA,EACR;AAAA,EACA,EAAE,UAAU,QAAQ,OAAO,sBAAsB,MAAM,gBAAgB;AAAA,EACvE;AAAA,IACE,UAAU;AAAA,IACV,OAAO;AAAA,IACP,MAAM;AAAA,EACR;AACF;AAEO,IAAM,yBAAyB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;","names":[]}

package/dist/{chunk-FSSMH6VS.js → chunk-TEK632EJ.js}

@@ -1,74 +1,39 @@
 // src/data/stnLayer0Background.ts
-var STN_LAYER0_BACKGROUND_FIGMA = {
-  none: "40000040:41267",
-  noneDark: "40000040:80488",
-  showroomA: "40000042:186876",
-  showroomADark: "40002117:35369",
-  showroomB: "40000042:186860",
-  showroomBDark: "40000040:84014",
-  mapLight: "40000042:202895",
-  mapDark: "40000040:91183",
-  login: "40004209:78293",
-  loginDark: "40004209:78293",
-  dashboard: "40004209:78300",
-  dashboardDark: "40004209:78300"
-};
 var STN_LAYER0_BACKGROUND_INTRO = "\uD398\uC774\uC9C0 \uCD5C\uD558\uB2E8 \uB808\uBCA8(Level 0)\uC5D0 \uC704\uCE58\uD558\uB294 \uC2DC\uC2A4\uD15C \uBC14\uB2E5\uBA74 \uBC30\uACBD \uD328\uD134\uC785\uB2C8\uB2E4. \uB2E8\uC0C9 \uCEEC\uB7EC \uBC0F \uB9F5\xB7\uD1A0\uD3F4\uB85C\uC9C0 \uCE94\uBC84\uC2A4 \uBC30\uACBD \uC774\uBBF8\uC9C0\uB97C `StnLayer0BackgroundPreset`\uC73C\uB85C \uC190\uC27D\uAC8C \uC801\uC6A9\uD560 \uC218 \uC788\uC2B5\uB2C8\uB2E4.";
 var STN_LAYER0_BACKGROUND_VARIANT_ROWS = [
   {
     preset: "none",
     kind: "color",
-    figma: STN_LAYER0_BACKGROUND_FIGMA.none,
-    figmaDark: STN_LAYER0_BACKGROUND_FIGMA.noneDark,
     note: "Light gradient \xB7 Dark elevation surface-0 (gray-950)"
   },
   {
-    preset: "dashboard",
-    kind: "image",
-    figma: STN_LAYER0_BACKGROUND_FIGMA.dashboard,
-    figmaDark: STN_LAYER0_BACKGROUND_FIGMA.dashboardDark,
-    note: "Dashboard \xB7 light/dark pair"
+    preset: "list",
+    kind: "gradient",
+    note: "List view \xB7 \uD14C\uB9C8 \uBC18\uC751\uD615 \uBC14\uB2E5\uBA74 (Default: \uC570\uBE44\uC5B8\uD2B8 gradient, Blue: infomap-none 3D \uADF8\uB798\uD53D)"
   },
   {
-    preset: "infomap",
-    kind: "image",
-    figma: STN_LAYER0_BACKGROUND_FIGMA.dashboard,
-    figmaDark: STN_LAYER0_BACKGROUND_FIGMA.dashboardDark,
-    note: "Infomap 3D Graphic \xB7 light/dark pair"
-  },
-  {
-    preset: "infomap-none",
+    preset: "dashboard",
     kind: "image",
-    figma: STN_LAYER0_BACKGROUND_FIGMA.dashboard,
-    figmaDark: STN_LAYER0_BACKGROUND_FIGMA.dashboardDark,
-    note: "Infomap 3D Graphic (None/\uD14D\uC2A4\uD2B8 \uC5C6\uC74C) \xB7 light/dark pair"
+    note: 'Dashboard \xB7 light/dark pair (theme="blue" \uC801\uC6A9 \uC2DC infomap \uADF8\uB798\uD53D\uC73C\uB85C \uC790\uB3D9 \uC804\uD658)'
   },
   {
     preset: "showroom-a",
     kind: "image",
-    figma: STN_LAYER0_BACKGROUND_FIGMA.showroomA,
-    figmaDark: STN_LAYER0_BACKGROUND_FIGMA.showroomADark,
     note: "Showroom A \xB7 dark logo stage"
   },
   {
     preset: "showroom-b",
     kind: "image",
-    figma: STN_LAYER0_BACKGROUND_FIGMA.showroomB,
-    figmaDark: STN_LAYER0_BACKGROUND_FIGMA.showroomBDark,
     note: "Showroom B \xB7 dark + radial vignette"
   },
   {
     preset: "map-light",
     kind: "image",
-    figma: STN_LAYER0_BACKGROUND_FIGMA.mapLight,
-    figmaDark: STN_LAYER0_BACKGROUND_FIGMA.mapDark,
     note: "Map light(+20% white) \xB7 Map dark"
   },
   {
     preset: "login",
     kind: "image",
-    figma: STN_LAYER0_BACKGROUND_FIGMA.login,
-    figmaDark: STN_LAYER0_BACKGROUND_FIGMA.loginDark,
     note: "Login \xB7 light/dark pair"
   }
 ];
@@ -129,18 +94,16 @@ var STN_LAYER0_BACKGROUND_USAGE_HTML = `<!-- L0 background \u2014 color / image
 </div>`;
 var STN_LAYER0_MAP_LIGHT_OVERLAY = 0.2;
 var STN_LAYER0_BACKGROUND_PLAYGROUND_PRESETS = [
-  { id: "dashboard", label: "dashboard", asset: "\uB300\uC2DC\uBCF4\uB4DC \uBC30\uACBD (dashboard-light / dark)", variant: "dashboard" },
-  { id: "infomap", label: "infomap", asset: "\uC778\uD3EC\uB9F5 3D \uBC30\uACBD (infomap-light / dark)", variant: "infomap" },
-  { id: "infomap-none", label: "infomap-none", asset: "\uC778\uD3EC\uB9F5 3D (None/\uD14D\uC2A4\uD2B8 \uC5C6\uC74C)", variant: "infomap-none" },
+  { id: "list", label: "list", asset: "\uBAA9\uB85D/\uC77C\uBC18 \uBC30\uACBD (Default: \uC570\uBE44\uC5B8\uD2B8 gradient, Blue: infomap-none)", variant: "list" },
+  { id: "dashboard", label: "dashboard", asset: "\uB300\uC2DC\uBCF4\uB4DC \uBC30\uACBD (dashboard-light / dark, Blue \uD14C\uB9C8 \uC2DC infomap \uC790\uB3D9 \uC804\uD658)", variant: "dashboard" },
   { id: "color", label: "color", asset: "\uB2E8\uC0C9 \uD14C\uB9C8 \uBC30\uACBD (solid default)", variant: "none" },
-  { id: "gradient", label: "gradient", asset: "\uACF5\uC2DD \uC570\uBE44\uC5B8\uD2B8 \uADF8\uB77C\uB370\uC774\uC158 (\uC6CC\uC2DC/\uC2EC\uB3C4)", variant: "gradient" },
+  { id: "gradient", label: "gradient", asset: "\uACF5\uC2DD \uC570\uBE44\uC5B8\uD2B8 \uADF8\uB77C\uB370\uC774\uC158 (\uB2E4\uD06C/\uB77C\uC774\uD2B8 \uC790\uB3D9 \uC804\uD658)", variant: "gradient" },
   { id: "map", label: "map", asset: "GIS \uC9C0\uB3C4 \uBC30\uACBD (map-light)", variant: "map-light" },
   { id: "topology", label: "topology", asset: "\uD1A0\uD3F4\uB85C\uC9C0 \uBC30\uACBD (showroom-b)", variant: "showroom-b" },
   { id: "none", label: "none", asset: "L0 \uBC30\uACBD \uC5C6\uC74C (\uC678\uBD80 \uCE94\uBC84\uC2A4 \uC804\uC6A9)", variant: "none" }
 ];
 
 export {
-  STN_LAYER0_BACKGROUND_FIGMA,
   STN_LAYER0_BACKGROUND_INTRO,
   STN_LAYER0_BACKGROUND_VARIANT_ROWS,
   STN_LAYER0_BACKGROUND_USAGE,
@@ -148,4 +111,4 @@ export {
   STN_LAYER0_MAP_LIGHT_OVERLAY,
   STN_LAYER0_BACKGROUND_PLAYGROUND_PRESETS
 };
-//# sourceMappingURL=chunk-FSSMH6VS.js.map
+//# sourceMappingURL=chunk-TEK632EJ.js.map

package/dist/chunk-TEK632EJ.js.map

@@ -0,0 +1 @@
+{"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 type StnLayer0BackgroundKind = 'color' | 'gradient' | 'image'\n\n/** 바닥면 예제 프리셋 — color 1종 · gradient 1종 · image 5종 (light/dark 자동 전환) */\nexport type StnLayer0BackgroundPreset =\n  | 'none'\n  | 'gradient'\n  | 'list'\n  | 'showroom-a'\n  | 'showroom-b'\n  | 'map-light'\n  | 'login'\n  | 'dashboard'\n  | 'infomap'\n  | 'infomap-none'\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    note: 'Light gradient · Dark elevation surface-0 (gray-950)',\n  },\n  {\n    preset: 'list',\n    kind: 'gradient',\n    note: 'List view · 테마 반응형 바닥면 (Default: 앰비언트 gradient, Blue: infomap-none 3D 그래픽)',\n  },\n  {\n    preset: 'dashboard',\n    kind: 'image',\n    note: 'Dashboard · light/dark pair (theme=\"blue\" 적용 시 infomap 그래픽으로 자동 전환)',\n  },\n  {\n    preset: 'showroom-a',\n    kind: 'image',\n    note: 'Showroom A · dark logo stage',\n  },\n  {\n    preset: 'showroom-b',\n    kind: 'image',\n    note: 'Showroom B · dark + radial vignette',\n  },\n  {\n    preset: 'map-light',\n    kind: 'image',\n    note: 'Map light(+20% white) · Map dark',\n  },\n  {\n    preset: 'login',\n    kind: 'image',\n    note: 'Login · light/dark pair',\n  },\n] as const satisfies ReadonlyArray<{\n  preset: StnLayer0BackgroundPreset\n  kind: StnLayer0BackgroundKind\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  | 'list'\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: 'list', label: 'list', asset: '목록/일반 배경 (Default: 앰비언트 gradient, Blue: infomap-none)', variant: 'list' },\n  { id: 'dashboard', label: 'dashboard', asset: '대시보드 배경 (dashboard-light / dark, Blue 테마 시 infomap 자동 전환)', 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":";AA4BO,IAAM,8BACX;AAEK,IAAM,qCAAqC;AAAA,EAChD;AAAA,IACE,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,MAAM;AAAA,EACR;AAAA,EACA;AAAA,IACE,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,MAAM;AAAA,EACR;AAAA,EACA;AAAA,IACE,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,MAAM;AAAA,EACR;AAAA,EACA;AAAA,IACE,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,MAAM;AAAA,EACR;AAAA,EACA;AAAA,IACE,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,MAAM;AAAA,EACR;AAAA,EACA;AAAA,IACE,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,MAAM;AAAA,EACR;AAAA,EACA;AAAA,IACE,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,MAAM;AAAA,EACR;AACF;AAMO,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;AAYrC,IAAM,2CAKP;AAAA,EACJ,EAAE,IAAI,QAAQ,OAAO,QAAQ,OAAO,2GAAyD,SAAS,OAAO;AAAA,EAC7G,EAAE,IAAI,aAAa,OAAO,aAAa,OAAO,8HAA6D,SAAS,YAAY;AAAA,EAChI,EAAE,IAAI,SAAS,OAAO,SAAS,OAAO,0DAA4B,SAAS,OAAO;AAAA,EAClF,EAAE,IAAI,YAAY,OAAO,YAAY,OAAO,oIAAgC,SAAS,WAAW;AAAA,EAChG,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":[]}