fix(storybook): use SWSlider in the SW Popup story

packages/sw/tests/integrated-popup.checks.mjs

@@ -21,10 +21,12 @@ export async function popupChecks({ page, goto, check, log, rect, out, report })
   // 2026-10-20: the unit select is SWSelect (the Viewer 축척 지정 select), no longer the HM UI Select.
   await settings.locator('[data-sw-select="unit"]').selectOption('cm')
   check('popup content: SWSelect (unit) works inside', (await log()).includes('unit=cm') && await settings.getByLabel('단위').inputValue() === 'cm')
-  await settings.locator('[data-ui-slider] [role="slider"]').focus()
+  // 2026-10-20: the popup gauge is SWSlider (native range; keyboard steps commit through onValueCommit).
+  await settings.locator('[data-popup-slider]').focus()
   await page.keyboard.press('ArrowRight')
   await page.waitForTimeout(100)
-  check('popup content: HM UI Slider works inside', /opacity=70/.test(await log()), await log())
+  check('popup content: SWSlider works inside', /opacity=70/.test(await log()) && await settings.locator('[data-popup-slider]').evaluate(e => e.classList.contains('hm-sw-slider') && e.dataset.appearance === 'panel' && e.value === '70'), await log())
+  check('popup content: no HM UI Slider left inside the popups', await page.locator('[data-popups] [data-slot="slider"]').count() === 0)
   await settings.locator('[data-ui-apply]').click()
   check('popup content: HM UI Button works inside', (await log()).includes('apply'))
   // 2026-10-20: popup layer / color are the property window pickers (SWPopupPropertyRow); SWHeader field dropdowns are

src/sw/sw-popup.stories.tsx

@@ -5,7 +5,7 @@ import {
   type SWHeaderColorOption, type SWHeaderLayer, type SWHeaderProperty, type SWSliderAppearance,
 } from "@hm-design/sw"
 import "@hm-design/sw/styles.css"
-import { Button, Slider, Switch } from "@hm-design/ui"
+import { Button, Switch } from "@hm-design/ui"
 import { StoryPage, StoryPageHeader, StorySection } from "@/components/story-page"
 import "./sw-stories.css"
 import "./sw-integrated-stories.css"
@@ -49,7 +49,7 @@ function SettingsPopup({ record }: { record: (line: string) => void }) {
   const [layerId, setLayerId] = useState("wall")
   const [color, setColor] = useState("255,0,0")
   const [snap, setSnap] = useState(true)
-  const [opacity, setOpacity] = useState([60])
+  const [opacity, setOpacity] = useState(60)
   const [unit, setUnit] = useState("mm")
   return (
     <SWPopup title="도면 설정" onClose={() => record("settings.onClose")} data-popup="settings">
@@ -72,12 +72,13 @@ function SettingsPopup({ record }: { record: (line: string) => void }) {
         <SWPopupPropertyRow property={{ id: "color", name: "색상", value: color, type: "color", groupId: "popup" }} menus={MENUS}
           onPropertyChange={(_, value) => { setColor(value); record(`color=${value}`) }} />
       </SWPopupSection>
-      <SWPopupSection title="HM UI">
+      {/* 2026-10-20: the gauge is the SW gauge (SWSlider). SW has no normal-mode switch, so 스냅 stays the HM UI Switch. */}
+      <SWPopupSection title="스냅 · 투명도">
         <SWPopupRow label="스냅" htmlFor={ids.snap} field="none">
           <Switch id={ids.snap} checked={snap} onCheckedChange={next => { setSnap(next); record(`snap=${next}`) }} data-ui-switch="" />
         </SWPopupRow>
         <SWPopupRow label="투명도" field="none">
-          <Slider value={opacity} min={0} max={100} step={10} onValueChange={setOpacity} onValueCommit={next => record(`opacity=${next[0]}`)} aria-label="투명도" data-ui-slider="" />
+          <SWSlider value={opacity} min={0} max={100} step={10} onValueChange={setOpacity} onValueCommit={next => record(`opacity=${next}`)} aria-label="투명도" data-popup-slider="" />
         </SWPopupRow>
       </SWPopupSection>
       <div className="sw-story-popup-actions">
@@ -161,7 +162,7 @@ function PopupPage() {
       <StoryPageHeader kicker={KICKER} title="SW Popup — 외형 고정, 콘텐츠 자유"
         description="SWPopup은 속성창 프레임(314px, 제목줄, 닫기, 내부 스크롤)을 그대로 쓰고 children으로 아무 콘텐츠나 받습니다. SWPopupSection / SWPopupRow는 속성창 그룹·행 모양을 그대로 재사용합니다. Header 없이 SWTheme 안에서 씁니다." />
       {log}
-      <StorySection title="사용자 정의 설정 · 객체 정보 · 기존 속성창 + children" description="SW Input·Select(단위, Viewer 축척 지정과 같은 SWSelect)·레이어/색상(속성창 컨트롤 SWPopupPropertyRow — SWHeader 필드 Dropdown은 Header 전용)과 HM UI Switch·Slider·Button을 함께 배치합니다. 기존 SWHeaderPropertyPanel도 children을 받습니다.">
+      <StorySection title="사용자 정의 설정 · 객체 정보 · 기존 속성창 + children" description="SW Input·Select(단위, Viewer 축척 지정과 같은 SWSelect)·레이어/색상(속성창 컨트롤 SWPopupPropertyRow — SWHeader 필드 Dropdown은 Header 전용)·투명도 게이지바(SWSlider)와, SW에 없는 컨트롤인 HM UI Switch·Button을 함께 배치합니다. 기존 SWHeaderPropertyPanel도 children을 받습니다.">
         <SWTheme className="sw-story-popups" data-popups="">
           <SettingsPopup record={record} />
           <ObjectInfoPopup record={record} />