Add DateRangePicker component with segmented entry and calendar popup

Implements the DateRangePicker design: a DateRangeField that looks like a
single input but splits each date into DD/MM/YYYY part inputs (ordered by
the new common.time.dateformat_hyphenated), and a DateRangeCalendar popup
with a preset column (today, yesterday, last 7/30 days, this/last month,
this year), anchor-style range picking with an outlined/filled/muted range
track, and a Cancel / Clear / Select footer.

Typing fills each part's placeholder from the right (YYYY -> YY19 -> 1987),
auto-advances between parts, and Backspace/Delete reverts the active part.
The committed value lives in hidden ISO {prefix}-min/{prefix}-max inputs --
the same contract as DateRangeFilter, so filter_bar.js needs no changes.

As a tryout, the Purchased filter in PurchaseFilterBar now uses the
DateRangePicker; Refunded keeps the native-date DateRangeFilter, and the
native-path e2e tests were repointed at it.

Includes unit tests for the component family and the filter-bar
integration, plus Playwright e2e tests for segment entry, calendar
picking, presets, and footer actions.

https://claude.ai/code/session_017b75KJAu4kNNpZPu9NAPBM

common/components/__init__.py

@@ -11,6 +11,11 @@ from common.components.core import (
     _render_element,
     randomid,
 )
+from common.components.date_range_picker import (
+    DateRangeCalendar,
+    DateRangeField,
+    DateRangePicker,
+)
 from common.components.domain import (
     GameLink,
     GameStatus,
@@ -123,6 +128,9 @@ __all__ = [
     "PurchasePrice",
     "SessionDeviceSelector",
     "_resolve_name_with_icon",
+    "DateRangeCalendar",
+    "DateRangeField",
+    "DateRangePicker",
     "FilterBar",
     "PurchaseFilterBar",
     "SessionFilterBar",