feat(sw): implement SW header design system

src/sw/assets/sw-header-logo-placeholder.svg

@@ -0,0 +1,7 @@
+<!-- TEMPORARY placeholder for the SW Header logo slot (Storybook only). Not a product logo. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="64" height="34" viewBox="0 0 64 34" fill="none">
+  <rect x="1" y="1" width="62" height="32" rx="5" stroke="#F0F7F5" stroke-opacity="0.55" stroke-width="2" stroke-dasharray="5 4"/>
+  <circle cx="18" cy="17" r="7" fill="#F0F7F5" fill-opacity="0.55"/>
+  <rect x="30" y="11" width="22" height="4" rx="2" fill="#F0F7F5" fill-opacity="0.55"/>
+  <rect x="30" y="19" width="14" height="4" rx="2" fill="#F0F7F5" fill-opacity="0.35"/>
+</svg>

src/sw/sw-stories.css

@@ -0,0 +1,50 @@
+/* Story canvas only: frames that simulate a header width. Never styles the header itself. */
+.sw-story-scroller { max-width: 100%; overflow-x: auto; }
+.sw-story-frame { background: #060606; }
+.sw-story-composed {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  width: auto;
+  height: auto;
+  padding: 5px 8px;
+  background: var(--hm-sw-header-object-background);
+}
+.sw-story-scroller--menu { padding-bottom: 360px; }
+/* Only the two fixed dimension specimens use the full 1920px frame as their anchor. The shared
+   runtime dropdown still clamps to the real viewport. Scroll the specimen to see its right edge. */
+.sw-story-fixed-dimension .hm-sw-header__list-menu--dimension-style { left: auto !important; right: 0; }
+.sw-story-fixed-dimension .hm-sw-header__list-menu--dimension-style[data-shifted="true"]::before { top: calc(-1 * var(--hm-sw-header-field-height) - 1px); }
+.sw-story-explicit-disabled { min-width: 0; margin: 0; padding: 0; border: 0; }
+.sw-story-log { margin: 0 0 8px; font-size: 13px; color: #3d4a45; }
+.sw-story-stack { display: flex; flex-direction: column; gap: 8px; }
+/* Window Move Motion: window controls alone on the window-area surface, magnified for comparison. */
+.sw-story-window { display: flex; width: 152px; height: 48px; background: var(--hm-sw-header-document-background); }
+.sw-story-zoom { zoom: 3; width: max-content; }
+.sw-story-row { display: flex; flex-wrap: wrap; gap: 24px; }
+.sw-story-stages { display: grid; grid-template-columns: repeat(auto-fill, minmax(480px, 1fr)); gap: 16px; }
+.sw-story-stage { margin: 0; }
+.sw-story-stage figcaption { margin-top: 6px; font-size: 13px; color: #3d4a45; }
+/* Layer Dropdown: room below a standalone layer field for its overlay list. */
+.sw-story-layer-room { padding-bottom: 300px; }
+.sw-story-layer-state { margin: 0 0 8px; font-size: 12px; color: #3d4a45; font-family: ui-monospace, monospace; white-space: pre-wrap; }
+/* Field dropdowns / Dynamic Data: story-only controls and Figma reference images. */
+.sw-story-reference { display: block; max-width: none; image-rendering: pixelated; }
+.sw-story-figma { padding: 12px; background: #27241d; }
+.sw-story-figma .sw-story-reference { zoom: 2; }
+.sw-story-detail { background: var(--hm-sw-header-layer-menu-background); padding: 8px 12px; gap: 12px; }
+.sw-story-dynamic { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
+.sw-story-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 8px; font-size: 12px; color: #3d4a45; }
+.sw-story-controls > strong { min-width: 110px; }
+.sw-story-controls > button { padding: 2px 8px; border: 1px solid #b6c4bf; border-radius: 4px; background: #fff; color: #1f2a26; font-size: 12px; cursor: pointer; }
+.sw-story-property-room { min-height: 820px; }
+/* New responsive scenarios measure the Header at the actual viewport width. */
+.sw-story-followup.sb-page > .sb-page-inner { width: 100%; }
+/* Property panel states (2026-10-16): standalone panels at their natural size; the comparison wraps. */
+.sw-story-property-state { display: inline-block; }
+.sw-story-compare { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 24px; }
+.sw-story-compare__cell { margin: 0; }
+.sw-story-compare__cell figcaption { display: flex; flex-direction: column; gap: 2px; margin-bottom: 8px; font-size: 12px; color: #3d4a45; }
+.sw-story-detail-comparison { overflow-x: auto; padding: 16px; background: var(--hm-sw-header-layer-menu-background); }
+.sw-story-detail-row { display: grid; grid-template-columns: 140px repeat(4, 180px); align-items: center; gap: 16px; min-width: 924px; padding: 12px 0; }
+.sw-story-detail-row > div { display: flex; align-items: center; gap: 8px; }