fix(sw): 2026-10-21 SW design review and responsive header without More from 760px

User-approved design review (2026-10-21):
- SW Header: from 760px up nothing moves into More; the five menus stay with their
  titles (titles and values ellipsize), file name shrinks to 96px. Open next to the
  logo no longer blocks field shrinking above 760px (760/768 overflow fixed, also for
  configured `controls` headers). Dropdown yellow ring inside the button, black seam.
- Property Bar values as read-only red text; property popup "=" labels, read-only
  black values, per-entry hover with pointer.
- Home Menu recent files (3 rows, path + name caption, empty preview), Footer + slot
  guide off by default, Viewer file list without icons, Storybook widths 1920-760.
- Tests: old More expectations (integrated-improvement, keyboard-dismiss,
  footer-popup-viewer-refinement, storybook-cleanup-stage1) moved to the new rule;
  functional checks kept.

src/sw/sw-header-overview.tsx

@@ -15,12 +15,14 @@ interface OverviewProps {
   propertyFixture: (selection: Selection) => SWHeaderProperty[]
   propertySelection: (selection: Selection) => SWHeaderPropertySelection
   barFixture: SWHeaderProperty[]
+  /** Object text of the property Bar (2026-10-21: the object type, e.g. 원). Default: the selection title. */
+  barTitle?: string
   /** Logo (home) menu of the SW normal mode: the logo opens and closes it (SWHeader homeMenu). */
   homeMenuSections?: readonly SWHomeMenuSectionData[]
 }
 
 /** Storybook host only; dropdowns, validation, editing and focus use the public SW components. */
-export function SWHeaderOverview({ initial, fixtures, propertyGroups, propertyFixture, propertySelection, barFixture, homeMenuSections }: OverviewProps) {
+export function SWHeaderOverview({ initial, fixtures, propertyGroups, propertyFixture, propertySelection, barFixture, barTitle, homeMenuSections }: OverviewProps) {
   const controlId = useId()
   const slotRef = useRef<HTMLDivElement>(null)
   const headerRef = useRef<HTMLElement>(null)
@@ -117,11 +119,12 @@ export function SWHeaderOverview({ initial, fixtures, propertyGroups, propertyFi
     onColorPick: () => record("onColorPick"), onColorDetail: () => record("onColorDetail"),
   }
   const guardedProperties = properties.map(property => ({ ...property, disabled: disabled || property.disabled, readOnly: readOnly || property.readOnly }))
-  const barProperties = guardedProperties.flatMap(property => {
-    const bar = barFixture.find(item => item.id === property.id)
-    return bar ? [{ ...bar, value: property.value, disabled: property.disabled, readOnly: property.readOnly }]
-      : property.id.startsWith("preview-extra-") ? [property] : []
-  })
+  // Bar order = barFixture order (2026-10-21: 반지름 / 지름 / 원주 / 면적), then the preview fields.
+  const barProperties = [
+    ...barFixture.flatMap(bar => guardedProperties.filter(property => property.id === bar.id)
+      .map(property => ({ ...bar, value: property.value, disabled: property.disabled, readOnly: property.readOnly }))),
+    ...guardedProperties.filter(property => property.id.startsWith("preview-extra-")),
+  ]
   const layer = layers.find(item => item.id === value("layer"))
   const line = fixtures.lineTypes.find(item => item.id === value("line"))
   const color = parseSWHeaderColor(value("color"))
@@ -184,7 +187,7 @@ export function SWHeaderOverview({ initial, fixtures, propertyGroups, propertyFi
             onDimensionStyleOpen={() => record("onDimensionStyleOpen")} onDimensionStyleDetail={() => record("onDimensionStyleDetail")}
             propertyBarOpen={barOpen} onPropertyBarOpenChange={next => { setBarOpen(next); record(`propertyBarOpen(${next})`) }}
             propertyPanelOpen={panelOpen} onPropertyPanelOpenChange={next => { setPanelOpen(next); record(`propertyPanelOpen(${next})`) }}
-            propertyBar={{ selection: propertySelection(example), properties: barProperties, onPropertyChange, readOnly, disabled }}
+            propertyBar={{ selection: { ...propertySelection(example), title: (propertySelection(example).kind === "single" && barTitle) || propertySelection(example).title }, properties: barProperties, onPropertyChange, readOnly, disabled }}
             propertyPanel={{ selection: propertySelection(example), properties: guardedProperties, groups: propertyGroups,
               expandedGroupIds: expanded, onExpandedGroupsChange: setExpanded, onPropertyChange, menus,
               shapeContent: emptyShape ? null : undefined, onOverviewClick: () => changeExample("all"),