-
-
-
-
-
+ const [log, setLog] = useState
([])
+ // The overlay positions itself on mount; focus after that initial hidden layout is resolved.
+ useEffect(() => {
+ if (!panel) return
+ const frame = requestAnimationFrame(() => document.getElementById(panelId)?.focus())
+ return () => cancelAnimationFrame(frame)
+ }, [panel, panelId])
+ const record = (line: string) => { setLog(lines => [...lines.slice(-11), line]); console.info(`[SWHeader Composed] ${line}`) }
+ const value = (id: string) => properties.find(item => item.id === id)?.value ?? ""
+ const change = (id: string, next: string, event: string) => {
+ setProperties(items => items.map(item => item.id === id ? { ...item, value: next, mixed: false } : item))
+ if (id === "color") setColorMode(null)
+ record(`${event}(${id}, ${next})`)
+ }
+ const availableLayers = scenario === "empty" ? [] : scenario === "long" ? LONG_LAYERS : scenario === "many" ? MANY_LAYERS : layers
+ const currentLayer = availableLayers.find(item => item.name === value("layer"))
+ const currentWeight = weights.find(item => item.id === weightId)
+ const color = parseSWHeaderColor(value("color"))
+ const menuProps = (id: SWHeaderMenuId) => ({
+ open: activeMenu === id, disabled,
+ onClick: () => record(`on${id[0].toUpperCase() + id.slice(1)}Open`),
+ onOpenChange: (open: boolean) => {
+ setActiveMenu(current => open ? id : current === id ? null : current)
+ record(`${id}Open(${open})`)
+ },
+ })
+ const detail = (name: string) => detailCallbacks ? () => record(`on${name}Detail`) : undefined
+ const toggleLayer = (key: "visible" | "frozen" | "locked", event: string) => layerReadOnly ? undefined : (layer: SWHeaderLayer, next: boolean) => {
+ setLayers(items => items.map(item => item.id === layer.id || item.name === layer.id ? { ...item, [key]: next } : item))
+ record(`${event}(${layer.id}, ${next})`)
+ }
+ const chooseWeight = (weight: SWHeaderLineWeight) => {
+ setWeightId(weight.id)
+ if (weight.value !== undefined) change("weight", weight.value, "onLineWeightSelect")
+ else record(`onLineWeightSelect(${weight.id})`)
+ }
+ const changeWeight = (weight: SWHeaderLineWeight, next: string) => {
+ setWeights(items => items.map(item => item.id === weight.id ? { ...item, value: next } : item))
+ if (weightId === weight.id) change("weight", next, "onLineWeightValueChange")
+ else record(`onLineWeightValueChange(${weight.id}, ${next})`)
+ }
+ const closePanel = () => {
+ setPanel(false); record("onPropertyPanelOpenChange(false)")
+ detailRef.current?.querySelector("[data-property-panel-trigger]")?.focus()
+ }
+ const menus: SWHeaderPropertyMenus = {
+ layers: availableLayers, lineTypes: PROPERTY_LINE_TYPES, lineWeights: weights, activeLineWeightId: weightId, lineScale: value("scale"),
+ colors: FIGMA_COLORS, userColors: scenario === "many" ? MANY_USER_COLORS : FIGMA_USER_COLORS, colorMode,
+ onLayerVisibilityChange: toggleLayer("visible", "onLayerVisibilityChange"), onLayerFreezeChange: toggleLayer("frozen", "onLayerFreezeChange"), onLayerLockChange: toggleLayer("locked", "onLayerLockChange"),
+ onLayerDetail: detail("Layer"), onLineStyleDetail: detail("LineStyle"), onColorDetail: detail("Color"),
+ onLineWeightSelect: chooseWeight, onLineWeightValueChange: changeWeight, onLineScaleChange: next => change("scale", next, "onLineScaleChange"),
+ onColorModeChange: mode => { setColorMode(mode); record(`onColorModeChange(${mode})`) }, onColorPick: () => record("onColorPick"),
+ }
+ const panelProperties = properties.map(item => ({ ...item, disabled, ...(item.id === "layer" ? { options: availableLayers.map(layer => ({ ...layer, id: layer.name })) } : {}) }))
+ return
+
+
+ 시연 설정
+
+
+
+
+
+
+
+
+
+
change("layer", layer.name, "onLayerSelect")} onDetail={detail("Layer")}
+ onVisibilityChange={scenario === "normal" ? menus.onLayerVisibilityChange : undefined} onFreezeChange={scenario === "normal" ? menus.onLayerFreezeChange : undefined} onLockChange={scenario === "normal" ? menus.onLayerLockChange : undefined} />
+ change("color", item.value ?? parseSWHeaderColor(item.color)?.value ?? item.color, "onColorSelect")}
+ onColorInput={next => change("color", next.value, "onColorInput")} onModeChange={mode => { setColorMode(mode); record(`onColorModeChange(${mode})`) }}
+ onPick={() => record("onColorPick")} onDetail={detail("Color")} />
+ change("line", item.name, "onLineTypeSelect")} onLineWeightSelect={chooseWeight} onLineWeightValueChange={changeWeight}
+ onScaleChange={next => change("scale", next, "onLineScaleChange")} onDetail={detail("LineStyle")} />
+ { setTextStyle({ font: item.font, name: item.name }); record(`onTextStyleSelect(${item.id})`) }} onDetail={detail("TextStyle")} />
+ { setDimensionStyle({ name: item.name }); record(`onDimensionStyleSelect(${item.id})`) }} onDetail={detail("DimensionStyle")} />
+
+ { setActiveMenu(null); setBar(next => !next); record(`onPropertyBarOpenChange(${!bar})`) }}
+ onPanelToggle={() => { setActiveMenu(null); setPanel(next => !next); record(`onPropertyPanelOpenChange(${!panel})`) }} />
-
-
-
-
-
- )
+
+
+
+
+
}
/** Neutral sample logos with different ratios (no product or brand). */
@@ -558,16 +637,7 @@ const MANY_LAYERS: SWHeaderLayer[] = Array.from({ length: 20 }, (_, index) => ({
frozen: index % 5 === 2,
locked: index % 6 === 3,
}))
-/**
- * Icon variant matrix: rows 1-2 colored (visible, thawed, unlocked), rows 3-4 gray (hidden, frozen,
- * locked); rows 2 and 4 get pinned icon hover.
- */
-const ICON_LAYERS: SWHeaderLayer[] = [
- { id: "icon-on", name: "컬러 (Default)", visible: true, frozen: false, locked: false },
- { id: "icon-on-hover", name: "컬러 Hover (Variant2)", visible: true, frozen: false, locked: false },
- { id: "icon-off", name: "회색 (Variant3)", visible: false, frozen: true, locked: true },
- { id: "icon-off-hover", name: "회색 Hover (Variant4)", visible: false, frozen: true, locked: true },
-]
+
const noop = () => {}
type LayerHostProps = Partial & { onLog?: (line: string) => void; showState?: boolean }
@@ -618,94 +688,6 @@ function LayerDemo({ width, ...props }: LayerHostProps & { width: number }) {
)
}
-/** Standalone open layer menu: the 12 icon variants (rows 2 and 4 pin the icon hover). */
-function IconMatrix() {
- return (
-
-
-
-
-
-
-
- )
-}
-
-const NARROW_LAYER_WIDTHS = [1440, 1080, 900, 768, 640, 390]
-
-export const LayerDropdown: Story = {
- name: "Layer Dropdown",
- parameters: { controls: { disable: true } },
- render: () => (
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {NARROW_LAYER_WIDTHS.map(width => (
-
-
-
- ))}
-
- ),
-}
-
/* ------------------------------------------------------------------------------------------------
Field dropdowns (2026-10-16): color 26:10986 / 26:11036, ByLayer 26:12666, ByBlock 26:12659,
line style 26:11104 (rows 26:10702), text style 26:11181, dimension style 26:11215.
@@ -843,127 +825,6 @@ function StyleDemo({ width, ...props }: StyleHostProps & { width: number }) {
)
}
-/** Latest explicit hover exceptions: mode pair and five detail buttons. */
-const MENU_BUTTON_HOVER = [".hm-sw-header__color-mode", ".hm-sw-header__color-option", ".hm-sw-header__color-pick", ".hm-sw-header__menu-detail"]
-
-export const ColorDropdown: Story = {
- name: "Color Dropdown",
- parameters: { controls: { disable: true } },
- render: () => (
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- ),
-}
-
-export const LineStyleDropdown: Story = {
- name: "Line Style Dropdown",
- parameters: { controls: { disable: true } },
- render: () => (
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- ),
-}
-
-export const TextDimensionStyleDropdown: Story = {
- name: "Text · Dimension Style Dropdown",
- parameters: { controls: { disable: true } },
- render: () => (
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- ),
-}
-
const MORE_WIDTHS = [1920, 1800, 1799, 1440, 1180, 1179, 1080, 1079, 900, 899, 768, 640, 639, 520, 519, 390]
export const ResponsiveMore: Story = {
@@ -1348,8 +1209,6 @@ export const Colorize: Story = {
render: () => ,
}
-
-
/* 2026-10-16 composition review: every part except the logo can be removed (hiddenControls), the five
similar menus can be reordered (menuOrder). Untouched props keep the approved default header. */
const HIDEABLE_PARTS: { id: SWHeaderHideableControlId; name: string }[] = [