refactor(storybook): consolidate property panel comparison layout

Keep sw-header--property-panel-compare as the single property panel state
page: the four existing SWHeaderPropertyPanel states in 2 columns x 2 rows
at their original size, inside a scrolling Inner. Remove the duplicate
Property Panel Variants and the four single-state Stories (SW 24 -> 19).
Storybook-only change; SW runtime and public API untouched.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

packages/sw/tests/followup-four.browser.mjs

@@ -72,8 +72,9 @@ for (const w of [1440, 1080, 768]) {
 }
 
 // ---- B. Tool icon
-await goto('property-panel-all')
-const tool = page.locator('.hm-sw-property__tool').first()
+// The four states share one Story since 2026-10-19; each check is scoped to its panel.
+await goto('property-panel-compare')
+const tool = page.locator('[data-compare="all"] .hm-sw-property__tool')
 const toolInfo = await tool.evaluate(e => { const s = getComputedStyle(e), imgs = [...e.querySelectorAll('img')].map(i => ({ cls: i.className, w: i.getBoundingClientRect().width, h: i.getBoundingClientRect().height, src: i.getAttribute('src').slice(0, 60) })); return { border: s.borderTopWidth + ' ' + s.borderTopColor, outline: s.outlineStyle, bg: s.backgroundColor, w: e.getBoundingClientRect().width, h: e.getBoundingClientRect().height, imgs } })
 report.data.tool = toolInfo
 check('B1 no CSS border/outline/background on tool button', toolInfo.border.startsWith('0px') && toolInfo.outline === 'none' && toolInfo.bg === 'rgba(0, 0, 0, 0)', toolInfo)
@@ -147,8 +148,8 @@ for (const menu of ['layer', 'color', 'text-style', 'dimension-style', 'line-sty
 }
 
 // ---- E. Gauge
-await goto('property-panel-circle')
-const range = page.locator('.hm-sw-property input[type="range"]').first()
+await goto('property-panel-compare')
+const range = page.locator('[data-compare="circle"] .hm-sw-property input[type="range"]')
 const gaugeState = () => range.evaluate(e => ({ value: e.value, fill: e.style.getPropertyValue('--hm-sw-range-fill'), track: getComputedStyle(e).getPropertyValue('--hm-sw-property-range-track').trim() }))
 const gaugePixels = async name => {
   const b = await range.boundingBox()
@@ -166,8 +167,8 @@ await range.focus(); for (let n = 0; n < 40; n++) await page.keyboard.press('Arr
 gs = await gaugePixels('keyboard'); report.data.gaugeKeyboard = gs
 check('E2 keyboard ArrowRight x40 -> 0.65, fill follows', gs.value === '0.65' && Math.abs(Number(gs.fill) - 0.65) < 1e-9 && isRed(gs.left) && isBeige(gs.right), gs)
 await page.keyboard.press('Enter')
-await page.waitForFunction(() => document.querySelector('.hm-sw-property [data-property-id="opacity"] .hm-sw-header__input')?.value === '0.65', null, { timeout: 2000 }).catch(() => {})
-const committed = await page.locator('.hm-sw-property [data-property-id="opacity"] .hm-sw-header__input').first().inputValue().catch(() => null)
+await page.waitForFunction(() => document.querySelector('[data-compare="circle"] .hm-sw-property [data-property-id="opacity"] .hm-sw-header__input')?.value === '0.65', null, { timeout: 2000 }).catch(() => {})
+const committed = await page.locator('[data-compare="circle"] [data-property-id="opacity"] .hm-sw-header__input').inputValue().catch(() => null)
 report.data.gaugeCommitted = committed
 check('E3 commit updates the number input (callback path)', committed === '0.65', { committed })
 await page.keyboard.press('End'); gs = await gaugePixels('max'); report.data.gaugeMax = gs
@@ -175,18 +176,19 @@ check('E4 max -> fill 1', gs.value === '1' && Number(gs.fill) === 1 && isRed(gs.
 await page.keyboard.press('Home'); gs = await gaugePixels('min'); report.data.gaugeMin = gs
 check('E5 min -> fill 0, beige right', gs.value === '0' && Number(gs.fill) === 0 && isBeige(gs.right), gs)
 // External value: type into the numeric input and commit
-const num = page.locator('.hm-sw-property [data-property-id="opacity"] .hm-sw-header__input').first()
+const num = page.locator('[data-compare="circle"] [data-property-id="opacity"] .hm-sw-header__input')
 await num.click(); await num.fill('0.5'); await num.press('Enter'); await page.mouse.move(1, 1)
 gs = await gaugeState(); report.data.gaugeExternal = gs
 check('E6 value changed elsewhere syncs gauge', gs.value === '0.5' && Number(gs.fill) === 0.5, gs)
-await page.locator('.hm-sw-property').first().screenshot({ path: path.join(out, 'E-panel-circle.png') })
+await page.locator('[data-compare="circle"] .hm-sw-property').screenshot({ path: path.join(out, 'E-panel-circle.png') })
 
 // ---- F. Panel four states render
+await goto('property-panel-compare')
 for (const id of ['property-panel-none', 'property-panel-all', 'property-panel-circle', 'property-panel-expanded']) {
-  await goto(id)
-  const sz = await page.locator('.hm-sw-property').first().evaluate(e => { const r = e.getBoundingClientRect(); return [r.width, r.height] })
+  const panel = page.locator(`[data-compare="${id.replace('property-panel-', '')}"] .hm-sw-property`)
+  const sz = await panel.evaluate(e => { const r = e.getBoundingClientRect(); return [r.width, r.height] })
   report.data[id] = sz
-  await page.locator('.hm-sw-property').first().screenshot({ path: path.join(out, `F-${id}.png`) })
+  await panel.screenshot({ path: path.join(out, `F-${id}.png`) })
   check(`F ${id} renders`, sz[0] === 314 && sz[1] > 200, sz)
 }
 check('G no page/console errors', report.errors.length === 0, report.errors)