fix(sw): refine property panel and Firefox range styles

- Property bar ends after its last field (content width, scrolls when longer)
- Remove Figma canvas layers from property tool and close SVGs
- Suppress header field hover while the field's own dropdown is open
- Gauge: Figma red fill pill, beige track, Figma thumb SVG; shared
  paint for WebKit and Gecko (::-moz-range-*) so Firefox matches Chrome
- Story buttons for gauge external value / disabled / read-only
- Browser checks: follow-up fixes, Chrome vs Firefox range, close button

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

packages/sw/src/components/sw-header/SWHeader.tsx

@@ -454,7 +454,7 @@ export const SWHeader = forwardRef<HTMLElement, SWHeaderProps>(function SWHeader
           <SWHeaderWindowControls onWindowMoveStart={onWindowMoveStart} onMinimize={onMinimize} onClose={onClose} showWindowMove={shown("windowMove")} showMinimize={shown("minimize")} showClose={shown("close")} />
         </div>}
       </div>
-      {barOpen && barData && <div className="hm-sw-header__bar-anchor" style={{ left: barOffset, width: `calc(100% - ${barOffset}px)` }}><SWHeaderPropertyBar {...barData} disabled={disabled || propertyBar?.disabled} id={barId} /></div>}
+      {barOpen && barData && <div className="hm-sw-header__bar-anchor" style={{ left: barOffset, maxWidth: `calc(100% - ${barOffset}px)` }}><SWHeaderPropertyBar {...barData} disabled={disabled || propertyBar?.disabled} id={barId} /></div>}
       {panelOpen && propertyPanel && <SWHeaderPropertyPanel {...propertyPanel} id={panelId} anchorRef={panelAnchorRef} onClose={closePanel} />}
     </header>
   )

packages/sw/src/components/sw-header/components/SWHeaderPropertyPanel.tsx

@@ -143,6 +143,8 @@ function PropertyEditor({ property, onChange }: { property: SWHeaderProperty; on
     onChange?.(property, next)
   }
   const cancelDraft = () => setDraft(value)
+  const rangeMin = property.min ?? 0, rangeMax = property.max ?? 100, rangeValue = mixed ? rangeMin : Number(draft)
+  const rangeFill = rangeMax > rangeMin && Number.isFinite(rangeValue) ? Math.min(1, Math.max(0, (rangeValue - rangeMin) / (rangeMax - rangeMin))) : 0
   const nativeKeys = (event: React.KeyboardEvent<HTMLElement>) => {
     if (event.nativeEvent.isComposing) return
     if (event.key === "Enter") { event.preventDefault(); commit(draft) }
@@ -170,7 +172,7 @@ function PropertyEditor({ property, onChange }: { property: SWHeaderProperty; on
         {unit && type !== "slider" && <span className="hm-sw-property__unit">{unit}</span>}
         {type === "color" && <span className="hm-sw-property__swatch" aria-hidden="true"><i style={{ backgroundColor: property.swatch ?? parseSWHeaderColor(value)?.hex ?? "transparent" }} /></span>}
         {property.linePreview && <SWHeaderLinePreview pattern={property.linePattern} />}
-        {type === "slider" && <input type="range" aria-label={`${property.name} 슬라이더`} min={property.min ?? 0} max={property.max ?? 100} step={property.step ?? 1} value={mixed ? property.min ?? 0 : draft} disabled={!editable} onChange={event => setDraft(event.target.value)} onBlur={() => commit(draft)} onKeyDown={nativeKeys} />}
+        {type === "slider" && <input type="range" aria-label={`${property.name} 슬라이더`} min={property.min ?? 0} max={property.max ?? 100} step={property.step ?? 1} value={mixed ? rangeMin : draft} style={{ "--hm-sw-range-fill": rangeFill } as CSSProperties} disabled={!editable} onChange={event => setDraft(event.target.value)} onBlur={() => commit(draft)} onKeyDown={nativeKeys} />}
         {unit && type === "slider" && <span className="hm-sw-property__unit">{unit}</span>}
       </div>
     </div>