@stn-uiux/pub-ui 0.1.57 → 0.1.59

package/dist/data/stnAlertCenter.d.ts

@@ -5,6 +5,7 @@ import './stnColorPalette.js';
 declare const STN_ALERT_CENTER_INTRO = "GNB \uD558\uB2E8 \uC575\uCEE4\uC5D0\uC11C \uB808\uC774\uC5B4\uB85C \uD45C\uCD9C\uB418\uB294 \uC54C\uB9BC\uC13C\uD130 \uD328\uD134\uC785\uB2C8\uB2E4. \uC2E4\uC2DC\uAC04 \uC7A5\uC560 \uC54C\uB9BC, \uC791\uC5C5 \uD56D\uBAA9, \uBC30\uD3EC \uD604\uD669 \uD0ED \uBC0F \uAC1C\uBCC4 \uD56D\uBAA9 \uC0C1\uC138 \uB2E4\uC774\uC5BC\uB85C\uADF8 \uC5F0\uB3D9\uC744 \uC81C\uACF5\uD569\uB2C8\uB2E4.";
 type StnAlertCenterTab = 'error' | 'work' | 'deploy';
 type StnAlertCenterSize = 'sm' | 'md' | 'lg';
+type StnAlertCenterTextOverflow = 'wrap' | 'ellipsis' | 'marquee';
 /** Pub CSS `:has(#gnb-alert-tab-*)` 와 호환 — 페이지당 1패널이면 기본값 사용 */
 declare const STN_ALERT_CENTER_TAB_IDS: Record<StnAlertCenterTab, string>;
 declare const STN_ALERT_CENTER_TABS: readonly {
@@ -33,7 +34,7 @@ declare const STN_ALERT_CENTER_DEMO_WORK: StnAlertCenterWorkItem[];
 declare const STN_ALERT_CENTER_DEMO_DEPLOY: StnAlertCenterWorkItem[];
 declare const STN_ALERT_CENTER_INTEGRATION_USAGE = "import {\n  StnAlertCenterPanel,\n  StnSideNavigation,\n  StnLayerShell,\n} from '@stn-uiux/pub-ui-react'\n\nexport function AppChrome() {\n  const [alertOpen, setAlertOpen] = useState(false)\n\n  return (\n    <StnLayerShell\n      gnb={\n        <StnSideNavigation>\n          <StnSideNavigation.Header>\n            <StnSideNavigation.Logo />\n            <StnSideNavigation.Toggle />\n          </StnSideNavigation.Header>\n          <StnSideNavigation.Menu>\n            <StnSideNavigation.Item label=\"\uB300\uC2DC\uBCF4\uB4DC\" active />\n          </StnSideNavigation.Menu>\n          <StnSideNavigation.Spacer />\n          <StnSideNavigation.Footer curved>\n            <StnSideNavigation.Watermark />\n            <StnSideNavigation.Item\n              label=\"\uC54C\uB9BC\"\n              badge={12}\n              onClick={() => setAlertOpen(!alertOpen)}\n            />\n          </StnSideNavigation.Footer>\n        </StnSideNavigation>\n      }\n    >\n      <main>\u2026\uBCF8\uBB38\u2026</main>\n      {alertOpen && (\n        <StnAlertCenterPanel\n          alerts={alerts}\n          workItems={workItems}\n          deployItems={deployItems}\n          onClose={() => setAlertOpen(false)}\n        />\n      )}\n    </StnLayerShell>\n  )\n}";
 declare const STN_GNB_ALERT_INTEGRATION_USAGE = "import {\n  StnAlertCenterPanel,\n  StnSideNavigation,\n  StnLayerShell,\n} from '@stn-uiux/pub-ui-react'\n\nexport function AppChrome() {\n  const [alertOpen, setAlertOpen] = useState(false)\n\n  return (\n    <StnLayerShell\n      gnb={\n        <StnSideNavigation>\n          <StnSideNavigation.Header>\n            <StnSideNavigation.Logo />\n            <StnSideNavigation.Toggle />\n          </StnSideNavigation.Header>\n          <StnSideNavigation.Menu>\n            <StnSideNavigation.Item label=\"\uB300\uC2DC\uBCF4\uB4DC\" active />\n          </StnSideNavigation.Menu>\n          <StnSideNavigation.Spacer />\n          <StnSideNavigation.Footer curved>\n            <StnSideNavigation.Watermark />\n            <StnSideNavigation.Item\n              label=\"\uC54C\uB9BC\"\n              badge={12}\n              onClick={() => setAlertOpen(!alertOpen)}\n            />\n          </StnSideNavigation.Footer>\n        </StnSideNavigation>\n      }\n    >\n      <main>\u2026\uBCF8\uBB38\u2026</main>\n      {alertOpen && (\n        <StnAlertCenterPanel\n          alerts={alerts}\n          workItems={workItems}\n          deployItems={deployItems}\n          onClose={() => setAlertOpen(false)}\n        />\n      )}\n    </StnLayerShell>\n  )\n}";
-declare const STN_ALERT_CENTER_USAGE = "import { StnAlertCenterPanel } from '@stn-uiux/pub-ui-react'\n\n<StnAlertCenterPanel\n  alerts={alerts}\n  workItems={workItems}\n  deployItems={deployItems}\n  onClose={() => setOpen(false)}\n/>";
-declare const STN_ALERT_CENTER_USAGE_HTML = "<!-- Pub stn-alert-center \u2014 GNB \uC606 float -->\n<div class=\"stn-alert-center gnb_alert_modal\" id=\"gnb_alert_modal\" style=\"display: block\">\n  <div class=\"stn-alert-center__header alert_header\">\n    <div class=\"stn-alert-center__header-left header_left\">\n      <span class=\"stn-alert-center__title title\">\uC54C\uB9BC\uC13C\uD130</span>\n      <div class=\"stn-alert-center__toggle alert_toggle\">\n        <input type=\"radio\" name=\"gnb-alert-tab\" id=\"gnb-alert-tab-error\" checked />\n        <label for=\"gnb-alert-tab-error\">\uC7A5\uC560</label>\n        <input type=\"radio\" name=\"gnb-alert-tab\" id=\"gnb-alert-tab-work\" />\n        <label for=\"gnb-alert-tab-work\">\uC791\uC5C5</label>\n        <input type=\"radio\" name=\"gnb-alert-tab\" id=\"gnb-alert-tab-deploy\" />\n        <label for=\"gnb-alert-tab-deploy\">\uACF5\uC0AC</label>\n      </div>\n    </div>\n    <button type=\"button\" class=\"stn-alert-center__close close_alert_modal\" aria-label=\"\uB2EB\uAE30\"></button>\n  </div>\n  <div class=\"stn-alert-center__list-wrap alert_list_wrap\">\n    <ul class=\"stn-alert-center__list alert_list\">\n      <li class=\"stn-alert-center__item alert_item\">\n        <span class=\"stn-alert-center__dot dot\" aria-hidden=\"true\"></span>\n        <span class=\"stn-badge stn-badge--filled stn-badge--critical\">CR</span>\n        <span class=\"stn-alert-center__title-cell title_cell\">Ping \uC218\uC9D1 \uC7A5\uC560</span>\n        <span class=\"stn-alert-center__desc-cell desc_cell\">\uC7A5\uBE44 \uC751\uB2F5 \uC5C6\uC74C</span>\n        <span class=\"stn-alert-center__time-cell time_cell\">11\uB2EC\uC804</span>\n      </li>\n    </ul>\n  </div>\n</div>";
+declare const STN_ALERT_CENTER_USAGE = "import { useState } from 'react'\nimport {\n  StnAlertCenterPanel,\n  StnAlertCard,\n  StnCard,\n  StnChip,\n  StnIcon,\n  StnStack,\n  type StnAlertCenterAlertItem,\n  type StnAlertCenterWorkItem,\n} from '@stn-uiux/pub-ui-react'\n\n// =================================================================\n// 1. StnCard\uB97C \uC0AC\uC6A9\uD55C \uAC1C\uBCC4 \uC54C\uB9BC \uCE74\uB4DC \uCEE4\uC2A4\uD140 (StnAlertCard \uB0B4\uBD80 \uC870\uB9BD \uAD6C\uC870)\n// =================================================================\nexport function CustomAlertCard({ item }: { item: StnAlertCenterAlertItem }) {\n  return (\n    <StnCard\n      variant=\"elevated\"\n      radius=\"md\"\n      padding=\"md\"\n      interactive\n      className=\"stn-alert-card\"\n      onClick={() => console.log('\uCE74\uB4DC \uD074\uB9AD:', item)}\n    >\n      <div className=\"stn-alert-card__row\">\n        {/* \uC2EC\uAC01\uB3C4 \uC544\uC774\uCF58 */}\n        <StnIcon\n          name={item.icon || 'line/alert-circle'}\n          size={24}\n          color={`var(--stn-grade-${item.grade}, var(--stn-primary))`}\n          className=\"stn-alert-card__icon\"\n        />\n\n        {/* \uBCF8\uBB38: \uB4F1\uAE09 \uBC30\uC9C0 + \uC81C\uBAA9 + \uC124\uBA85 + \uBC1C\uC0DD\uC2DC\uAC04 */}\n        <div className=\"stn-alert-card__body\">\n          <StnStack direction=\"row\" alignItems=\"center\" spacing={1} className=\"stn-alert-card__header-line\">\n            <StnChip shape=\"pill\" size=\"sm\" variant=\"filled\" color={item.grade}>\n              {item.grade === 'critical' ? 'CR' : item.grade === 'major' ? 'MJ' : 'WR'}\n            </StnChip>\n            <h4 className=\"stn-alert-card__title ellipsis\" title={item.title}>\n              <span className=\"stn-alert-card__text-inner\">{item.title}</span>\n            </h4>\n          </StnStack>\n\n          <StnStack direction=\"row\" alignItems=\"center\" spacing={2} wrap=\"wrap\" className=\"stn-alert-card__desc-line\">\n            <p className=\"stn-alert-card__desc marquee\" title={item.description}>\n              <span className=\"stn-alert-card__text-inner\">{item.description}</span>\n            </p>\n            {item.occurredAt && (\n              <StnChip shape=\"pill\" size=\"sm\" variant=\"subtle\" color=\"critical\" className=\"stn-alert-card__time-chip\">\n                \uBC1C\uC0DD\uC2DC\uAC04: {item.occurredAt}\n              </StnChip>\n            )}\n          </StnStack>\n        </div>\n\n        {/* \uC218\uC2E0 \uC2DC\uAC04 & \uC77D\uC9C0 \uC54A\uC74C \uB2F7 */}\n        <div className=\"stn-alert-card__meta\">\n          <span className=\"stn-alert-card__time\">{item.time}</span>\n          {item.unread && (\n            <span\n              className={`stn-alert-card__dot stn-alert-card__dot--${item.grade}`}\n              aria-label=\"\uC77D\uC9C0 \uC54A\uC74C\"\n            />\n          )}\n        </div>\n      </div>\n    </StnCard>\n  )\n}\n\n// =================================================================\n// 2. \uC644\uC131\uD615 \uC54C\uB9BC\uC13C\uD130 \uD328\uB110 (StnAlertCenterPanel \uC804\uCCB4 \uB80C\uB354\uB9C1)\n// =================================================================\nexport function AlertCenterDemo() {\n  const [open, setOpen] = useState(true)\n\n  const alerts: StnAlertCenterAlertItem[] = [\n    {\n      id: 'alert-1',\n      grade: 'critical',\n      title: 'Ping \uC218\uC9D1 \uC7A5\uC560',\n      description: '101\uACBD\uBE44\uB2E8_UPS 10.15.71.161 / 101\uACBD\uBE44\uB2E8',\n      occurredAt: '2026-05-29 14:23',\n      time: '11\uBD84 \uC804',\n      unread: true,\n    },\n    {\n      id: 'alert-2',\n      grade: 'major',\n      title: '\uC778\uD130\uD398\uC774\uC2A4 OperStatus \uB2E4\uC6B4 (\uD3EC\uD2B8 Te1/0/24 \uB9C1\uD06C \uC21C\uB2E8 \uBC0F \uC790\uB3D9 \uC6B0\uD68C \uACBD\uB85C \uC808\uCCB4 \uC2E4\uD328)',\n      description: '\uC218\uC0AC\uC9C0\uC6D0\uCCAD\uC0AC_\uC5C5\uBB34\uB9DD L3(Stack)#2 50.52.41.2 / \uC885\uD569\uC0C1\uD669\uC2E4',\n      time: '3\uC77C \uC804',\n      unread: true,\n    },\n  ]\n\n  const workItems: StnAlertCenterWorkItem[] = [\n    {\n      id: 'work-1',\n      typeLabel: '\uC815\uAE30\uC810\uAC80',\n      text: 'DB \uC11C\uBC84 \uBC31\uC5C5 \uBC0F \uC778\uB371\uC2A4 \uC7AC\uAD6C\uC131 \uC791\uC5C5 \uC9C4\uD589 (02:00 ~ 04:00)',\n      time: '\uC624\uB298 02:00',\n    },\n  ]\n\n  const deployItems: StnAlertCenterWorkItem[] = [\n    {\n      id: 'deploy-1',\n      typeLabel: '\uD68C\uC120\uACF5\uC0AC',\n      text: '\uC11C\uCD08 IDC \uAD11\uCF00\uC774\uBE14 \uC778\uC785 \uBC0F \uC120\uB85C \uC774\uC911\uD654 \uACF5\uC0AC',\n      time: '\uB0B4\uC77C 09:00',\n    },\n  ]\n\n  if (!open) return null\n\n  return (\n    <StnAlertCenterPanel\n      size=\"md\"\n      defaultTab=\"error\"\n      titleOverflow=\"ellipsis\"  // \uC81C\uBAA9: \uB9D0\uC904\uC784\uD45C (...)\n      descOverflow=\"marquee\"    // \uB0B4\uC6A9: \uC804\uAD11\uD310 \uD758\uB7EC\uAC00\uAE30\n      alerts={alerts}\n      workItems={workItems}\n      deployItems={deployItems}\n      onClose={() => setOpen(false)}\n      onMarkAllAsRead={() => console.log('\uBAA8\uB450 \uC77D\uC74C')}\n      onManageSettings={() => console.log('\uC124\uC815 \uD398\uC774\uC9C0 \uC774\uB3D9')}\n      onItemClick={(item) => console.log('\uC54C\uB9BC \uC0C1\uC138 \uD074\uB9AD:', item)}\n    />\n  )\n}";
+declare const STN_ALERT_CENTER_USAGE_HTML = "<!-- STN Alert Center \u2014 \uD328\uB110 \uD06C\uAE30(md) + \uD0C0\uC774\uD2C0(ellipsis) + \uB0B4\uC6A9(marquee) -->\n<aside class=\"stn-alert-center md title-ellipsis desc-marquee\" data-stn-alert-center>\n  <!-- 1. Header (\uD0C0\uC774\uD2C0 \u00B7 \uC54C\uB9BC \uCE74\uC6B4\uD2B8 \u00B7 \uD0ED \uC138\uADF8\uBA3C\uD2B8 \u00B7 \uC81C\uC5B4 \uBC84\uD2BC) -->\n  <header class=\"stn-alert-center__header\">\n    <div class=\"stn-alert-center__header-left\">\n      <span class=\"stn-icon stn-icon--bell\" aria-hidden=\"true\"></span>\n      <h2 class=\"stn-alert-center__title\">\uC54C\uB9BC\uC13C\uD130</h2>\n      <span class=\"stn-chip stn-chip--pill sm stn-chip--subtle stn-chip--primary\">6</span>\n    </div>\n\n    <!-- \uD0ED \uC804\uD658 \uC138\uADF8\uBA3C\uD2B8 \uBC84\uD2BC -->\n    <nav class=\"stn-segmented md\" aria-label=\"\uC54C\uB9BC \uAD6C\uBD84\">\n      <div class=\"stn-segmented__list\" role=\"tablist\">\n        <button type=\"button\" role=\"tab\" aria-selected=\"true\" class=\"stn-segmented__item is-selected\">\uC7A5\uC560</button>\n        <button type=\"button\" role=\"tab\" aria-selected=\"false\" class=\"stn-segmented__item\">\uC791\uC5C5</button>\n        <button type=\"button\" role=\"tab\" aria-selected=\"false\" class=\"stn-segmented__item\">\uACF5\uC0AC</button>\n      </div>\n    </nav>\n\n    <!-- \uC6B0\uCE21 \uC81C\uC5B4 \uC561\uC158 -->\n    <div class=\"stn-alert-center__header-right\">\n      <button type=\"button\" class=\"stn-btn stn-btn--text sm\">\n        <span class=\"stn-icon stn-icon--check-circle\" aria-hidden=\"true\"></span>\n        <span>\uBAA8\uB450 \uC77D\uC74C</span>\n      </button>\n      <div class=\"stn-alert-center__divider\" aria-hidden=\"true\"></div>\n      <button type=\"button\" class=\"stn-btn stn-btn--text sm stn-btn--icon-only\" aria-label=\"\uB2EB\uAE30\">\n        <span class=\"stn-icon stn-icon--x\" aria-hidden=\"true\"></span>\n      </button>\n    </div>\n  </header>\n\n  <!-- 2. Notification List (\uC2A4\uD06C\uB864 \uC601\uC5ED) -->\n  <div class=\"stn-alert-center__list-wrap\">\n    <ul class=\"stn-alert-center__list\">\n      <!-- \uC54C\uB9BC \uCE74\uB4DC 1 (Critical \uB4F1\uAE09 / \uBBF8\uD655\uC778) -->\n      <li>\n        <article class=\"stn-card elevated md interactive stn-alert-card\">\n          <div class=\"stn-alert-card__row\">\n            <span class=\"stn-icon stn-alert-card__icon\" style=\"color: var(--stn-grade-critical, var(--stn-primary));\"></span>\n            <div class=\"stn-alert-card__body\">\n              <div class=\"stn-alert-card__header-line\">\n                <span class=\"stn-chip stn-chip--pill sm stn-chip--filled stn-chip--critical\">CR</span>\n                <span class=\"stn-alert-card__title ellipsis\" title=\"Ping \uC218\uC9D1 \uC7A5\uC560\">\n                  <span class=\"stn-alert-card__text-inner\">Ping \uC218\uC9D1 \uC7A5\uC560</span>\n                </span>\n              </div>\n              <div class=\"stn-alert-card__desc-line\">\n                <span class=\"stn-alert-card__desc marquee\" title=\"101\uACBD\uBE44\uB2E8_UPS 10.15.71.161 / 101\uACBD\uBE44\uB2E8\">\n                  <span class=\"stn-alert-card__text-inner\">101\uACBD\uBE44\uB2E8_UPS 10.15.71.161 / 101\uACBD\uBE44\uB2E8</span>\n                </span>\n                <span class=\"stn-chip stn-chip--pill sm stn-chip--subtle stn-chip--critical stn-alert-card__time-chip\">\n                  \uBC1C\uC0DD\uC2DC\uAC04: 2026-05-29 14:23\n                </span>\n              </div>\n            </div>\n            <div class=\"stn-alert-card__meta\">\n              <time class=\"stn-alert-card__time\">11\uBD84 \uC804</time>\n              <span class=\"stn-alert-card__dot stn-alert-card__dot--critical\" aria-label=\"\uC77D\uC9C0 \uC54A\uC74C\"></span>\n            </div>\n          </div>\n        </article>\n      </li>\n\n      <!-- \uC54C\uB9BC \uCE74\uB4DC 2 (Major \uB4F1\uAE09 / \uAE34 \uD14D\uC2A4\uD2B8 \uC624\uBC84\uD50C\uB85C\uC6B0 \uC0D8\uD50C) -->\n      <li>\n        <article class=\"stn-card elevated md interactive stn-alert-card\">\n          <div class=\"stn-alert-card__row\">\n            <span class=\"stn-icon stn-alert-card__icon\" style=\"color: var(--stn-grade-major, var(--stn-primary));\"></span>\n            <div class=\"stn-alert-card__body\">\n              <div class=\"stn-alert-card__header-line\">\n                <span class=\"stn-chip stn-chip--pill sm stn-chip--filled stn-chip--major\">MJ</span>\n                <span class=\"stn-alert-card__title ellipsis\" title=\"\uC778\uD130\uD398\uC774\uC2A4 OperStatus \uB2E4\uC6B4 (\uD3EC\uD2B8 Te1/0/24 \uB9C1\uD06C \uC21C\uB2E8 \uBC0F \uC790\uB3D9 \uC6B0\uD68C \uACBD\uB85C \uC808\uCCB4 \uC2E4\uD328)\">\n                  <span class=\"stn-alert-card__text-inner\">\uC778\uD130\uD398\uC774\uC2A4 OperStatus \uB2E4\uC6B4 (\uD3EC\uD2B8 Te1/0/24 \uB9C1\uD06C \uC21C\uB2E8 \uBC0F \uC790\uB3D9 \uC6B0\uD68C \uACBD\uB85C \uC808\uCCB4 \uC2E4\uD328)</span>\n                </span>\n              </div>\n              <div class=\"stn-alert-card__desc-line\">\n                <span class=\"stn-alert-card__desc marquee\" title=\"\uC218\uC0AC\uC9C0\uC6D0\uCCAD\uC0AC_\uC5C5\uBB34\uB9DD L3(Stack)#2 50.52.41.2 / \uC548\uBCF4\uC218\uC0AC\uACFC \uC885\uD569\uC0C1\uD669\uC2E4 / \uB300\uC5ED\uD3ED \uC784\uACC4\uCE58 95% \uCD08\uACFC \uAC10\uC9C0\">\n                  <span class=\"stn-alert-card__text-inner\">\uC218\uC0AC\uC9C0\uC6D0\uCCAD\uC0AC_\uC5C5\uBB34\uB9DD L3(Stack)#2 50.52.41.2 / \uC548\uBCF4\uC218\uC0AC\uACFC \uC885\uD569\uC0C1\uD669\uC2E4 / \uB300\uC5ED\uD3ED \uC784\uACC4\uCE58 95% \uCD08\uACFC \uAC10\uC9C0</span>\n                </span>\n              </div>\n            </div>\n            <div class=\"stn-alert-card__meta\">\n              <time class=\"stn-alert-card__time\">3\uC77C \uC804</time>\n              <span class=\"stn-alert-card__dot stn-alert-card__dot--major\" aria-label=\"\uC77D\uC9C0 \uC54A\uC74C\"></span>\n            </div>\n          </div>\n        </article>\n      </li>\n    </ul>\n  </div>\n\n  <!-- 3. Footer (\uD558\uB2E8 \uC124\uC815 \uAD00\uB9AC \uB9C1\uD06C) -->\n  <footer class=\"stn-alert-center__footer\">\n    <button type=\"button\" class=\"stn-alert-center__footer-link\">\n      <span>\uC54C\uB9BC \uC124\uC815 \uAD00\uB9AC</span>\n      <span class=\"stn-icon stn-icon--chevron-right\" aria-hidden=\"true\"></span>\n    </button>\n  </footer>\n</aside>";
 
-export { STN_ALERT_CENTER_DEMO_ALERTS, STN_ALERT_CENTER_DEMO_DEPLOY, STN_ALERT_CENTER_DEMO_WORK, STN_ALERT_CENTER_INTEGRATION_USAGE, STN_ALERT_CENTER_INTRO, STN_ALERT_CENTER_TABS, STN_ALERT_CENTER_TAB_IDS, STN_ALERT_CENTER_USAGE, STN_ALERT_CENTER_USAGE_HTML, STN_GNB_ALERT_INTEGRATION_USAGE, type StnAlertCenterAlertItem, type StnAlertCenterSize, type StnAlertCenterTab, type StnAlertCenterWorkItem };
+export { STN_ALERT_CENTER_DEMO_ALERTS, STN_ALERT_CENTER_DEMO_DEPLOY, STN_ALERT_CENTER_DEMO_WORK, STN_ALERT_CENTER_INTEGRATION_USAGE, STN_ALERT_CENTER_INTRO, STN_ALERT_CENTER_TABS, STN_ALERT_CENTER_TAB_IDS, STN_ALERT_CENTER_USAGE, STN_ALERT_CENTER_USAGE_HTML, STN_GNB_ALERT_INTEGRATION_USAGE, type StnAlertCenterAlertItem, type StnAlertCenterSize, type StnAlertCenterTab, type StnAlertCenterTextOverflow, type StnAlertCenterWorkItem };

package/dist/data/stnAlertCenter.js

@@ -9,7 +9,7 @@ import {
   STN_ALERT_CENTER_USAGE,
   STN_ALERT_CENTER_USAGE_HTML,
   STN_GNB_ALERT_INTEGRATION_USAGE
-} from "../chunk-ZI6EF4XD.js";
+} from "../chunk-2WKT7X65.js";
 export {
   STN_ALERT_CENTER_DEMO_ALERTS,
   STN_ALERT_CENTER_DEMO_DEPLOY,

package/dist/data/stnBreadcrumb.js

@@ -5,9 +5,9 @@ import {
   STN_BREADCRUMB_ICON_SRC,
   STN_BREADCRUMB_INTRO,
   STN_BREADCRUMB_PARTS
-} from "../chunk-OMCBVK57.js";
-import "../chunk-V7HD6SBG.js";
-import "../chunk-XZ3JOUX2.js";
+} from "../chunk-SKZOEF3H.js";
+import "../chunk-XEG4WDUD.js";
+import "../chunk-EQTZA7I2.js";
 export {
   STN_BREADCRUMB_DEMO_ITEMS,
   STN_BREADCRUMB_FIGMA,

package/dist/data/stnDatePicker.js

@@ -8,8 +8,8 @@ import {
   STN_DATE_PICKER_USAGE,
   STN_DATE_PICKER_USAGE_HTML,
   STN_DATE_PICKER_WEEKDAYS
-} from "../chunk-S4YA4H2S.js";
-import "../chunk-THCCTVUM.js";
+} from "../chunk-YBNEQ5LB.js";
+import "../chunk-5F63CMM7.js";
 export {
   STN_DATE_PICKER_INTRO,
   STN_DATE_PICKER_KO_NAME,

package/dist/data/stnDateRangeField.d.ts

@@ -2,7 +2,7 @@
  * Pub datetime range field — Infomap `input` (Figma 40000042:186907)
  * @see common.css `.date_box` · Ant Design RangePicker
  */
-type StnDateRangeFieldSize = 'sm' | 'md' | 'lg' | 'S' | 'M' | 'L';
+type StnDateRangeFieldSize = 'sm' | 'md' | 'lg' | 'xl' | 'S' | 'M' | 'L';
 declare const STN_DATE_RANGE_FIELD_FIGMA = "40000042:186907";
 /** DS·Figma 영문명 — Date range field (datetime 포함 시 DateTime range field) */
 declare const STN_DATE_RANGE_FIELD_NAME = "Date range field";

package/dist/data/stnDateRangeField.js

@@ -8,7 +8,7 @@ import {
   STN_DATE_RANGE_FIELD_USAGE,
   formatStnDateRangeFieldValue,
   parseStnDateRangeFieldValue
-} from "../chunk-THCCTVUM.js";
+} from "../chunk-5F63CMM7.js";
 export {
   STN_DATE_RANGE_FIELD_DEMO,
   STN_DATE_RANGE_FIELD_FIGMA,

package/dist/data/stnDropdown.d.ts

@@ -4,7 +4,7 @@
  */
 type StnDropdownMode = 'native' | 'menu';
 type StnDropdownSize = 'sm' | 'md' | 'lg' | 'xl';
-type StnDropdownVariant = 'outline' | 'standard' | 'filled';
+type StnDropdownVariant = 'outline' | 'standard' | 'filled' | 'transparent';
 type StnDropdownHelperTextPosition = 'top' | 'bottom' | 'left' | 'right';
 type StnDropdownDirection = 'down' | 'up';
 /** native: select에 class 직접 · wrapper: div.stn-dropdown > select.selected */

package/dist/data/stnDropdown.js

@@ -7,7 +7,7 @@ import {
   STN_DROPDOWN_MENU_USAGE,
   STN_DROPDOWN_SIZE_ROWS,
   STN_DROPDOWN_USAGE
-} from "../chunk-WRGBYWRV.js";
+} from "../chunk-LKVTW54X.js";
 export {
   STN_DROPDOWN_HTML,
   STN_DROPDOWN_HTML_COUNTS,

package/dist/data/stnHeader.d.ts

@@ -19,8 +19,8 @@ declare const STN_HEADER_VARIANT_ROWS: readonly [{
     readonly layout: "Left title · Right";
     readonly example: "Page title + Breadcrumb";
 }];
-declare const STN_HEADER_USAGE = "import {\n  StnSystemChip,\n  StnHeader,\n  StnBreadcrumb,\n  StnButton,\n  StnHeaderTitle,\n  StnHeaderToolbar,\n  StnIcon,\n} from '@stn-uiux/pub-ui-react'\n\n<StnHeader>\n  <StnHeader.Left>\n    <StnSystemChip items={[{ id: 'c', tone: 'critical', count: 0 }, ...]} />\n  </StnHeader.Left>\n  <StnHeader.Center>\n    <StnHeaderTitle>\uD1B5\uD569 \uAD00\uC81C \uC194\uB8E8\uC158</StnHeaderTitle>\n  </StnHeader.Center>\n  <StnHeader.Right>\n    <StnHeaderToolbar>\n      <StnButton size=\"M\" variant=\"ghost\" icon={<StnIcon name=\"fill/system_status_on\" size={16} className=\"stn-icon--color\" />}>\n        \uC2DC\uC2A4\uD15C \uAC10\uC2DC\n      </StnButton>\n      <StnButton size=\"M\" variant=\"ghost\" icon={<StnIcon name=\"line/sun-high\" size={16} />}>\n        \uB77C\uC774\uD2B8\uBAA8\uB4DC\n      </StnButton>\n    </StnHeaderToolbar>\n  </StnHeader.Right>\n</StnHeader>";
-declare const STN_HEADER_USAGE_HTML = "<!-- Left \u00B7 Center \u00B7 Right \uC2AC\uB86F \uC870\uB9BD -->\n<header class=\"stn-header\">\n  <div class=\"stn-header__left\">\n    <!-- StnSystemChip / .stn-system-chip -->\n  </div>\n  <div class=\"stn-header__center\">\n    <div class=\"stn-header-title\">\n      <span class=\"stn-header-title__text\">\uD1B5\uD569 \uAD00\uC81C \uC194\uB8E8\uC158</span>\n    </div>\n  </div>\n  <div class=\"stn-header__right\">\n    <div class=\"stn-header-toolbar\">\n      <!-- system monitor \u00B7 theme buttons -->\n    </div>\n  </div>\n</header>";
+declare const STN_HEADER_USAGE = "import {\n  StnStatus,\n  StnHeader,\n  StnBreadcrumb,\n  StnButton,\n  StnHeaderTitle,\n  StnHeaderToolbar,\n  StnIcon,\n} from '@stn-uiux/pub-ui-react'\n\n<StnHeader>\n  <StnHeader.Left>\n    <StnStatus.DotGroup items={[{ id: 'c', state: 'critical', count: 0 }, ...]} />\n  </StnHeader.Left>\n  <StnHeader.Center>\n    <StnHeaderTitle>\uD1B5\uD569 \uAD00\uC81C \uC194\uB8E8\uC158</StnHeaderTitle>\n  </StnHeader.Center>\n  <StnHeader.Right>\n    <StnHeaderToolbar>\n      <StnButton size=\"M\" variant=\"ghost\" icon={<StnIcon name=\"fill/system_status_on\" size={16} className=\"stn-icon--color\" />}>\n        \uC2DC\uC2A4\uD15C \uAC10\uC2DC\n      </StnButton>\n      <StnButton size=\"M\" variant=\"ghost\" icon={<StnIcon name=\"line/sun-high\" size={16} />}>\n        \uB77C\uC774\uD2B8\uBAA8\uB4DC\n      </StnButton>\n    </StnHeaderToolbar>\n  </StnHeader.Right>\n</StnHeader>";
+declare const STN_HEADER_USAGE_HTML = "<!-- Left \u00B7 Center \u00B7 Right \uC2AC\uB86F \uC870\uB9BD -->\n<header class=\"stn-header\">\n  <div class=\"stn-header__left\">\n    <!-- StnStatus.DotGroup / .stn-status-dot-group -->\n  </div>\n  <div class=\"stn-header__center\">\n    <div class=\"stn-header-title\">\n      <span class=\"stn-header-title__text\">\uD1B5\uD569 \uAD00\uC81C \uC194\uB8E8\uC158</span>\n    </div>\n  </div>\n  <div class=\"stn-header__right\">\n    <div class=\"stn-header-toolbar\">\n      <!-- system monitor \u00B7 theme buttons -->\n    </div>\n  </div>\n</header>";
 declare const STN_SYSTEM_CHIP_DEMO: ({
     id: string;
     tone: "critical";

package/dist/data/stnHeader.js

@@ -6,9 +6,9 @@ import {
   STN_HEADER_USAGE_HTML,
   STN_HEADER_VARIANT_ROWS,
   STN_SYSTEM_CHIP_DEMO
-} from "../chunk-GR76L7M7.js";
-import "../chunk-V7HD6SBG.js";
-import "../chunk-XZ3JOUX2.js";
+} from "../chunk-JPILTFLI.js";
+import "../chunk-XEG4WDUD.js";
+import "../chunk-EQTZA7I2.js";
 export {
   STN_HEADER_INTRO,
   STN_HEADER_PAGE_TITLE_DEMO,

package/dist/data/stnLayout.d.ts

@@ -20,7 +20,7 @@ declare const STN_LAYOUT_LIST_LAYER_TABS: {
     id: StnLayoutListLayerTabId;
     label: string;
 }[];
-declare const STN_LAYOUT_LIST_VIEW_USAGE = "import {\n  ListPageScaffold,\n  StnHeader,\n  StnSideNavigation,\n  StnSearchRequirementBar,\n  StnTable,\n  StnPagination,\n  StnButton,\n} from '@stn-uiux/pub-ui-react'\n\nexport function InterfaceListPage() {\n  return (\n    <ListPageScaffold\n      shell=\"layer\"\n      lnbSide=\"left\"\n      gnb={<StnSideNavigation />}\n      header={<StnHeader variant=\"page\" />}\n      contentModifiers={['has_lnb', 'has_sch']}\n      search={\n        <StnSearchRequirementBar>{/* Fields \u00B7 SearchButton */}</StnSearchRequirementBar>\n      }\n    >\n      <StnTable\n        summary=\"\uCD1D 128\uAC1C (1 to 20)\"\n        footerCenter={<StnPagination page={1} count={8} />}\n        footerRight={\n          <>\n            <StnButton size=\"M\">\uB4F1\uB85D</StnButton>\n            <StnButton size=\"M\" variant=\"ghost\">\uC218\uC815</StnButton>\n          </>\n        }\n      >\n        <StnTable.Grid>{/* \u2026 */}</StnTable.Grid>\n      </StnTable>\n    </ListPageScaffold>\n  )\n}";
+declare const STN_LAYOUT_LIST_VIEW_USAGE = "import {\n  ListPageScaffold,\n  StnHeader,\n  StnSideNavigation,\n  StnSearchRequirementBar,\n  StnTable,\n  StnPagination,\n  StnButton,\n} from '@stn-uiux/pub-ui-react'\n\nexport function InterfaceListPage() {\n  return (\n    <ListPageScaffold\n      shell=\"layer\"\n      lnbSide=\"left\"\n      gnb={<StnSideNavigation />}\n      header={<StnHeader variant=\"page\" />}\n      contentModifiers={['has_lnb', 'has_sch']}\n      search={\n        <StnSearchRequirementBar>{/* Fields \u00B7 SearchButton */}</StnSearchRequirementBar>\n      }\n    >\n      <StnTable\n        summary=\"\uCD1D 128\uAC1C (1 to 20)\"\n        footerCenter={<StnPagination page={1} count={8} />}\n        footerRight={\n          <>\n            <StnButton size=\"md\">\uB4F1\uB85D</StnButton>\n            <StnButton size=\"md\" variant=\"ghost\">\uC218\uC815</StnButton>\n          </>\n        }\n      >\n        <StnTable.Grid>{/* \u2026 */}</StnTable.Grid>\n      </StnTable>\n    </ListPageScaffold>\n  )\n}";
 declare const STN_LAYOUT_MAP_DASHBOARD_INTRO = "\uB300\uC2DC\uBCF4\uB4DC\uB294 L0 \uBC30\uACBD \u00B7 L1(header \uD06C\uB86C + content \uBCF8\uBB38 \uB2E8 \uD558\uB098) \u00B7 L2 \uBAA8\uB2EC\uC785\uB2C8\uB2E4. \uBCF8\uBB38\uC740 `layer1` \uC2AC\uB86F\uC774 \uC544\uB2C8\uB77C `left`/`right`/`children`\uC73C\uB85C \uC870\uB9BD\uD569\uB2C8\uB2E4. `DashboardPageScaffold` (type=\"map\" | \"topology\" | \"widget-grid\").";
 /** Map / Dashboard 문서 탭 — List view와 동일 층 모델 */
 type StnLayoutMapLayerTabId = StnLayoutListLayerTabId;

package/dist/data/stnLayout.js

@@ -27,7 +27,7 @@ import {
   applyLnbSideToModifiers,
   pubContentAreaClasses,
   pubLayoutRegionClass
-} from "../chunk-7ASY5YJ6.js";
+} from "../chunk-36BAGMYT.js";
 export {
   STN_ALERT_CENTER_PAGE_SCAFFOLD_USAGE,
   STN_LAYER_SHELL_USAGE,

package/dist/data/stnPackageVersion.d.ts

@@ -1,5 +1,5 @@
 /** Package version constants */
-declare const STN_UI_VERSION = "0.1.57";
-declare const STN_UI_VERSION_LABEL = "v0.1.57";
+declare const STN_UI_VERSION = "0.1.58";
+declare const STN_UI_VERSION_LABEL = "v0.1.58";
 
 export { STN_UI_VERSION, STN_UI_VERSION_LABEL };

package/dist/data/stnPackageVersion.js

@@ -1,7 +1,7 @@
 import {
   STN_UI_VERSION,
   STN_UI_VERSION_LABEL
-} from "../chunk-QT4HHVZH.js";
+} from "../chunk-XPARWRVD.js";
 export {
   STN_UI_VERSION,
   STN_UI_VERSION_LABEL

package/dist/data/stnPopup.d.ts

@@ -43,27 +43,13 @@ declare const STN_POPUP_SIZES: readonly [{
     readonly width: "1200px";
     readonly token: "--stn-pop-width-xl";
     readonly usage: "대형 데이터 테이블 · 다열 프로비저닝 폼 · 대형 상세";
-}, {
-    readonly id: "xxl";
-    readonly label: "XXL";
-    readonly className: "stn-pop--xxl";
-    readonly width: "1440px";
-    readonly token: "--stn-pop-width-xxl";
-    readonly usage: "대시보드 축약 뷰 · 대형 모니터링/관제 팝업";
-}, {
-    readonly id: "2xl";
-    readonly label: "2XL";
-    readonly className: "stn-pop--2xl";
-    readonly width: "1600px";
-    readonly token: "--stn-pop-width-2xl";
-    readonly usage: "실시간 관제 상세 · 대규모 토폴로지 매핑 팝업";
 }, {
     readonly id: "full";
-    readonly label: "Full bleed";
+    readonly label: "Full";
     readonly className: "stn-pop--full";
     readonly width: "calc(100vw − 40px)";
     readonly token: "(viewport − gutter)";
-    readonly usage: "배치 장비·전체 화면 테이블 (1780px 등 → full 권장)";
+    readonly usage: "전체 화면 대시보드 설정 및 토폴로지 매핑";
 }];
 type StnPopupSizeId = (typeof STN_POPUP_SIZES)[number]['id'];
 /** 레거시 `content.css` 고정 px → 권장 modifier (마이그레이션 참고) */
@@ -75,23 +61,23 @@ declare const STN_POPUP_LEGACY_WIDTH_SAMPLES: readonly [{
 }, {
     readonly popClass: "template_history_pop";
     readonly widthPx: 1565;
-    readonly suggested: "2xl";
+    readonly suggested: "full";
 }, {
     readonly popClass: "real_time_view_pop";
     readonly widthPx: 1500;
-    readonly suggested: "2xl";
+    readonly suggested: "full";
 }, {
     readonly popClass: "select_equip_pop";
     readonly widthPx: 1412;
-    readonly suggested: "2xl";
+    readonly suggested: "xl";
 }, {
     readonly popClass: "equip_regist_pop";
     readonly widthPx: 1070;
-    readonly suggested: "xxl";
+    readonly suggested: "xl";
 }, {
     readonly popClass: "fail_measure_pop";
     readonly widthPx: 1100;
-    readonly suggested: "xxl";
+    readonly suggested: "xl";
 }];
 declare const STN_POPUP_PARTS: readonly [{
     readonly part: "Stack";
@@ -112,23 +98,23 @@ declare const STN_POPUP_PARTS: readonly [{
 }, {
     readonly part: "Panel";
     readonly selector: ".stn-pop__panel";
-    readonly note: "gray.850 · gray.700 border · radius 10 · shadow · overflow";
+    readonly note: "surface · border · radius 8 · shadow · overflow";
 }, {
     readonly part: "Header";
     readonly selector: ".stn-pop__head";
-    readonly note: "48px · h4 18 SemiBold · theme title token";
+    readonly note: "56px · h4 16 SemiBold · theme title token";
 }, {
     readonly part: "Close";
     readonly selector: ".stn-pop__close";
-    readonly note: "StnButton icon=\"line/x\" size=xsmall (16) · top 10 / right 8";
+    readonly note: "StnButton icon=\"line/x\" size=sm · top 14 / right 16";
 }, {
     readonly part: "Body";
     readonly selector: ".stn-pop__body";
-    readonly note: "padding 0 8px · overflow auto · 화면별 슬롯";
+    readonly note: "padding 20px · overflow auto · 화면별 슬롯";
 }, {
     readonly part: "Actions";
     readonly selector: ".stn-pop__actions";
-    readonly note: "64px · center · gap 8 · StnButton primary→secondary";
+    readonly note: "56px · right/center · gap 8 · StnButton";
 }];
 declare const STN_POPUP_TOKEN_ROWS: readonly [{
     readonly token: "--stn-pop-gutter";
@@ -140,43 +126,35 @@ declare const STN_POPUP_TOKEN_ROWS: readonly [{
     readonly usage: ".stn-pop--xs · 단순 확인/얼럿";
 }, {
     readonly token: "--stn-pop-width-sm";
-    readonly resolvesTo: "520px";
+    readonly resolvesTo: "480px";
     readonly usage: ".stn-pop--sm · 1~2개 입력 폼";
 }, {
     readonly token: "--stn-pop-width-md";
-    readonly resolvesTo: "680px";
+    readonly resolvesTo: "640px";
     readonly usage: ".stn-pop--md · 기본 표준";
 }, {
     readonly token: "--stn-pop-width-lg";
-    readonly resolvesTo: "920px";
-    readonly usage: ".stn-pop--lg · 2열 폼/상세";
+    readonly resolvesTo: "960px";
+    readonly usage: ".stn-pop--lg · 2단 분할/상세";
 }, {
     readonly token: "--stn-pop-width-xl";
     readonly resolvesTo: "1200px";
     readonly usage: ".stn-pop--xl · 대형 테이블/그리드";
-}, {
-    readonly token: "--stn-pop-width-xxl";
-    readonly resolvesTo: "1440px";
-    readonly usage: ".stn-pop--xxl · 대시보드/관제";
-}, {
-    readonly token: "--stn-pop-width-2xl";
-    readonly resolvesTo: "1600px";
-    readonly usage: ".stn-pop--2xl · 초대형 토폴로지";
 }, {
     readonly token: ".stn-pop--full";
     readonly resolvesTo: "100vw − gutter×2";
-    readonly usage: "full-bleed · alias --full-bleed";
+    readonly usage: "전체화면 모달";
 }, {
     readonly token: "--stn-pop-max-height";
     readonly resolvesTo: "min(85dvh, …)";
     readonly usage: ".stn-pop 본문 스크롤";
 }, {
     readonly token: "--stn-pop-header-height";
-    readonly resolvesTo: "48px";
+    readonly resolvesTo: "56px";
     readonly usage: ".stn-pop__head min-height";
 }, {
     readonly token: "--stn-pop-footer-height";
-    readonly resolvesTo: "64px";
+    readonly resolvesTo: "56px";
     readonly usage: ".stn-pop__actions";
 }, {
     readonly token: "--stn-pop-close-size";

package/dist/data/stnPopup.js

@@ -12,7 +12,7 @@ import {
   STN_POPUP_USAGE,
   STN_POPUP_USAGE_HTML,
   resolveStnPopupSizeFromWidth
-} from "../chunk-Q3W7QA7N.js";
+} from "../chunk-75GHU6VI.js";
 export {
   STN_POPUP_INTRO,
   STN_POPUP_INVENTORY_ROWS,

package/dist/data/stnScroll.d.ts

@@ -26,6 +26,6 @@ declare const STN_SCROLL_SPEC: readonly [{
     readonly note: "overflow";
 }];
 declare const STN_SCROLL_USAGE = "import { StnScroll, StnTree } from '@stn-uiux/pub-ui-react'\nimport { STN_TREE_DEMO } from '@stn-uiux/pub-ui/data/stnTree'\n\n<StnScroll orientation=\"vertical\" style={{ height: 220 }}>\n  <StnTree heading=\"FOLDER STRUCTURE\" nodes={STN_TREE_DEMO} />\n</StnScroll>";
-declare const STN_SCROLL_USAGE_HTML = "<!-- Pub \uACF5\uD1B5 \uC2A4\uD06C\uB864 \uC601\uC5ED \u00B7 stn-scroll.css -->\n<div class=\"stn-scroll stn-scroll--vertical\" style=\"height: 220px\" data-stn-scroll=\"vertical\">\n  <!-- \uC2A4\uD06C\uB864\uB418\uB294 \uBCF8\uBB38 (\uD2B8\uB9AC \u00B7 \uBAA9\uB85D \uB4F1) -->\n  <div class=\"stn-section-side\">\n    <ul class=\"stn-tree\">\u2026</ul>\n  </div>\n</div>\n\n<!-- \uAC00\uB85C -->\n<div class=\"stn-scroll stn-scroll--horizontal\" data-stn-scroll=\"horizontal\">\u2026</div>\n\n<!-- \uC591\uBC29\uD5A5 -->\n<div class=\"stn-scroll stn-scroll--both\" data-stn-scroll=\"both\">\u2026</div>";
+declare const STN_SCROLL_USAGE_HTML = "<!-- Pub \uACF5\uD1B5 \uC2A4\uD06C\uB864 \uC601\uC5ED \u00B7 stn-scroll.css -->\n<div class=\"stn-scroll vertical\" style=\"height: 220px\" data-stn-scroll=\"vertical\">\n  <!-- \uC2A4\uD06C\uB864\uB418\uB294 \uBCF8\uBB38 (\uD2B8\uB9AC \u00B7 \uBAA9\uB85D \uB4F1) -->\n  <div class=\"stn-section-side\">\n    <ul class=\"stn-tree\">\u2026</ul>\n  </div>\n</div>\n\n<!-- \uAC00\uB85C -->\n<div class=\"stn-scroll horizontal\" data-stn-scroll=\"horizontal\">\u2026</div>\n\n<!-- \uC591\uBC29\uD5A5 -->\n<div class=\"stn-scroll both\" data-stn-scroll=\"both\">\u2026</div>";
 
 export { STN_SCROLL_FIGMA, STN_SCROLL_INTRO, STN_SCROLL_SPEC, STN_SCROLL_USAGE, STN_SCROLL_USAGE_HTML };

package/dist/data/stnScroll.js

@@ -4,7 +4,7 @@ import {
   STN_SCROLL_SPEC,
   STN_SCROLL_USAGE,
   STN_SCROLL_USAGE_HTML
-} from "../chunk-XNGYRPZI.js";
+} from "../chunk-CHJATVOT.js";
 export {
   STN_SCROLL_FIGMA,
   STN_SCROLL_INTRO,

package/dist/data/stnSearchRequirement.d.ts

@@ -9,12 +9,12 @@ declare const STN_SEARCH_REQUIREMENT_KO_NAME = "\uAC80\uC0C9\uC870\uAC74";
 declare const STN_SEARCH_REQUIREMENT_INTRO = "\uBAA9\uB85D \u00B7 \uC0C1\uC138 \uC870\uD68C \uD654\uBA74 \uC0C1\uB2E8\uC5D0\uC11C \uC870\uAC74 \uD544\uD130\uB9C1\uACFC \uAC80\uC0C9\uC744 \uC2E4\uD589\uD558\uB294 \uAC80\uC0C9\uBC14 \uD328\uD134\uC785\uB2C8\uB2E4. \uD14D\uC2A4\uD2B8 \uC785\uB825, \uB4DC\uB86D\uB2E4\uC6B4, \uB0A0\uC9DC \uC120\uD0DD\uACFC \uC5D1\uC140 \uB2E4\uC6B4\uB85C\uB4DC \uBC84\uD2BC\uC744 \uC790\uC720\uB86D\uAC8C \uC870\uD569\uD560 \uC218 \uC788\uC2B5\uB2C8\uB2E4.";
 declare const STN_SEARCH_REQUIREMENT_SPEC: readonly [{
     readonly property: "Shell padding (Default)";
-    readonly value: "8px 16px";
-    readonly note: "Figma py/px 표준";
+    readonly value: "16px";
+    readonly note: "상하좌우 16px 통일 표준";
 }, {
     readonly property: "Shell padding (Compact)";
-    readonly value: "6px 12px";
-    readonly note: "밀집형 바 (`density=\"compact\"`), gap 12px";
+    readonly value: "12px";
+    readonly note: "밀집형 바 (`density=\"compact\"` · `.compact`), 12px 통일";
 }, {
     readonly property: "Shell radius";
     readonly value: "8px";

package/dist/data/stnSearchRequirement.js

@@ -7,7 +7,7 @@ import {
   STN_SEARCH_REQUIREMENT_SPEC,
   STN_SEARCH_REQUIREMENT_USAGE,
   STN_SEARCH_REQUIREMENT_USAGE_HTML
-} from "../chunk-4C7ABT2K.js";
+} from "../chunk-AE4CKAEK.js";
 export {
   STN_SEARCH_REQUIREMENT_DEMO_FIELDS,
   STN_SEARCH_REQUIREMENT_FIGMA,

package/dist/data/stnSideNavItem.js

@@ -3,9 +3,9 @@ import {
   STN_SIDE_NAV_ITEM_INTRO,
   STN_SIDE_NAV_ITEM_STATES,
   STN_SIDE_NAV_SUB_ICON
-} from "../chunk-P5V6SFR7.js";
-import "../chunk-V7HD6SBG.js";
-import "../chunk-XZ3JOUX2.js";
+} from "../chunk-H4ZJQ5YW.js";
+import "../chunk-XEG4WDUD.js";
+import "../chunk-EQTZA7I2.js";
 export {
   STN_NAV_MENU_SUB_ICON,
   STN_SIDE_NAV_ITEM_INTRO,

package/dist/data/stnSizeSemantic.js

@@ -1,7 +1,7 @@
 import {
   STN_SIZE_SEMANTIC_INTRO,
   STN_SIZE_SEMANTIC_ROWS
-} from "../chunk-L7DYM4V7.js";
+} from "../chunk-2FHXIAM3.js";
 export {
   STN_SIZE_SEMANTIC_INTRO,
   STN_SIZE_SEMANTIC_ROWS

package/dist/data/stnStatus.d.ts

@@ -0,0 +1,11 @@
+type StnStatusDotState = 'up' | 'down' | 'critical' | 'major' | 'minor' | 'warning' | 'primary' | 'secondary' | 'success' | 'error' | 'info' | 'neutral' | string;
+type StnStatusFlowStepColor = 'primary' | 'secondary' | 'success' | 'error' | 'info' | 'neutral' | 'critical' | 'major' | 'minor' | 'warning' | string;
+type StnStatusFlowStep = {
+    key: string;
+    label: string;
+    color?: StnStatusFlowStepColor;
+    icon?: string;
+};
+declare const STN_STATUS_DEMO_STEPS: StnStatusFlowStep[];
+
+export { STN_STATUS_DEMO_STEPS, type StnStatusDotState, type StnStatusFlowStep, type StnStatusFlowStepColor };

package/dist/data/stnStatus.js

@@ -0,0 +1,7 @@
+import {
+  STN_STATUS_DEMO_STEPS
+} from "../chunk-SQJPE6HH.js";
+export {
+  STN_STATUS_DEMO_STEPS
+};
+//# sourceMappingURL=stnStatus.js.map

package/dist/data/stnStatus.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/data/stnSystemIcons.d.ts

@@ -27,7 +27,7 @@ declare function systemIconPublicPath(slug: string, ext?: StnSystemIconExt): str
 declare function systemIconSrc(slug: string, ext?: StnSystemIconExt): string;
 /**
  * Iconography slug → 런타임 src (Base64 Data URL 또는 폴백 경로).
- * - `line/home` · `fill/folder` · `3d/print` · `blank` …
+ * - `line/home` · `fill/folder` · `blank` …
  */
 declare function resolveSystemIconSrcFromName(name: string): string | null;
 

package/dist/data/stnSystemIcons.js

@@ -4,10 +4,10 @@ import {
   resolveSystemIconSrcFromName,
   systemIconPublicPath,
   systemIconSrc
-} from "../chunk-V7HD6SBG.js";
+} from "../chunk-XEG4WDUD.js";
 import {
   SYSTEM_ICON_DATA_URLS
-} from "../chunk-XZ3JOUX2.js";
+} from "../chunk-EQTZA7I2.js";
 export {
   STN_SYSTEM_ICON_INTRO,
   STN_SYSTEM_ICON_ROWS,

package/dist/data/stnSystemIconsData.generated.js

@@ -1,6 +1,6 @@
 import {
   SYSTEM_ICON_DATA_URLS
-} from "../chunk-XZ3JOUX2.js";
+} from "../chunk-EQTZA7I2.js";
 export {
   SYSTEM_ICON_DATA_URLS
 };

package/dist/data/stnTree.d.ts

@@ -17,7 +17,7 @@ declare const STN_TREE_INTRO = "LNB \uC0AC\uC774\uB4DC\uBC14 \uBC0F \uD31D\uC5C5
 /** Figma 40000040:102539 section-side tree content */
 declare const STN_TREE_DEMO: StnTreeDemoNode[];
 declare const STN_TREE_REACT_EXAMPLE = "import { StnSectionSide, StnTree } from '@stn-uiux/pub-ui-react'\n\n<StnSectionSide fill>\n  <StnTree\n    heading=\"FOLDER STRUCTURE\"\n    nodes={[\n      {\n        id: 'root',\n        label: 'Root',\n        kind: 'root',\n        children: [\n          { id: 'group', label: '\uADF8\uB8F9 \uC11C\uBC84', kind: 'folder', children: [\n            { id: 'srv-1', label: 'grid-pro', kind: 'server' },\n          ]},\n        ],\n      },\n    ]}\n    defaultExpandedIds={['root', 'group']}\n    defaultSelectedId=\"srv-1\"\n    onSelect={(id) => console.log(id)}\n  />\n</StnSectionSide>";
-declare const STN_TREE_USAGE_HTML = "<!-- StnSectionSide + StnTree \u00B7 stn-section-side.css \u00B7 stn-tree.css -->\n<aside class=\"stn-section-side stn-section-side--fill\">\n  <div class=\"stn-scroll stn-section-side__body stn-scroll--vertical\">\n    <div class=\"stn-tree\">\n      <p class=\"stn-tree__heading\">FOLDER STRUCTURE</p>\n      <div class=\"stn-tree__rows\" role=\"tree\">\n        <div class=\"stn-tree__row stn-tree__row--root\" data-depth=\"0\" role=\"treeitem\">\n          <span class=\"stn-tree__label\">Root</span>\n        </div>\n      </div>\n    </div>\n  </div>\n</aside>";
+declare const STN_TREE_USAGE_HTML = "<!-- StnSectionSide + StnTree \u00B7 stn-section-side.css \u00B7 stn-tree.css -->\n<aside class=\"stn-section-side stn-section-side--fill\">\n  <div class=\"stn-scroll stn-section-side__body vertical\">\n    <div class=\"stn-tree\">\n      <p class=\"stn-tree__heading\">FOLDER STRUCTURE</p>\n      <div class=\"stn-tree__rows\" role=\"tree\">\n        <div class=\"stn-tree__row stn-tree__row--root\" data-depth=\"0\" role=\"treeitem\">\n          <span class=\"stn-tree__label\">Root</span>\n        </div>\n      </div>\n    </div>\n  </div>\n</aside>";
 type StnTreePatternPlaygroundConfig = {
     heading: string;
     showHeading: boolean;

package/dist/data/stnTree.js

@@ -9,7 +9,7 @@ import {
   STN_TREE_SECTION_SIDE_FIGMA,
   STN_TREE_USAGE_HTML,
   describeTreePatternReact
-} from "../chunk-UPXSNRIJ.js";
+} from "../chunk-AOS3IX4T.js";
 export {
   STN_TREE_DEMO,
   STN_TREE_FIGMA,

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-export { STN_ALERT_CENTER_DEMO_ALERTS, STN_ALERT_CENTER_DEMO_DEPLOY, STN_ALERT_CENTER_DEMO_WORK, STN_ALERT_CENTER_INTEGRATION_USAGE, STN_ALERT_CENTER_INTRO, STN_ALERT_CENTER_TABS, STN_ALERT_CENTER_TAB_IDS, STN_ALERT_CENTER_USAGE, STN_ALERT_CENTER_USAGE_HTML, STN_GNB_ALERT_INTEGRATION_USAGE, StnAlertCenterAlertItem, StnAlertCenterSize, StnAlertCenterTab, StnAlertCenterWorkItem } from './data/stnAlertCenter.js';
+export { STN_ALERT_CENTER_DEMO_ALERTS, STN_ALERT_CENTER_DEMO_DEPLOY, STN_ALERT_CENTER_DEMO_WORK, STN_ALERT_CENTER_INTEGRATION_USAGE, STN_ALERT_CENTER_INTRO, STN_ALERT_CENTER_TABS, STN_ALERT_CENTER_TAB_IDS, STN_ALERT_CENTER_USAGE, STN_ALERT_CENTER_USAGE_HTML, STN_GNB_ALERT_INTEGRATION_USAGE, StnAlertCenterAlertItem, StnAlertCenterSize, StnAlertCenterTab, StnAlertCenterTextOverflow, StnAlertCenterWorkItem } from './data/stnAlertCenter.js';
 export { STN_HEADER_INTRO, STN_HEADER_PAGE_TITLE_DEMO, STN_HEADER_TOOLBAR_DEMO_ACTIONS, STN_HEADER_USAGE, STN_HEADER_USAGE_HTML, STN_HEADER_VARIANT_ROWS, STN_SYSTEM_CHIP_DEMO, StnHeaderGap, StnHeaderPadding, StnHeaderVariant } from './data/stnHeader.js';
 export { STN_INFOMAP_LOGO } from './data/stnBrand.js';
 export { STN_BREADCRUMB_DEMO_ITEMS, STN_BREADCRUMB_FIGMA, STN_BREADCRUMB_FIGMA_LIGHT, STN_BREADCRUMB_ICON_SRC, STN_BREADCRUMB_INTRO, STN_BREADCRUMB_PARTS, StnBreadcrumbDemoItem, StnBreadcrumbIconId } from './data/stnBreadcrumb.js';
@@ -62,5 +62,6 @@ export { STN_TYPE_SCALE_INTRO, STN_TYPE_SCALE_ROWS, StnTypeScaleCategory, StnTyp
 export { STN_FONT_FAMILY_ROWS, STN_FONT_SIZE_ROWS, STN_FONT_WEIGHT_ROWS, STN_LINE_HEIGHT_ROWS, STN_TYPOGRAPHY_PRIMITIVE_GROUPS, STN_TYPOGRAPHY_SEMANTIC_ROWS, StnTypographyPrimitiveRow, StnTypographySemanticRow, typographyPrimitivesToJson, typographySemanticsToJson } from './data/stnTypography.js';
 export { STN_CARD_INTRO, STN_CARD_PADDINGS, STN_CARD_RADII, STN_CARD_VARIANTS, StnCardPadding, StnCardRadius, StnCardVariant } from './data/stnCard.js';
 export { STN_ALERT_CENTER_DASHBOARD_USAGE, STN_ALERT_CENTER_DASHBOARD_WIDGETS, STN_WIDGET_APPEARANCE_ROWS, STN_WIDGET_CHART_SLOT_HTML, STN_WIDGET_CHART_SLOT_REACT, STN_WIDGET_DISABILITY_STATUS_DEMO, STN_WIDGET_FIGMA, STN_WIDGET_FIGMA_DARK, STN_WIDGET_FIGMA_DARK_URL, STN_WIDGET_FIGMA_SHELL_HTML, STN_WIDGET_FIGMA_SHELL_REACT, STN_WIDGET_FIGMA_URL, STN_WIDGET_GRADE_ROW_DEMO, STN_WIDGET_HEADER_HTML, STN_WIDGET_HEADER_REACT, STN_WIDGET_INTRO, STN_WIDGET_KINDS, STN_WIDGET_SHELL_ROWS, STN_WIDGET_TOP5_BARS_DEMO, STN_WIDGET_TRAFFIC_BARS_DEMO, STN_WIDGET_USAGE, STN_WIDGET_USAGE_HTML, StnWidgetAppearance, StnWidgetAppearanceLegacy, StnWidgetAppearanceShell, StnWidgetAssetId, StnWidgetBackgroundMode, StnWidgetContentFamily, StnWidgetGradeRowGrade, StnWidgetKind, StnWidgetKindBodySlot, StnWidgetKindPreview, StnWidgetShell, buildStnWidgetKindUsage, getStnWidgetKind, isStnWidgetKindSlug, normalizeStnWidgetAppearance, resolveStnWidgetBackground, resolveStnWidgetKindAppearance, resolveStnWidgetKindBodySlot, stnWidgetSampleUrl } from './data/stnWidget.js';
+export { STN_STATUS_DEMO_STEPS, StnStatusDotState, StnStatusFlowStep, StnStatusFlowStepColor } from './data/stnStatus.js';
 export { STN_UI_CATALOG, STN_UI_COMPONENTS, STN_UI_FOUNDATIONS, StnUiComponentId, StnUiEntry, StnUiFoundationId } from './components.js';
 export { SYSTEM_ICON_DATA_URLS } from './data/stnSystemIconsData.generated.js';