feat(sw): popup controls, SWSelect / SWSlider, footer and viewer design fixes

Components (new public exports, existing APIs unchanged) - SWPopupPropertyRow: the property window row (layer / color / line style pickers, Figma 26:12250 / 26:12170) for SWPopup content. The SWHeader field dropdowns stay header-only; Popup B and 도면 설정 now use the popup pickers. - SWSelect: native panel select (28px, 1px #948871, radius 4, #F1ECE1, 12px), used by Popup 도면 설정 단위 and Viewer 축척 지정 단위 (replaces the HM UI Select there and the story-only .sw-viewer-story-select CSS). - SWSlider: appearance "panel" (default, the gauge the popup used) or "property" (the property window gauge), same value / events. Shares the property gauge CSS; SWViewerSlider renders SWSlider panel with viewer tokens. Footer - --hm-sw-footer-gra-border-orange (Figma gra-border-orange; the aux selected border token now references it): Model selected / hover, Layout hover and Layout + hover surfaces; 보조기능 / 명령어 전체보기 hover lights both lines and an orange ring; category + hover in #FF5C00 (menu-add-hover.svg). - Model / Layout text stays the Default text (#161410, 12px, 400, no outline) on hover and on the orange surface: only the surface changes. - bg_vacant covers the slot row only: the open pocket of a category tab no longer splits where it crosses the last command (e.g. 수정 with one command). Viewer - Panel title art keeps 308px (max-width: none against host img resets), so panels under 312px (250 x auto, 300px) paint the title from the left edge. Storybook - SW/Footer: 기본 Footer (sw-footer--default) and States (sw-footer--states) removed; full-footer keeps the live composition only, responsive keeps the widths (reference / Figma image sections removed, image files kept); the aux Figma comparison moved to the verification Story figma-variants. - SW/Popup: unit SWSelect, SWSlider A / B section, popup pickers, Popup B state.
2026-10-20 15:20:06 +09:00
1 parent bbb0e71c91
commit 126a35d60d
@@ -0,0 +1,12 @@
+<svg preserveAspectRatio="none" overflow="visible" style="display: block;" width="28" height="12" viewBox="0 0 28 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="btn_add">
+<g id="Union">
+<path d="M15 5V1H13L13 5H9V7H13L13 11H15V7H19V5H15Z" fill-rule="evenodd" clip-rule="evenodd" fill="#FF5C00"/>
+<mask id="stroke0_0_402" maskUnits="userSpaceOnUse" x="8" y="0" width="12" height="12" fill="black">
+<rect fill="white" x="8" width="12" height="12"/>
+<path d="M15 5V1H13L13 5H9V7H13L13 11H15V7H19V5H15Z" fill-rule="evenodd" clip-rule="evenodd"/>
+</mask>
+<path d="M15 1V5H19V7H15V11H13L13 7H9V5H13L13 1H15Z" stroke-width="2" stroke="black" mask="url(#stroke0_0_402)"/>
+</g>
+</g>
+</svg>
@@ -176,7 +176,8 @@ export function useSWHeaderOverlay(anchorRef: RefObject<HTMLElement | null> | un
  return { panelRef, style }
 }

-function PropertyEditor({ property, onChange, menus }: { property: SWHeaderProperty; onChange?: SWHeaderPropertyPanelProps["onPropertyChange"]; menus?: SWHeaderPropertyMenus }) {
+/** One property window row (label + field / picker). Also SWPopupPropertyRow (2026-10-20). */
+export function PropertyEditor({ property, onChange, menus }: { property: SWHeaderProperty; onChange?: SWHeaderPropertyPanelProps["onPropertyChange"]; menus?: SWHeaderPropertyMenus }) {
  const inputId = useId()
  const inputRef = useRef<HTMLInputElement>(null)
  const { type, value, disabled, mixed, readOnly, unit } = property
@@ -1,5 +1,5 @@
 import { cloneElement, isValidElement, type HTMLAttributes, type MouseEvent, type ReactNode, type RefObject } from "react"
-import { SWPopupFrame } from "../sw-header/components/SWHeaderPropertyPanel"
+import { PropertyEditor, SWPopupFrame, type SWHeaderProperty, type SWHeaderPropertyMenus } from "../sw-header/components/SWHeaderPropertyPanel"

 export interface SWPopupProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
  /** Title text (700, #FFC600, ellipsis). */
@@ -99,3 +99,26 @@ export function SWPopupRow({ label, htmlFor, unit, field = "box", numeric, readO
    </div>
  )
 }
+
+export interface SWPopupPropertyRowProps {
+  /** One property (the SWHeaderPropertyPanel record): name, value, type and, for layer / color / line style, `picker`. */
+  property: SWHeaderProperty
+  /** Lists and callbacks of the field dropdowns (layers, colors, line types …), as in SWHeaderPropertyPanel. */
+  menus?: SWHeaderPropertyMenus
+  /** Validated commit of the row (value = the chosen row id or the entered value). The host updates `property`. */
+  onPropertyChange?: (property: SWHeaderProperty, value: string) => void
+  className?: string
+}
+
+/**
+ * A property window row inside SWPopup / SWPopupSection (2026-10-20): the popup field controls of the property window
+ * (Figma 26:12250 layer, 26:12170 color, 26:12388 line style, number / text / select fields) with their popup look
+ * and behavior. Use it for layer / color pickers in a popup; the SWHeader field dropdowns are header-only.
+ */
+export function SWPopupPropertyRow({ property, menus, onPropertyChange, className }: SWPopupPropertyRowProps) {
+  return (
+    <div className={`hm-sw-property__editor${className ? ` ${className}` : ""}`}>
+      <PropertyEditor property={property} onChange={onPropertyChange} menus={menus} />
+    </div>
+  )
+}
@@ -0,0 +1,35 @@
+import { forwardRef, type ReactNode, type SelectHTMLAttributes } from "react"
+
+export interface SWSelectOption {
+  value: string
+  /** Shown text. Default `value`. */
+  label?: string
+  disabled?: boolean
+}
+
+export interface SWSelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement>, "value" | "defaultValue" | "onChange"> {
+  /** Controlled value. */
+  value?: string
+  /** Uncontrolled initial value. */
+  defaultValue?: string
+  /** Options as data. `children` (`<option>` elements) can be used instead. */
+  options?: readonly SWSelectOption[]
+  /** The chosen value (native `change`: pointer, keyboard and the OS list). */
+  onValueChange?: (value: string) => void
+  children?: ReactNode
+}
+
+/**
+ * HMDesign SW select (2026-10-20): a native select with the panel field look of the SW popups (28px, 1px inner-border
+ * line, 4px radius, content surface, 12px text, the platform arrow and option list). For SWPopupRow (`field="none"`),
+ * SWViewerField and any SWTheme content; tokens `--hm-sw-select-*`.
+ */
+export const SWSelect = forwardRef<HTMLSelectElement, SWSelectProps>(function SWSelect(
+  { options, onValueChange, className, children, ...rest }, ref,
+) {
+  return (
+    <select ref={ref} className={`hm-sw-select${className ? ` ${className}` : ""}`} onChange={event => onValueChange?.(event.currentTarget.value)} {...rest}>
+      {options ? options.map(option => <option key={option.value} value={option.value} disabled={option.disabled}>{option.label ?? option.value}</option>) : children}
+    </select>
+  )
+})
@@ -0,0 +1,51 @@
+import { forwardRef, useEffect, useImperativeHandle, useRef, type CSSProperties, type InputHTMLAttributes } from "react"
+
+/**
+ * `panel` (default): the gauge the SW popup used so far, 6px track + 18px white thumb with a ring (tokens
+ * `--hm-sw-slider-panel-*`; SWViewerSlider has the same look). `property`: the property window gauge, beige
+ * track + red fill + Figma thumb (tokens `--hm-sw-property-range-*`, as in SWHeaderPropertyPanel).
+ */
+export type SWSliderAppearance = "panel" | "property"
+
+export interface SWSliderProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "value" | "defaultValue" | "onChange" | "min" | "max" | "step"> {
+  value: number
+  /** Default 0. */
+  min?: number
+  /** Default 100. */
+  max?: number
+  /** Default 1. */
+  step?: number
+  /** Every change while dragging or with the keyboard. */
+  onValueChange?: (value: number) => void
+  /** The settled value: pointer release, or each keyboard step (the native `change` event). */
+  onValueCommit?: (value: number) => void
+  /** Look only; value, events and keyboard are the same. Default `panel`. */
+  appearance?: SWSliderAppearance
+}
+
+/**
+ * HMDesign SW slider (native range input) for SWPopup / SWPopupRow and any SWTheme content. The host owns the
+ * value. Colors come from SW tokens, so an SWTheme / runtime token override restyles both appearances.
+ */
+export const SWSlider = forwardRef<HTMLInputElement, SWSliderProps>(function SWSlider(
+  { value, min = 0, max = 100, step = 1, onValueChange, onValueCommit, appearance = "panel", className, style, ...rest }, ref,
+) {
+  const inputRef = useRef<HTMLInputElement>(null)
+  useImperativeHandle(ref, () => inputRef.current as HTMLInputElement)
+  const commitRef = useRef(onValueCommit)
+  commitRef.current = onValueCommit
+  // React's onChange is the native `input` event; `change` fires once the value settles.
+  useEffect(() => {
+    const input = inputRef.current
+    if (!input) return
+    const commit = () => commitRef.current?.(Number(input.value))
+    input.addEventListener("change", commit)
+    return () => input.removeEventListener("change", commit)
+  }, [])
+  const fill = max > min ? (Math.min(max, Math.max(min, value)) - min) / (max - min) : 0
+  return (
+    <input ref={inputRef} type="range" className={`hm-sw-slider${className ? ` ${className}` : ""}`} data-appearance={appearance}
+      value={value} min={min} max={max} step={step} style={{ ...style, "--hm-sw-range-fill": fill } as CSSProperties}
+      onChange={event => onValueChange?.(Number(event.currentTarget.value))} {...rest} />
+  )
+})
@@ -1,5 +1,6 @@
 import { forwardRef, useId, type ButtonHTMLAttributes, type HTMLAttributes, type InputHTMLAttributes, type ReactNode } from "react"
 import { SWViewerIcon } from "./SWViewerIcon"
+import { SWSlider, type SWSliderProps } from "../sw-slider/SWSlider"
 import "../../theme/sw-viewer.css"

 const cx = (...names: (string | false | undefined)[]) => names.filter(Boolean).join(" ")
@@ -92,16 +93,14 @@ export interface SWViewerSliderProps extends Omit<InputHTMLAttributes<HTMLInputE
  onValueChange?: (value: number) => void
 }

-/** Panel slider (6px #E0DACE track, #266651 range, 18px white thumb with #266651 ring). Native range input. */
+/**
+ * Panel slider (6px track, #266651 range, 18px white thumb with #266651 ring). SWSlider appearance="panel" painted
+ * with the viewer panel tokens (same look, 2026-10-20). Native range input.
+ */
 export const SWViewerSlider = forwardRef<HTMLInputElement, SWViewerSliderProps>(function SWViewerSlider(
-  { value, min, max, step = 1, onValueChange, className, style, ...rest }, ref,
+  { className, ...rest }, ref,
 ) {
-  const percent = max > min ? ((Math.min(max, Math.max(min, value)) - min) / (max - min)) * 100 : 0
-  return (
-    <input ref={ref} type="range" className={cx("hm-sw-viewer-slider", className)} value={value} min={min} max={max} step={step}
-      style={{ ...style, ["--hm-sw-viewer-slider-percent" as string]: `${percent}%` }}
-      onChange={event => onValueChange?.(Number(event.currentTarget.value))} {...rest} />
-  )
+  return <SWSlider ref={ref} {...(rest as Omit<SWSliderProps, "appearance" | "className">)} appearance="panel" className={cx("hm-sw-viewer-slider", className)} />
 })

 export interface SWViewerFieldProps extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
@@ -7,9 +7,13 @@ export {
  type SWToolButtonProps, type SWToolButtonAppearance, type SWToolGroupProps,
 } from "./components/sw-tool/SWTool"
 export {
-  SWPopup, SWPopupSection, SWPopupRow,
-  type SWPopupProps, type SWPopupSectionProps, type SWPopupRowProps,
+  SWPopup, SWPopupSection, SWPopupRow, SWPopupPropertyRow,
+  type SWPopupProps, type SWPopupSectionProps, type SWPopupRowProps, type SWPopupPropertyRowProps,
 } from "./components/sw-popup/SWPopup"
+// SW slider (2026-10-20): one native range with the popup gauge (`panel`) or the property window gauge (`property`).
+export { SWSlider, type SWSliderProps, type SWSliderAppearance } from "./components/sw-slider/SWSlider"
+// SW select (2026-10-20): the native panel select of the SW popups (Popup 도면 설정 = Viewer 축척 지정 단위).
+export { SWSelect, type SWSelectProps, type SWSelectOption } from "./components/sw-select/SWSelect"
 export * from "./components/sw-home-menu"

 // SW viewer mode (2026-10-19): viewer header, dropdown, popup panel and panel controls.
@@ -32,7 +32,10 @@
     hover ring (yellow gradient, 1px), user decision 2026-10-20. */
  --hm-sw-footer-aux-border: linear-gradient(180deg, #886d35 0%, #423625 8.85%, #f3dba8 26.17%, #0e0b06 83.79%, #574b30 100%);
  --hm-sw-footer-aux-hover-border: var(--hm-sw-header-hover-border-gradient);
-  --hm-sw-footer-aux-pressed-border: linear-gradient(180deg, #da6813 8.52%, #ffbb89 37.93%, #e5690d 71.85%, #ae3607 92.77%);
+  /* Figma gra-border-orange (one value): the selected border of the auxiliary toggles, the Model tab surface and the
+     hover surface of the Layout tabs and their + (2026-10-20), the hover ring of the side buttons. */
+  --hm-sw-footer-gra-border-orange: linear-gradient(180deg, #da6813 8.52%, #ffbb89 37.93%, #e5690d 71.85%, #ae3607 92.77%);
+  --hm-sw-footer-aux-pressed-border: var(--hm-sw-footer-gra-border-orange);
  /* Icon fill (Default #F1EDE5, selected = --hm-sw-footer-accent #FF5C00); the black 90% outline never changes. */
  --hm-sw-footer-aux-icon-color: #f1ede5;

@@ -126,7 +129,10 @@
  border-radius: var(--hm-sw-footer-group-radius) 0 0 0;
  background: var(--hm-sw-footer-group-background);
 }
-.hm-sw-footer__vacant { position: absolute; top: 1px; right: 0; bottom: 0; background: var(--hm-sw-footer-vacant-background); pointer-events: none; }
+/* The vacant surface covers the slot row only (2026-10-20): it used to run under the category row, where the open
+   pocket of the current tab showed it, so a pocket crossing the last command's edge (e.g. 수정 with one command) was
+   split into the group surface and the vacant surface. Every pocket now shows the same group surface. */
+.hm-sw-footer__vacant { position: absolute; top: 1px; right: 0; height: calc(var(--hm-sw-footer-slot-height) - 1px); background: var(--hm-sw-footer-vacant-background); pointer-events: none; }
 .hm-sw-footer__scroll {
  position: relative;
  flex: 0 1 auto;
@@ -173,10 +179,23 @@
 .hm-sw-footer-side[data-side="end"] { filter: drop-shadow(calc(-1 * var(--hm-sw-footer-side-shadow-offset)) 0 8px rgba(0, 0, 0, 0.6)); }
 .hm-sw-footer-side__title { text-shadow: var(--hm-sw-header-text-outline); }
 .hm-sw-footer-side__subtitle { text-shadow: var(--hm-sw-header-label-outline); }
-/* Not in Figma: hover / selected reuse the footer accent (#FF5C00) of the slot and category hover. */
-.hm-sw-footer-side:hover:not(:disabled) .hm-sw-footer-side__title,
-.hm-sw-footer-side[aria-pressed="true"] .hm-sw-footer-side__title,
-.hm-sw-footer-side[aria-expanded="true"] .hm-sw-footer-side__title { color: var(--hm-sw-footer-accent); }
+/* Not in Figma: hover / selected reuse the footer rules: the whole button lights up, both text lines in the accent
+   (#FF5C00) and the orange ring of a selected auxiliary toggle over the frame (2026-10-20; was the title only). Size,
+   face and shadow are unchanged; disabled keeps the default look. */
+.hm-sw-footer-side::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border: 1px solid transparent;
+  background: var(--hm-sw-footer-gra-border-orange) border-box;
+  -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
+  -webkit-mask-composite: xor;
+  mask: linear-gradient(#000 0 0) padding-box exclude, linear-gradient(#000 0 0);
+  opacity: 0;
+  pointer-events: none;
+}
+.hm-sw-footer-side:is(:hover:not(:disabled), [aria-pressed="true"], [aria-expanded="true"])::after { opacity: 1; }
+.hm-sw-footer-side:is(:hover:not(:disabled), [aria-pressed="true"], [aria-expanded="true"]) :is(.hm-sw-footer-side__title, .hm-sw-footer-side__subtitle) { color: var(--hm-sw-footer-accent); }

 /* ---------- Auxiliary toggles (객체스냅 …) ---------- */
 .hm-sw-footer-aux {
@@ -373,13 +392,24 @@
 .hm-sw-footer-menu__tab[aria-selected="true"] { margin-right: 7px; }
 .hm-sw-footer-menu__tab[aria-selected="true"]:not(:first-of-type) { margin-left: 7px; }
 .hm-sw-footer-menu__add { position: relative; flex: 0 0 28px; width: 28px; height: 12px; margin-top: 6px; background: url("../components/sw-footer/assets/menu-add.svg") 0 0 / 28px 12px no-repeat; }
-/* Not in Figma: only Default of btn_add (26:9451) exists; hover keeps the asset (no invented look). */
+/* Not in Figma: only Default of btn_add (26:9451) exists. Hover (2026-10-20, user request): the + in the footer accent
+   (#FF5C00, same black outline), like the category tabs next to it. */
+.hm-sw-footer-menu__add:hover:not(:disabled) { background-image: url("../components/sw-footer/assets/menu-add-hover.svg"); }

 /* ---------- Layout tabs ---------- */
 .hm-sw-footer-tabs { display: flex; align-items: flex-end; gap: 1px; height: var(--hm-sw-footer-tab-height); font-size: var(--hm-sw-footer-tab-font-size); letter-spacing: 0.02em; }
 .hm-sw-footer-tabs__list { display: contents; }
 .hm-sw-footer-tabs__add { flex: 0 0 24px; width: 24px; height: 22px; background: url("../components/sw-footer/assets/tab-add.svg") 0 0 / 24px 22px no-repeat; }
-.hm-sw-footer-tabs__add:hover:not(:disabled) { background-image: url("../components/sw-footer/assets/tab-add-hover.svg"); }
+/* Hover (2026-10-20, user request): the Model / Layout orange surface in the button shape, the + keeps its outline. */
+.hm-sw-footer-tabs__add { position: relative; }
+.hm-sw-footer-tabs__add:hover:not(:disabled)::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: url("../components/sw-footer/assets/menu-add.svg") 50% 50% / 28px 12px no-repeat, var(--hm-sw-footer-gra-border-orange);
+  -webkit-mask: url("../components/sw-footer/assets/tab-add.svg") 0 0 / 24px 22px no-repeat;
+  mask: url("../components/sw-footer/assets/tab-add.svg") 0 0 / 24px 22px no-repeat;
+}
 .hm-sw-footer-tab { position: relative; flex: 0 0 auto; display: flex; height: 22px; color: var(--hm-sw-footer-tab-text); }
 .hm-sw-footer-tab__select {
  position: relative;
@@ -431,7 +461,8 @@
 .hm-sw-footer-tab[data-shape="rounded"][data-state="on"] { background: var(--hm-sw-footer-tab-on-background); }
 .hm-sw-footer-tab[data-shape="rounded"][data-state="editing"] { background: var(--hm-sw-footer-tab-editing-background); }
 .hm-sw-footer-tab[data-shape="rounded"]:is(:hover, [data-state="editing"])::after { border-color: var(--hm-sw-footer-tab-hover-border-color); }
-.hm-sw-footer-tab[data-shape="rounded"][data-state="off"]:hover { background: linear-gradient(var(--hm-sw-footer-tab-hover-overlay), var(--hm-sw-footer-tab-hover-overlay)), var(--hm-sw-footer-tab-background); }
+/* Hover, not selected (2026-10-20, user request): the Model orange surface; text as on Model (below). */
+.hm-sw-footer-tab[data-shape="rounded"][data-state="off"]:hover { background: var(--hm-sw-footer-gra-border-orange); }

 /* Slanted tab (layout01, next to Model): 97 × 22 mirrored bg asset + the 28px red close piece. */
 .hm-sw-footer-tab[data-shape="slant"] { width: 97px; }
@@ -450,7 +481,12 @@
 .hm-sw-footer-tab[data-shape="slant"] .hm-sw-footer-tab__remove:hover { background-image: url("../components/sw-footer/assets/tab-close-hover.svg"); }
 .hm-sw-footer-tab[data-shape="slant"][data-state="on"]::before { background-image: url("../components/sw-footer/assets/tab-slant-on.svg"); }
 .hm-sw-footer-tab[data-shape="slant"][data-state="editing"]::before { background-image: url("../components/sw-footer/assets/tab-slant-editing.svg"); }
-.hm-sw-footer-tab[data-shape="slant"][data-state="off"]:hover::before { background-image: url("../components/sw-footer/assets/tab-slant-hover.svg"); }
+/* Hover, not selected (2026-10-20, user request): the Model orange surface in the slanted shape. */
+.hm-sw-footer-tab[data-shape="slant"][data-state="off"]:hover::before {
+  background: var(--hm-sw-footer-gra-border-orange);
+  -webkit-mask: url("../components/sw-footer/assets/tab-slant.svg") 0 0 / 97px 22px no-repeat;
+  mask: url("../components/sw-footer/assets/tab-slant.svg") 0 0 / 97px 22px no-repeat;
+}
 .hm-sw-footer-tab[data-shape="slant"][data-state="off"]:hover::after { background-image: url("../components/sw-footer/assets/tab-slant-ring.svg"); }
 /* layout01 Variant6 (editing + hover): the fill without its own ring and the orange ring on top. */
 .hm-sw-footer-tab[data-shape="slant"][data-state="editing"]:hover::before { background-image: url("../components/sw-footer/assets/tab-slant-editing-fill.svg"); }
@@ -458,7 +494,9 @@
 .hm-sw-footer-tab[data-shape="slant"] + .hm-sw-footer-tab--model { margin-left: -9px; }

 /* Text per state (Figma layout01 / layout02 variants). */
-.hm-sw-footer-tab:is([data-state="on"], [data-state="editing"], :hover) .hm-sw-footer-tab__select {
+/* Selected / editing Layout tabs (light text on brown / black) keep the 70% outline. Hover of a tab that is not
+   selected and the Model tab draw their text exactly as the Default (2026-10-20): only the surface changes. */
+.hm-sw-footer-tab:not(.hm-sw-footer-tab--model):is([data-state="on"], [data-state="editing"]) .hm-sw-footer-tab__select {
  text-shadow:
    1.3px 0 0 var(--hm-sw-footer-tab-outline-color), 0.92px 0.92px 0 var(--hm-sw-footer-tab-outline-color),
    0 1.3px 0 var(--hm-sw-footer-tab-outline-color), -0.92px 0.92px 0 var(--hm-sw-footer-tab-outline-color),
@@ -467,12 +505,13 @@
 }
 .hm-sw-footer-tab[data-state="on"] { color: var(--hm-sw-footer-text); }
 .hm-sw-footer-tab[data-state="editing"] { color: var(--hm-sw-footer-red); }
-.hm-sw-footer-tab[data-shape="rounded"]:not([data-state="editing"]):hover,
-.hm-sw-footer-tab[data-shape="slant"][data-state="on"]:hover,
-.hm-sw-footer-tab--model:hover:not([data-state="on"]) { color: var(--hm-sw-footer-accent); }
-/* layout01 hover (not selected): orange tab, black text with the 70% outline. */
-.hm-sw-footer-tab[data-shape="slant"][data-state="off"]:hover { color: #000; }
-.hm-sw-footer-tab[data-shape="slant"][data-state="off"]:hover .hm-sw-footer-tab__select { text-shadow: none; }
+.hm-sw-footer-tab[data-shape="rounded"][data-state="on"]:hover,
+.hm-sw-footer-tab[data-shape="slant"][data-state="on"]:hover { color: var(--hm-sw-footer-accent); }
+/* On the orange surface (Model selected or hovered, Layout hovered, 2026-10-20 user decision): the Default tab text,
+   black #161410 without outline, in the inherited tab size and weight (no size or weight of its own), so hover never
+   changes the text, its size or its place. */
+.hm-sw-footer-tab:is([data-shape="rounded"], [data-shape="slant"])[data-state="off"]:hover,
+.hm-sw-footer-tab--model:is([data-state="on"], :hover) { color: var(--hm-sw-footer-tab-text); }
 /* layout01 "on hover" draws the default beige surface under the orange text. */
 .hm-sw-footer-tab[data-shape="slant"][data-state="on"]:hover::before { background-image: url("../components/sw-footer/assets/tab-slant.svg"); }
 /* The × appears on hover (all shapes) and in no other state (Figma opacity 0). */
@@ -481,7 +520,18 @@

 /* Model (26:9914): 73 × 22 asset, label 22px from the left. */
 .hm-sw-footer-tab--model { width: 73px; background: url("../components/sw-footer/assets/tab-model.svg") 0 0 / 73px 22px no-repeat; }
-.hm-sw-footer-tab--model[data-state="on"] { background-image: url("../components/sw-footer/assets/tab-model-on.svg"); }
+/* Selected and hovered (2026-10-20, user request; was the brown model On 26:9925): the gra-border-orange surface in the
+   Model shape. */
+.hm-sw-footer-tab--model:is([data-state="on"], :hover) { background-image: none; }
+.hm-sw-footer-tab--model:is([data-state="on"], :hover)::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: var(--hm-sw-footer-gra-border-orange);
+  -webkit-mask: url("../components/sw-footer/assets/tab-model.svg") 0 0 / 73px 22px no-repeat;
+  mask: url("../components/sw-footer/assets/tab-model.svg") 0 0 / 73px 22px no-repeat;
+  pointer-events: none;
+}
 .hm-sw-footer-tab--model .hm-sw-footer-tab__select { min-width: 0; width: 100%; padding: 0 16px 0 22px; }

 /* ---------- Command line ---------- */
@@ -355,7 +355,9 @@ button.hm-sw-viewer-header__brand { text-align: left; }
   the SWPopup position), and a stretched copy of the same art fills the flat part on the left of wider panels.
   The right one hides its own left 20px (left edge + corner) and the left copy ends exactly there: no seam, no
   doubled shadow. */
-.hm-sw-viewer-panel .hm-sw-property__title-art { left: auto; right: 4px; clip-path: inset(-4px -4px -4px 20px); }
+/* max-width: none: a host img reset (e.g. Tailwind preflight max-width: 100%) shrank the art in panels under 312px,
+   so its clipped left 20px left the start of the title bar unpainted (2026-10-20, 250px minimum width). */
+.hm-sw-viewer-panel .hm-sw-property__title-art { left: auto; right: 4px; max-width: none; clip-path: inset(-4px -4px -4px 20px); }
 .hm-sw-viewer-panel .hm-sw-property__titlebar::before {
  content: "";
  position: absolute;
@@ -428,21 +430,17 @@ button.hm-sw-viewer-header__brand { text-align: left; }
 .hm-sw-theme .hm-sw-viewer-input:focus-visible { outline: 2px solid var(--hm-sw-viewer-panel-switch-on); outline-offset: -1px; }
 .hm-sw-theme .hm-sw-viewer-input:disabled { opacity: 0.5; }

-.hm-sw-theme .hm-sw-viewer-slider {
-  --hm-sw-viewer-slider-percent: 0%;
-  width: 100%;
-  height: 18px;
-  margin: 0;
-  background: transparent;
-  appearance: none;
-  cursor: pointer;
+/* SWViewerSlider = SWSlider appearance="panel" (sw.css, 2026-10-20): the shared gauge rules painted with the
+   viewer panel tokens, so the viewer look and its theme overrides are unchanged. */
+.hm-sw-viewer-slider {
+  --hm-sw-slider-panel-range: var(--hm-sw-viewer-panel-switch-on);
+  --hm-sw-slider-panel-track: var(--hm-sw-viewer-panel-background);
+  --hm-sw-slider-panel-thumb: #fff;
 }
-.hm-sw-viewer-slider::-webkit-slider-runnable-track { height: 6px; border-radius: 9999px; background: linear-gradient(90deg, var(--hm-sw-viewer-panel-switch-on) var(--hm-sw-viewer-slider-percent), var(--hm-sw-viewer-panel-background) var(--hm-sw-viewer-slider-percent)); }
-.hm-sw-viewer-slider::-moz-range-track { height: 6px; border-radius: 9999px; background: var(--hm-sw-viewer-panel-background); }
-.hm-sw-viewer-slider::-moz-range-progress { height: 6px; border-radius: 9999px; background: var(--hm-sw-viewer-panel-switch-on); }
-.hm-sw-viewer-slider::-webkit-slider-thumb { width: 18px; height: 18px; margin-top: -6px; border: 2px solid var(--hm-sw-viewer-panel-switch-on); border-radius: 9999px; background: #fff; appearance: none; }
-.hm-sw-viewer-slider::-moz-range-thumb { box-sizing: border-box; width: 18px; height: 18px; border: 2px solid var(--hm-sw-viewer-panel-switch-on); border-radius: 9999px; background: #fff; }
-.hm-sw-theme .hm-sw-viewer-slider:focus-visible { outline: 2px solid var(--hm-sw-viewer-panel-switch-on); outline-offset: 2px; }
+/* SWSelect inside viewer panels reads the viewer panel tokens (same values; viewer theme overrides follow). */
+.hm-sw-viewer-panel { --hm-sw-select-border-color: var(--hm-sw-viewer-panel-inner-border); --hm-sw-select-background: var(--hm-sw-viewer-panel-field-background); --hm-sw-select-text: var(--hm-sw-viewer-panel-text); }
+/* Viewer rows dim a disabled field as a whole (SWViewerField 50%); the slider keeps its own opacity as before. */
+.hm-sw-theme .hm-sw-viewer-slider:disabled { opacity: 1; }

 .hm-sw-theme .hm-sw-viewer-button {
  display: inline-flex;
@@ -100,6 +100,17 @@
  --hm-sw-property-range-fill-edge: #000;
  --hm-sw-property-range-track: linear-gradient(#aea28b 0 1px, #c3b9a4 1px 2px, #c7bda9 2px 4px, #b7ac96 4px 5px, #ac9e84 5px);
  --hm-sw-property-range-highlight: #eadec8;
+  /* SWSlider appearance "panel" (2026-10-20): the gauge the SW popup used so far (HM UI Slider: 6px #E0DACE
+     track, #266651 range, 18px white thumb with a 2px #266651 ring), the same shape as SWViewerSlider. Existing
+     values only (#E0DACE = popup scrollbar track, #266651 = viewer panel accent). Appearance "property" uses the
+     --hm-sw-property-range-* tokens above. */
+  --hm-sw-slider-panel-track: #e0dace;
+  --hm-sw-slider-panel-range: #266651;
+  --hm-sw-slider-panel-thumb: #fff;
+  /* SWSelect (2026-10-20): the panel field values of the viewer 축척 지정 select (property inner border / content). */
+  --hm-sw-select-border-color: var(--hm-sw-property-inner-border);
+  --hm-sw-select-background: var(--hm-sw-property-content);
+  --hm-sw-select-text: var(--hm-sw-property-label);

  /* User-confirmed: document (file name) surface */
  --hm-sw-header-document-background: linear-gradient(180deg, #081813 0%, #09271e 8.69%, #0b3227 25.43%, #0e3d2f 51.25%, #0b3227 80.03%, #0a2b21 89.76%, #081813 100%);
@@ -1541,20 +1552,25 @@ div.hm-sw-header__menu-row { justify-content: space-between; gap: 8px; padding-l
 .hm-sw-property__value { display: flex; align-items: center; gap: 4px; flex: 1; min-width: 0; }
 .hm-sw-property__value > .hm-sw-header__input { width: auto; max-width: 100%; min-width: 0; flex: 1; text-shadow: none; letter-spacing: .02em; font-weight: 500; }
 .hm-sw-property__value > .hm-sw-header__input:focus { color: var(--hm-sw-header-input-color); }
-.hm-sw-property__value > select { flex: 1; min-width: 0; width: 0; height: 28px; padding: 0; appearance: none; border: 1px solid transparent; border-radius: 2px; background: transparent; color: var(--hm-sw-header-input-color); font: inherit; }
-.hm-sw-property__value > select:disabled { opacity: 1; appearance: none; color: var(--hm-sw-header-input-color); }
-.hm-sw-property__value > select:focus { background: var(--hm-sw-property-content); border-color: var(--hm-sw-property-inner-border); }
+.hm-sw-property__value > select:not(.hm-sw-select) { flex: 1; min-width: 0; width: 0; height: 28px; padding: 0; appearance: none; border: 1px solid transparent; border-radius: 2px; background: transparent; color: var(--hm-sw-header-input-color); font: inherit; }
+.hm-sw-property__value > select:not(.hm-sw-select):disabled { opacity: 1; appearance: none; color: var(--hm-sw-header-input-color); }
+.hm-sw-property__value > select:not(.hm-sw-select):focus { background: var(--hm-sw-property-content); border-color: var(--hm-sw-property-inner-border); }
+/* SWSelect: native select, panel field look; focus = the SW popup focus ring. */
+.hm-sw-select { flex: 0 0 auto; height: 28px; padding: 0 8px; border: 1px solid var(--hm-sw-select-border-color); border-radius: 4px; background: var(--hm-sw-select-background); color: var(--hm-sw-select-text); font: inherit; font-size: 12px; }
+.hm-sw-select:disabled { opacity: 0.4; cursor: default; }
 .hm-sw-property__unit { flex: 0 0 auto; font-size: 12px; white-space: nowrap; }
 /* Color preview (26:12175): 70 x 16 black tile (1px padding, radius 2), 68 x 14 swatch with a white 1px border. */
 .hm-sw-property__swatch-area { display: flex; align-items: center; flex: 0 0 auto; }
 .hm-sw-property__swatch { display: block; flex: 0 0 70px; width: 70px; height: 16px; padding: 1px; border-radius: 2px; background: #000; }
 .hm-sw-property__swatch > i { display: block; height: 14px; border: 1px solid #fff; border-radius: 1px; }
-.hm-sw-property__value > input[type="range"] { appearance: none; flex: 0 0 86px; width: 86px; height: 16px; margin: 0; background: transparent; cursor: pointer; }
+/* Property window gauge, also SWSlider appearance="property" (2026-10-20, same rules; the 86px width is the property row only). */
+.hm-sw-property__value > input[type="range"]:not(.hm-sw-slider) { flex: 0 0 86px; width: 86px; }
+:is(.hm-sw-property__value > input[type="range"]:not(.hm-sw-slider), .hm-sw-slider[data-appearance="property"]) { appearance: none; height: 16px; margin: 0; background: transparent; cursor: pointer; }
 /* --hm-sw-range-fill (0-1) is set from the value; the red ends under the thumb centre (14px thumb).
   The 3px radius rounds the fill's left cap; the first layer is its left stroke. Track and thumb are
   shared values, painted once per engine: WebKit/Blink track + thumb, Gecko track + thumb (Gecko's
   ::-moz-range-progress is kept empty so the fill is never painted twice). */
-.hm-sw-property__value > input[type="range"] {
+:is(.hm-sw-property__value > input[type="range"]:not(.hm-sw-slider), .hm-sw-slider[data-appearance="property"]) {
  --hm-sw-range-fill-width: calc(7px + (100% - 14px) * var(--hm-sw-range-fill, 0));
  --hm-sw-range-track-paint:
    linear-gradient(90deg, var(--hm-sw-property-range-fill-edge) 0 1px, transparent 1px) 0 0 / var(--hm-sw-range-fill-width) 100% no-repeat,
@@ -1563,11 +1579,31 @@ div.hm-sw-header__menu-row { justify-content: space-between; gap: 8px; padding-l
  --hm-sw-range-thumb-paint: url("../assets/property-range-thumb.svg") center / 14px 14px no-repeat;
  --hm-sw-range-thumb-shadow: 0 0 3px #1c1a16, 0 2px 2px rgba(28, 26, 22, .4);
 }
-.hm-sw-property__value > input[type="range"]::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: var(--hm-sw-range-track-paint); box-shadow: 0 1px 0 var(--hm-sw-property-range-highlight); }
-.hm-sw-property__value > input[type="range"]::-webkit-slider-thumb { appearance: none; width: 14px; height: 14px; margin-top: -4px; border: 0; border-radius: 50%; background: var(--hm-sw-range-thumb-paint); box-shadow: var(--hm-sw-range-thumb-shadow); }
-.hm-sw-property__value > input[type="range"]::-moz-range-track { box-sizing: border-box; height: 6px; border: 0; border-radius: 3px; background: var(--hm-sw-range-track-paint); box-shadow: 0 1px 0 var(--hm-sw-property-range-highlight); }
-.hm-sw-property__value > input[type="range"]::-moz-range-progress { height: 0; background: transparent; }
-.hm-sw-property__value > input[type="range"]::-moz-range-thumb { box-sizing: border-box; width: 14px; height: 14px; border: 0; border-radius: 50%; background: var(--hm-sw-range-thumb-paint); box-shadow: var(--hm-sw-range-thumb-shadow); }
+:is(.hm-sw-property__value > input[type="range"]:not(.hm-sw-slider), .hm-sw-slider[data-appearance="property"])::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: var(--hm-sw-range-track-paint); box-shadow: 0 1px 0 var(--hm-sw-property-range-highlight); }
+:is(.hm-sw-property__value > input[type="range"]:not(.hm-sw-slider), .hm-sw-slider[data-appearance="property"])::-webkit-slider-thumb { appearance: none; width: 14px; height: 14px; margin-top: -4px; border: 0; border-radius: 50%; background: var(--hm-sw-range-thumb-paint); box-shadow: var(--hm-sw-range-thumb-shadow); }
+:is(.hm-sw-property__value > input[type="range"]:not(.hm-sw-slider), .hm-sw-slider[data-appearance="property"])::-moz-range-track { box-sizing: border-box; height: 6px; border: 0; border-radius: 3px; background: var(--hm-sw-range-track-paint); box-shadow: 0 1px 0 var(--hm-sw-property-range-highlight); }
+:is(.hm-sw-property__value > input[type="range"]:not(.hm-sw-slider), .hm-sw-slider[data-appearance="property"])::-moz-range-progress { height: 0; background: transparent; }
+:is(.hm-sw-property__value > input[type="range"]:not(.hm-sw-slider), .hm-sw-slider[data-appearance="property"])::-moz-range-thumb { box-sizing: border-box; width: 14px; height: 14px; border: 0; border-radius: 50%; background: var(--hm-sw-range-thumb-paint); box-shadow: var(--hm-sw-range-thumb-shadow); }
+/* SWSlider (2026-10-20): one native range, two looks. Fills the row by default (the host may set a width).
+   appearance="panel" is the gauge the SW popup used (also SWViewerSlider): the range is painted up to
+   --hm-sw-range-fill of the track. */
+.hm-sw-slider { flex: 1 1 auto; width: 100%; min-width: 0; }
+.hm-sw-slider:disabled { opacity: 0.4; cursor: default; }
+.hm-sw-slider[data-appearance="panel"] {
+  --hm-sw-slider-percent: calc(var(--hm-sw-range-fill, 0) * 100%);
+  height: 18px;
+  margin: 0;
+  background: transparent;
+  appearance: none;
+  cursor: pointer;
+}
+.hm-sw-slider[data-appearance="panel"]:disabled { cursor: default; }
+.hm-sw-slider[data-appearance="panel"]::-webkit-slider-runnable-track { height: 6px; border-radius: 9999px; background: linear-gradient(90deg, var(--hm-sw-slider-panel-range) var(--hm-sw-slider-percent), var(--hm-sw-slider-panel-track) var(--hm-sw-slider-percent)); }
+.hm-sw-slider[data-appearance="panel"]::-moz-range-track { height: 6px; border-radius: 9999px; background: var(--hm-sw-slider-panel-track); }
+.hm-sw-slider[data-appearance="panel"]::-moz-range-progress { height: 6px; border-radius: 9999px; background: var(--hm-sw-slider-panel-range); }
+.hm-sw-slider[data-appearance="panel"]::-webkit-slider-thumb { width: 18px; height: 18px; margin-top: -6px; border: 2px solid var(--hm-sw-slider-panel-range); border-radius: 9999px; background: var(--hm-sw-slider-panel-thumb); appearance: none; }
+.hm-sw-slider[data-appearance="panel"]::-moz-range-thumb { box-sizing: border-box; width: 18px; height: 18px; border: 2px solid var(--hm-sw-slider-panel-range); border-radius: 9999px; background: var(--hm-sw-slider-panel-thumb); }
+.hm-sw-slider[data-appearance="panel"]:focus-visible { outline: 2px solid var(--hm-sw-slider-panel-range); outline-offset: 2px; }
 .hm-sw-property__value > .hm-sw-header__line-preview { flex-basis: 68px; width: 68px; }
 .hm-sw-property__expand { display: block; width: 100%; height: 12px; overflow: hidden; }
 .hm-sw-property__expand > img { display: block; width: 296px; height: 12px; margin-left: calc((100% - 296px) / 2); }
@@ -4,8 +4,6 @@
 .sw-footer-story-canvas { position: relative; background: var(--sw-story-canvas); }
 .sw-footer-story-workspace { display: flex; flex-direction: column; height: 720px; background: #060606; }
 .sw-footer-story-canvas--fill { flex: 1 1 auto; min-height: 0; }
-.sw-footer-story-reference { display: block; width: 1915px; max-width: none; }
-.sw-footer-story-figma-bottom { width: 1920px; height: 120px; background: 0 -960px / 1920px 1080px no-repeat; }
 .sw-footer-story-nodes { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 16px; }
 .sw-footer-story-node { margin: 0; padding: 12px; border: 1px solid #dedbd2; border-radius: 6px; background: #fff; }
 .sw-footer-story-node figcaption { display: flex; flex-direction: column; gap: 2px; margin-bottom: 8px; font-size: 12px; color: #3d4a45; }
@@ -25,19 +23,14 @@
 .sw-footer-story-guide-room { gap: 160px; padding: 170px 80px 6px; }
 .sw-footer-story-guide-frame { display: block; width: 194px; height: 111px; background-repeat: no-repeat; background-size: 250px 1179px; }
 .sw-footer-story-guide-text { display: grid; place-items: center; height: 100%; padding: 8px; font-size: 12px; color: #d4cbbd; text-align: center; }
-.sw-footer-story-states { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px; }
-.sw-footer-story-state { margin: 0; }
-.sw-footer-story-state figcaption { margin-bottom: 6px; font-size: 12px; color: #3d4a45; }
 .sw-footer-story-lucide { display: grid; place-items: center; }
 .sw-footer-story-status { padding: 0 12px; font-size: 12px; color: #d4cbbd; font-family: ui-monospace, monospace; }
 .sw-footer-story-row { display: flex; align-items: flex-start; gap: 16px; }
 .sw-footer-story-row--tight { gap: 0; }
 .sw-footer-story-inline { display: inline-flex; flex-direction: column; padding: 0; }
 .sw-footer-story-width + .sw-footer-story-width { margin-top: 16px; }
-.sw-footer-story-reference-narrow { display: block; width: 952px; max-width: 100%; }
 .sw-footer-story-aux-compare { display: grid; grid-template-columns: repeat(auto-fill, minmax(560px, 1fr)); gap: 16px; }
 .sw-footer-story-aux-row { display: flex; align-items: center; gap: 12px; margin: 0; }
 .sw-footer-story-aux-row figcaption { flex: 0 0 120px; font-size: 12px; color: #3d4a45; }
 .sw-footer-story-aux-row img { display: block; flex: none; }
 .sw-footer-story-aux-states { display: flex; flex-direction: column; gap: 9px; padding: 8px; }
-.sw-footer-story-aux-demo { margin-top: 12px; }
@@ -2,7 +2,7 @@ import { useState, type ReactNode } from "react"
 import type { Meta, StoryObj } from "@storybook/react-vite"
 import {
  SWFooter, SWFooterAddSlot, SWFooterAuxButton, SWFooterAuxGroup, SWFooterCommandLine, SWFooterGuide, SWFooterLayoutTabs, SWFooterMenu,
-  SWFooterSideButton, SWFooterToolButton, SWHeader, SWTheme, SW_FOOTER_MODEL, swFooterToolIcons,
+  SWFooterToolButton, SWHeader, SWTheme, SW_FOOTER_MODEL, swFooterToolIcons,
  type SWFooterAuxItem, type SWFooterCategory, type SWFooterLayout, type SWFooterTool,
 } from "@hm-design/sw"
 import "@hm-design/sw/styles.css"
@@ -12,8 +12,6 @@ import {
  AUX_ITEMS, CATEGORIES, DRAW_TOOLS, GuideFrame, GuideMovie, HISTORY, LAYOUTS, Log, Pin, REFERENCE_AUX, REFERENCE_CATEGORIES, REFERENCE_HISTORY,
  useFooterDemo,
 } from "./sw-footer-fixture"
-import referenceScreen from "./assets/footer-reference/composition-2026-10-20.png"
-import referenceNarrow from "./assets/footer-reference/narrow-2026-10-20.png"
 import "./sw-stories.css"
 import "./sw-footer-stories.css"
 import placeholderLogo from "./assets/sw-header-logo-placeholder.svg"
@@ -49,24 +47,7 @@ function FigmaFooter() {
  )
 }

-// ---------- 1. 기본 Footer ----------
-
-export const Default: Story = {
-  name: "기본 Footer",
-  render: () => (
-    <StoryPage>
-      <StoryPageHeader kicker={KICKER} title="SW Footer" description={<>Figma <code>레이아웃 분리</code> 26:10097의 하단 72px 영역. 기본 데이터(도형 9개 명령, 10개 분류, 보조기능 6개, Layout 01)만 넣은 <code>&lt;SWFooter /&gt;</code>입니다. 아래는 같은 폭의 Figma 렌더입니다.</>} />
-      <StorySection title="구현 (1920px)" description="Hover: 명령·분류·빈 칸(+, 가이드)·Layout 탭. 클릭 동작은 Callback이 없으므로 아무 것도 실행하지 않습니다.">
-        <Screen><FigmaFooter /></Screen>
-      </StorySection>
-      <StorySection title="Figma 26:10097 (하단 120px)">
-        <div className="sw-story-scroller"><div className="sw-footer-story-figma-bottom" style={{ backgroundImage: `url(${ref("26-10097")})` }} role="img" aria-label="Figma 26:10097 하단" /></div>
-      </StorySection>
-    </StoryPage>
-  ),
-}
-
-// ---------- 2. 전체 Footer · 실제 조합 ----------
+// ---------- 1. 전체 Footer · 실제 Footer 조합 ----------

 const LAYOUTS_2: SWFooterLayout[] = [{ id: "layout2", label: "Layout 02" }, { id: "layout1", label: "Layout 01" }]

@@ -101,17 +82,14 @@ export const FullFooter: Story = {
  render: () => (
    <StoryPage>
      <StoryPageHeader kicker={KICKER} title="전체 Footer · 실제 Footer 조합" description="사용자 제공 실제 화면(2026-10-20) 구성: SWHeader + 도면 영역 + SWFooter(좌표 status, 바 안의 명령창 command, 오른쪽 명령 칸, Layout 탭). 모든 상태는 호스트(Story)가 Props로 소유하고, 컴포넌트는 Callback만 보냅니다." />
-      <StorySection title="동작" description="명령 클릭 = 선택(다시 클릭 해제)·명령 기록 추가, 분류 탭(←/→), 빈 칸 + 클릭·Hover 가이드(영상 대신 Figma 6프레임 순환), 보조기능 토글(켜짐 = 주황 테두리·글자), 명령어 전체보기·▲ = 명령창 위로 펼치기, Layout 탭 선택·+·×·더블클릭/F2 이름 변경·Delete, 명령창 Enter 실행.">
+      <StorySection title="실제 Footer 조합 (동작)" description="명령 클릭 = 선택(다시 클릭 해제)·명령 기록 추가, 분류 탭(←/→, 바꿔도 칸 영역 고정), 빈 칸 + 클릭·Hover 가이드(영상 대신 Figma 6프레임 순환), 보조기능 토글(켜짐 = 주황 테두리·글자), 명령어 전체보기·▲ = 명령창 위로 펼치기, Layout 탭 선택·+·×·더블클릭/F2 이름 변경·Delete, 명령창 Enter 실행. 좁은 폭의 ▲ 확장 목록은 「화면 폭 변화」, Hover · Active · Selected · Disabled는 이 화면의 각 부품에서 동작합니다.">
        <Workspace width={1920} />
      </StorySection>
-      <StorySection title="참고: 실제 화면 (사용자 제공, 1915 × 1030)" description="Model 탭: 실제 화면은 선택 탭이 주황이지만 Figma model On(26:9925)은 갈색이므로 Figma 값을 유지합니다. 뷰 큐브(평면도)와 도면 왼쪽 위 표시는 Footer 범위 밖입니다.">
-        <div className="sw-story-scroller"><img className="sw-footer-story-reference" src={referenceScreen} alt="실제 SW 화면 참고 (Footer 조합)" /></div>
-      </StorySection>
    </StoryPage>
  ),
 }

-// ---------- 3. 도구 그룹별 표시 ----------
+// ---------- 2. 도구 그룹별 표시 ----------

 export const ToolGroups: Story = {
  name: "도구 그룹별 표시",
@@ -130,7 +108,7 @@ export const ToolGroups: Story = {
  ),
 }

-// ---------- 4. Figma 디자인별 Variant (35 노드) ----------
+// ---------- 3. Figma 디자인별 Variant (35 노드) ----------

 function Node({ id, name, impl, states, children }: { id: string; name: string; impl: string; states: string; children: ReactNode }) {
  return (
@@ -198,25 +176,9 @@ const MENU_NODES: [string, string][] = [
  ["26:9494", "레이어"], ["26:9501", "뷰"], ["26:9508", "선택/조회"], ["26:9515", "도로/횡단"], ["26:9522", "구조/배근"],
 ]
 const toolProps = (tool: SWFooterTool) => ({ label: tool.label, icon: tool.icon, activeIcon: tool.activeIcon, "aria-label": tool.ariaLabel })
-const AUX0 = { label: AUX_ITEMS[0].label, icon: AUX_ITEMS[0].icon }
 /** Figma component sets of the six auxiliary toggles, in AUX_ITEMS order. */
 const AUX_SETS = ["26:9248", "26:9267", "26:9298", "26:9320", "26:9381", "26:9412"]

-/** Live toggles: click to select / deselect; "하나만" makes the selection move between buttons. */
-function AuxToggleDemo() {
-  const [items, setItems] = useState(AUX_ITEMS)
-  const [single, setSingle] = useState(false)
-  return (
-    <div className="sw-footer-story-aux-demo">
-      <label className="sw-story-log"><input type="checkbox" checked={single} onChange={event => setSingle(event.target.checked)} /> 하나만 선택(다른 버튼을 누르면 선택 이동)</label>
-      <SWTheme className="sw-footer-story-group-surface sw-footer-story-inline">
-        <SWFooterAuxGroup items={items} onPressedChange={(id, pressed) => setItems(list => list.map(item => (
-          item.id === id ? { ...item, pressed } : single && pressed ? { ...item, pressed: false } : item)))} />
-      </SWTheme>
-      <p className="sw-story-log" data-aux-state="">선택: {items.filter(item => item.pressed).map(item => item.label).join(", ") || "없음"}</p>
-    </div>
-  )
-}
 const SMALL_COMMAND = { width: 120, ["--hm-sw-footer-command-expanded-height" as string]: "71px" }

 export const FigmaVariants: Story = {
@@ -303,6 +265,22 @@ export const FigmaVariants: Story = {
          </Node>
        </div>
      </StorySection>
+      <StorySection title="보조기능 버튼 (btn_객체스냅 26:9248 … btn_선가중치 26:9412)" description="35개 목록 밖 보조 참고. 구현 열: Default · Hover · Selected · Selected + Hover (Hover는 data-sb-hover 고정).">
+        <div className="sw-footer-story-aux-compare">
+          {AUX_ITEMS.map((item, index) => (
+            <figure key={item.id} className="sw-footer-story-aux-row">
+              <figcaption>{AUX_SETS[index]} {item.label}</figcaption>
+              <img src={new URL(`./assets/figma-reference/footer/aux-buttons/${AUX_SETS[index].replace(":", "-")}.png`, import.meta.url).href} alt={`Figma ${AUX_SETS[index]} ${item.label}`} />
+              <SWTheme className="sw-footer-story-group-surface sw-footer-story-aux-states">
+                <SWFooterAuxButton label={item.label} icon={item.icon} pressed={false} />
+                <Pin hover=".hm-sw-footer-aux__button"><SWFooterAuxButton label={item.label} icon={item.icon} pressed={false} /></Pin>
+                <SWFooterAuxButton label={item.label} icon={item.icon} pressed />
+                <Pin hover=".hm-sw-footer-aux__button"><SWFooterAuxButton label={item.label} icon={item.icon} pressed /></Pin>
+              </SWTheme>
+            </figure>
+          ))}
+        </div>
+      </StorySection>
      <StorySection title="명령창">
        <div className="sw-footer-story-nodes">
          <Node id="26:10023" name="ico_arrow" impl="SWFooterCommandLine 펼치기 버튼" states="Default · Hover · On(펼침) · On + Hover">
@@ -321,73 +299,7 @@ export const FigmaVariants: Story = {
  ),
 }

-// ---------- 5. Hover / Active / Selected / Disabled ----------
-
-function StateCell({ title, children }: { title: string; children: ReactNode }) {
-  return <figure className="sw-footer-story-state"><figcaption>{title}</figcaption><SWTheme className="sw-footer-story-group-surface">{children}</SWTheme></figure>
-}
-
-export const States: Story = {
-  name: "Hover / Active / Selected / Disabled",
-  render: () => {
-    const line = DRAW_TOOLS[0]
-    return (
-      <StoryPage>
-        <StoryPageHeader kicker={KICKER} title="상태" description="Hover·Selected는 Figma 값. Active(누르는 중)와 Disabled는 Figma에 없어 기존 SW 규칙(누름 = Hover와 같음, Disabled = 40%)을 따릅니다. Focus는 SW 공통 2px #F0F7F5." />
-        <StorySection title="명령 버튼">
-          <div className="sw-footer-story-states">
-            <StateCell title="Default"><SWFooterToolButton {...toolProps(line)} /></StateCell>
-            <StateCell title="Hover"><Pin hover=".hm-sw-footer-tool"><SWFooterToolButton {...toolProps(line)} /></Pin></StateCell>
-            <StateCell title="Active (누름 = Hover)"><Pin hover=".hm-sw-footer-tool"><SWFooterToolButton {...toolProps(line)} /></Pin></StateCell>
-            <StateCell title="Selected (pressed)"><SWFooterToolButton {...toolProps(line)} pressed /></StateCell>
-            <StateCell title="Disabled"><SWFooterToolButton {...toolProps(line)} disabled /></StateCell>
-          </div>
-        </StorySection>
-        <StorySection title="빈 칸 · 분류 탭">
-          <div className="sw-footer-story-states">
-            <StateCell title="빈 칸 Default"><SWFooterAddSlot guide={false} /></StateCell>
-            <StateCell title="빈 칸 Hover"><Pin hover=".hm-sw-footer-add"><SWFooterAddSlot guide={false} /></Pin></StateCell>
-            <StateCell title="빈 칸 Disabled"><SWFooterAddSlot guide={false} disabled /></StateCell>
-            <StateCell title="분류 Default · Hover · Selected · Disabled">
-              <Pin hover="#sw-footer-state-b">
-                <SWFooterMenu items={[{ id: "a", label: "도형" }, { id: "b", label: "수정" }, { id: "c", label: "편집" }, { id: "d", label: "문자", disabled: true }]} value="a" tabIdPrefix="sw-footer-state" />
-              </Pin>
-            </StateCell>
-          </div>
-          <p className="sw-story-log">분류 Hover 고정: 두 번째 탭(수정)에 data-sb-hover.</p>
-        </StorySection>
-        <StorySection title="보조기능 버튼 (Figma btn_객체스냅 26:9248 … btn_선가중치 26:9412)" description="Default = 갈색 그라데이션 테두리 · #F1EDE5 아이콘 · #F6F4F2 글자. Hover = 노랑 테두리(SW Header Hover 토큰)만, 아이콘·글자 기본색. Selected(Figma Variant2 = Variant3) = 주황 그라데이션 테두리 + #FF5C00 아이콘 + #FF5C00 글자, Hover 중에도 유지.">
-          <div className="sw-footer-story-aux-compare">
-            {AUX_ITEMS.map((item, index) => (
-              <figure key={item.id} className="sw-footer-story-aux-row">
-                <figcaption>{AUX_SETS[index]} {item.label}</figcaption>
-                <img src={new URL(`./assets/figma-reference/footer/aux-buttons/${AUX_SETS[index].replace(":", "-")}.png`, import.meta.url).href} alt={`Figma ${AUX_SETS[index]} ${item.label}`} />
-                <SWTheme className="sw-footer-story-group-surface sw-footer-story-aux-states">
-                  <SWFooterAuxButton label={item.label} icon={item.icon} pressed={false} />
-                  <Pin hover=".hm-sw-footer-aux__button"><SWFooterAuxButton label={item.label} icon={item.icon} pressed={false} /></Pin>
-                  <SWFooterAuxButton label={item.label} icon={item.icon} pressed />
-                  <Pin hover=".hm-sw-footer-aux__button"><SWFooterAuxButton label={item.label} icon={item.icon} pressed /></Pin>
-                </SWTheme>
-              </figure>
-            ))}
-          </div>
-          <p className="sw-story-log">구현 열: Default · Hover · Selected · Selected + Hover (Hover는 data-sb-hover 고정)</p>
-          <AuxToggleDemo />
-        </StorySection>
-        <StorySection title="측면 버튼 (Figma Default만 있음)" description="Hover·pressed는 Footer의 #FF5C00 글자 규칙을 재사용(Figma 미정의).">
-          <div className="sw-footer-story-states">
-            <StateCell title="보조 Disabled"><SWFooterAuxButton {...AUX0} disabled /></StateCell>
-            <StateCell title="측면 Default"><SWFooterSideButton title="보조기능" subtitle="전체보기" /></StateCell>
-            <StateCell title="측면 Hover"><Pin hover=".hm-sw-footer-side"><SWFooterSideButton title="명령어" subtitle="전체보기" side="end" /></Pin></StateCell>
-            <StateCell title="측면 Disabled"><SWFooterSideButton title="명령어" subtitle="전체보기" side="end" disabled /></StateCell>
-          </div>
-        </StorySection>
-      </StoryPage>
-    )
-  },
-}
-
-// ---------- 6. 도구 및 메뉴 변경 예제 ----------
+// ---------- 4. 도구 및 메뉴 변경 예제 ----------

 const icon = (node: ReactNode) => <span className="sw-footer-story-lucide">{node}</span>
 const CUSTOM: SWFooterCategory[] = [
@@ -446,7 +358,7 @@ export const CustomContent: Story = {
  ),
 }

-// ---------- 7. 화면 폭 ----------
+// ---------- 5. 화면 폭 ----------

 function ReferenceFooter() {
  const [open, setOpen] = useState(false)
@@ -473,23 +385,11 @@ export const Responsive: Story = {
          </div>
        ))}
      </StorySection>
-      <StorySection title="참고: 실제 좁은 화면 (사용자 제공, 952px)">
-        <img className="sw-footer-story-reference-narrow" src={referenceNarrow} alt="실제 SW 좁은 화면 참고" />
-      </StorySection>
-      <StorySection title="Figma 기본 구성 (명령창 없음)" description="빈 칸이 slotCount(17)까지 채우고 폭에 맞춰 줄어듦. 명령이 넘치면 같은 ▲ 패널.">
-        {[1920, 1280, 1024, 820].map(width => (
-          <div key={width} className="sw-footer-story-width">
-            <p className="sw-story-log">{width}px</p>
-            <Screen width={width} canvas={60}><SWFooter categories={CATEGORIES} auxItems={AUX_ITEMS} onSlotAdd={noop}
-              layoutTabs={<SWFooterLayoutTabs layouts={LAYOUTS} value="layout1" onAdd={noop} />} /></Screen>
-          </div>
-        ))}
-      </StorySection>
    </StoryPage>
  ),
 }

-// ---------- 8. 개별 부품 ----------
+// ---------- 6. 개별 부품 ----------

 export const Parts: Story = {
  name: "개별 부품 (조합용)",
@@ -1,11 +1,11 @@
 import { useId, useState } from "react"
 import type { Meta, StoryObj } from "@storybook/react-vite"
 import {
-  SWHeaderColorMenu, SWHeaderInput, SWHeaderLayerMenu, SWHeaderPropertyPanel, SWPopup, SWPopupRow, SWPopupSection, SWTheme,
-  type SWHeaderColorOption, type SWHeaderLayer, type SWHeaderProperty,
+  SWHeaderInput, SWHeaderPropertyPanel, SWPopup, SWPopupPropertyRow, SWPopupRow, SWPopupSection, SWSelect, SWSlider, SWTheme,
+  type SWHeaderColorOption, type SWHeaderLayer, type SWHeaderProperty, type SWSliderAppearance,
 } from "@hm-design/sw"
 import "@hm-design/sw/styles.css"
-import { Button, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, Slider, Switch } from "@hm-design/ui"
+import { Button, Slider, Switch } from "@hm-design/ui"
 import { StoryPage, StoryPageHeader, StorySection } from "@/components/story-page"
 import "./sw-stories.css"
 import "./sw-integrated-stories.css"
@@ -24,6 +24,11 @@ const COLORS: SWHeaderColorOption[] = [
  { id: "green", color: "#00ff00", label: "초록" }, { id: "blue", color: "#0000ff", label: "파랑" },
 ]

+const UNITS = ["mm", "cm", "m"].map(value => ({ value }))
+const MENUS = { layers: LAYERS, colors: COLORS }
+const layerProperty = (value: string): SWHeaderProperty => ({ id: "layer", name: "레이어", value, type: "select", groupId: "popup", picker: "layer", options: LAYERS.map(({ id, name }) => ({ id, name })) })
+const APPEARANCES = [{ value: "panel", label: "A · panel (기본)" }, { value: "property", label: "B · property" }]
+
 const meta = {
  title: "SW/Popup",
  parameters: { layout: "fullscreen", controls: { disable: true } },
@@ -38,11 +43,11 @@ function useLog() {
 }

 function SettingsPopup({ record }: { record: (line: string) => void }) {
-  const ids = { name: useId(), scale: useId(), snap: useId() }
+  const ids = { name: useId(), scale: useId(), unit: useId(), snap: useId() }
  const [name, setName] = useState("평면도-01")
  const [scale, setScale] = useState("100")
  const [layerId, setLayerId] = useState("wall")
-  const [color, setColor] = useState({ value: "255,0,0", swatch: "#ff0000" })
+  const [color, setColor] = useState("255,0,0")
  const [snap, setSnap] = useState(true)
  const [opacity, setOpacity] = useState([60])
  const [unit, setUnit] = useState("mm")
@@ -55,21 +60,17 @@ function SettingsPopup({ record }: { record: (line: string) => void }) {
        <SWPopupRow label="축척" htmlFor={ids.scale} unit="%" numeric>
          <SWHeaderInput id={ids.scale} valueType="number" value={scale} onCommit={next => { setScale(next); record(`scale=${next}`) }} />
        </SWPopupRow>
-        <SWPopupRow label="단위" field="none">
-          <Select value={unit} onValueChange={next => { setUnit(next); record(`unit=${next}`) }}>
-            <SelectTrigger data-ui-select=""><SelectValue /></SelectTrigger>
-            <SelectContent>{["mm", "cm", "m"].map(item => <SelectItem key={item} value={item}>{item}</SelectItem>)}</SelectContent>
-          </Select>
+        <SWPopupRow label="단위" htmlFor={ids.unit} field="none">
+          <SWSelect id={ids.unit} value={unit} options={UNITS} onValueChange={next => { setUnit(next); record(`unit=${next}`) }} data-sw-select="unit" />
        </SWPopupRow>
      </SWPopupSection>
-      <SWPopupSection title="SW Dropdown">
-        <div data-popup-layer="">
-          <SWHeaderLayerMenu value={{ name: LAYERS.find(layer => layer.id === layerId)!.name }} layers={LAYERS} activeLayerId={layerId}
-            onLayerSelect={layer => { setLayerId(layer.id); record(`layer=${layer.id}`) }} />
-        </div>
-        <div data-popup-color="">
-          <SWHeaderColorMenu value={color} colors={COLORS} onColorSelect={option => { setColor({ value: option.value ?? option.color, swatch: option.color }); record(`color=${option.id}`) }} />
-        </div>
+      {/* 2026-10-20: popup layer / color controls are the property window pickers (SWPopupPropertyRow), not the
+          SWHeader field dropdowns (header-only design). */}
+      <SWPopupSection title="레이어 · 색상">
+        <SWPopupPropertyRow property={layerProperty(layerId)} menus={MENUS}
+          onPropertyChange={(_, value) => { setLayerId(value); record(`layer=${value}`) }} />
+        <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">
        <SWPopupRow label="스냅" htmlFor={ids.snap} field="none">
@@ -121,6 +122,38 @@ function PanelWithChildren({ record }: { record: (line: string) => void }) {
  )
 }

+/** SWSlider: the same value and events in both looks; the host only picks `appearance`. */
+function OpacityStylePopups({ record }: { record: (line: string) => void }) {
+  const [opacity, setOpacity] = useState(40)
+  const [appearance, setAppearance] = useState<SWSliderAppearance>("panel")
+  const slider = (look: SWSliderAppearance, label: string) => (
+    <SWSlider appearance={look} value={opacity} min={0} max={100} step={10} aria-label={label} data-sw-slider={look}
+      onValueChange={setOpacity} onValueCommit={next => record(`opacity(${look})=${next}`)} />
+  )
+  return (
+    <>
+      <SWPopup title="투명도 · 스타일 비교" data-popup="opacity-compare">
+        <SWPopupSection title="A = panel · B = property (같은 값)">
+          <SWPopupRow label="스타일 A" field="none" unit="%">{slider("panel", "투명도 A")}</SWPopupRow>
+          <SWPopupRow label="스타일 B" field="none" unit="%">{slider("property", "투명도 B")}</SWPopupRow>
+          <SWPopupRow label="값" field="compact" unit="%">
+            <SWHeaderInput valueType="number" value={String(opacity)} aria-label="투명도 값" onCommit={next => { setOpacity(Math.min(100, Math.max(0, Number(next)))); record(`opacity=${next}`) }} />
+          </SWPopupRow>
+        </SWPopupSection>
+      </SWPopup>
+      <SWPopup title="투명도 · 선택 결과" data-popup="opacity-select">
+        <SWPopupSection title="appearance">
+          <SWPopupRow label="스타일" field="none">
+            <SWSelect aria-label="게이지바 스타일" value={appearance} options={APPEARANCES} onValueChange={next => { setAppearance(next as SWSliderAppearance); record(`appearance=${next}`) }} />
+          </SWPopupRow>
+          <SWPopupRow label="투명도" field="none" unit="%">{slider(appearance, "투명도 (선택한 스타일)")}</SWPopupRow>
+          <SWPopupRow label="비활성" field="none" unit="%" disabled><SWSlider appearance={appearance} value={opacity} disabled aria-label="투명도 (비활성)" /></SWPopupRow>
+        </SWPopupSection>
+      </SWPopup>
+    </>
+  )
+}
+
 function PopupPage() {
  const [log, record] = useLog()
  return (
@@ -128,13 +161,18 @@ function PopupPage() {
      <StoryPageHeader kicker={KICKER} title="SW Popup — 외형 고정, 콘텐츠 자유"
        description="SWPopup은 속성창 프레임(314px, 제목줄, 닫기, 내부 스크롤)을 그대로 쓰고 children으로 아무 콘텐츠나 받습니다. SWPopupSection / SWPopupRow는 속성창 그룹·행 모양을 그대로 재사용합니다. Header 없이 SWTheme 안에서 씁니다." />
      {log}
-      <StorySection title="사용자 정의 설정 · 객체 정보 · 기존 속성창 + children" description="SW Input·Dropdown과 HM UI Switch·Slider·Select·Button을 함께 배치합니다. 기존 SWHeaderPropertyPanel도 children을 받습니다.">
+      <StorySection title="사용자 정의 설정 · 객체 정보 · 기존 속성창 + children" description="SW Input·Select(단위, Viewer 축척 지정과 같은 SWSelect)·레이어/색상(속성창 컨트롤 SWPopupPropertyRow — SWHeader 필드 Dropdown은 Header 전용)과 HM UI Switch·Slider·Button을 함께 배치합니다. 기존 SWHeaderPropertyPanel도 children을 받습니다.">
        <SWTheme className="sw-story-popups" data-popups="">
          <SettingsPopup record={record} />
          <ObjectInfoPopup record={record} />
          <PanelWithChildren record={record} />
        </SWTheme>
      </StorySection>
+      <StorySection title="투명도 게이지바 스타일 (SWSlider appearance)" description={<><code>appearance=&quot;panel&quot;</code>(기본, A) = 지금까지 Popup에서 쓰던 게이지바(6px 트랙 · 18px 흰 Thumb · 녹색 Range, SWViewerSlider와 같은 모양). <code>appearance=&quot;property&quot;</code>(B) = 속성창 4개 상태 비교의 게이지바(베이지 트랙 · 빨강 채움 · Figma Thumb). 값·<code>onValueChange</code>·<code>onValueCommit</code>·키보드는 같고 모양만 바뀝니다. 색은 SW 토큰(<code>--hm-sw-slider-panel-*</code>, <code>--hm-sw-property-range-*</code>)을 따릅니다.</>}>
+        <SWTheme className="sw-story-popups" data-slider-popups="">
+          <OpacityStylePopups record={record} />
+        </SWTheme>
+      </StorySection>
    </StoryPage>
  )
 }
@@ -144,6 +182,7 @@ export const CustomContent: Story = { name: "Custom Content", render: () => <Pop
 function StackPage() {
  const [log, record] = useLog()
  const [open, setOpen] = useState(["a", "b", "c"])
+  const [layerB, setLayerB] = useState("wall")
  const close = (id: string) => { setOpen(list => list.filter(item => item !== id)); record(`close(${id})`) }
  const rows = Array.from({ length: 30 }, (_, index) => index + 1)
  return (
@@ -155,7 +194,7 @@ function StackPage() {
      <SWTheme className="sw-story-popups" data-stack="">
        {open.includes("a") && <SWPopup title="Popup A" onClose={() => close("a")} data-popup="a"><SWPopupSection title="A"><SWPopupRow label="값"><SWHeaderInput value="A" aria-label="A 값" onCommit={next => record(`a=${next}`)} /></SWPopupRow></SWPopupSection></SWPopup>}
        {open.includes("b") && <SWPopup title="Popup B" onClose={() => close("b")} data-popup="b"><SWPopupSection title="B">
-          <div data-popup-layer=""><SWHeaderLayerMenu value={{ name: "WALL" }} layers={LAYERS} activeLayerId="wall" /></div>
+          <SWPopupPropertyRow property={layerProperty(layerB)} menus={MENUS} onPropertyChange={(_, value) => { setLayerB(value); record(`b.layer=${value}`) }} />
        </SWPopupSection></SWPopup>}
        {open.includes("c") && <SWPopup title="Popup C · 긴 콘텐츠" onClose={() => close("c")} data-popup="c" style={{ maxHeight: 360 }}>
          <SWPopupSection title="많은 필드">{rows.map(row => <SWPopupRow key={row} label={`필드 ${row}`} unit="mm" numeric><SWHeaderInput valueType="number" value={String(row)} aria-label={`필드 ${row}`} /></SWPopupRow>)}</SWPopupSection>
@@ -24,7 +24,6 @@
 .sw-viewer-story-props dd { margin: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-family: ui-monospace, monospace; user-select: all; }
 .sw-viewer-story-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 40px 0; text-align: center; font-size: 12px; color: var(--hm-sw-viewer-panel-label); }
 .sw-viewer-story-steps { margin: 0; padding-left: 20px; font-size: 14px; }
-.sw-viewer-story-select { height: 28px; padding: 0 8px; border: 1px solid var(--hm-sw-viewer-panel-inner-border); border-radius: 4px; background: var(--hm-sw-viewer-panel-field-background); font: inherit; font-size: 12px; }
 .sw-viewer-story-reopen { position: absolute; left: 712px; top: 16px; padding: 6px 10px; border-radius: 4px; background: #f5f0e5; font-size: 12px; }
 .sw-viewer-story-context { display: flex; align-items: center; justify-content: center; height: 160px; border: 1px dashed #9a9284; border-radius: 4px; background: #f5f0e5; color: #3e3523; font-size: 13px; }
 .sw-viewer-story-mode { display: flex; gap: 16px; margin-bottom: 8px; font-size: 13px; }
@@ -1,7 +1,7 @@
 import { useRef, useState, type ReactNode } from "react"
 import type { Meta, StoryObj } from "@storybook/react-vite"
 import {
-  SWHeader, SWViewerButton, SWViewerField, SWViewerHeader, SWViewerHint, SWViewerInput, SWViewerMenu, SWViewerPanel, SWViewerSection, SWViewerSwitch,
+  SWHeader, SWSelect, SWViewerButton, SWViewerField, SWViewerHeader, SWViewerHint, SWViewerInput, SWViewerMenu, SWViewerPanel, SWViewerSection, SWViewerSwitch,
  type SWViewerHeaderGroup, type SWViewerMenuEntry,
 } from "@hm-design/sw"
 import "@hm-design/sw/styles.css"
@@ -270,7 +270,7 @@ export const ContentVariants: Story = {
            <SWViewerSection title="입력">
              <SWViewerField label="축척">{id => <SWViewerInput id={id} value={scale} onChange={event => setScale(event.currentTarget.value)} style={{ width: 120 }} />}</SWViewerField>
              <SWViewerField label="스냅 사용">{id => <SWViewerSwitch id={id} checked={snap} onCheckedChange={setSnap} />}</SWViewerField>
-              <SWViewerField label="단위">{id => <select id={id} className="sw-viewer-story-select" defaultValue="mm"><option value="mm">mm</option><option value="m">m</option></select>}</SWViewerField>
+              <SWViewerField label="단위">{id => <SWSelect id={id} defaultValue="mm" options={[{ value: "mm" }, { value: "m" }]} onValueChange={value => demo.record(`unit=${value}`)} data-sw-select="unit" />}</SWViewerField>
            </SWViewerSection>
          </SWViewerPanel>
          {!inputOpen && <button type="button" className="sw-viewer-story-reopen" onClick={() => setInputOpen(true)}>축척 지정 다시 열기</button>}