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"> {