feat(uix): calendar-nav unification, TimePicker datetime blocks, A31 perf
Calendar chrome:
- Shared CalendarNav context — Calendar/RangeCalendar/DateRangePicker reuse the
refined month/year selects + prev/next buttons; deleted the range pickers'
bespoke month/year selects. New calendar-nav-button, calendar-select.css,
visual-context, soma calendar-nav.
TimePicker (datetime building blocks):
- DayPeriodToggle composes the system ToggleGroup (was native radios):
type=single, deselectable=false, solid/primary, right-aligned.
- Sliders self-hide per granularity (hour -> only hour); ruler -> showScales;
slider labels follow the canonical label scale per size.
- Active-toggle hover fixes: pin bg to the resting fill (no wash) + archetypes
hover rule excludes data-state=on (it was flipping a pressed toggle's text to
content-primary / black in light themes).
- DatePicker demo: locale-derived hour cycle + composed TimePicker time row.
Perf (audit A31): lifted selection/checked sets ($derived Set, O(1) .has()) across
checkbox, combobox, grid-list, listbox, select, tag-group, toggle-group, tree-grid,
tree-view providers.
Popover: fix trigger re-click bounce (exclude trigger node in onInteractOutside).
langs: picker-shell footer strings. CONTINUE.md hand-off for the next-session
DateTimePicker refactor.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
3 months ago
|
|
|
|
# CONTINUE — hand-off (2026-06-26 → next session)
|
|
|
|
|
|
|
|
|
|
|
|
Branch `active-uix`. This session's work is **committed + pushed**. Pick up the
|
|
|
|
|
|
**DateTimePicker refactor** next.
|
|
|
|
|
|
|
|
|
|
|
|
## Next task — shared "time-in-popover" for DatePicker + DateRangePicker
|
|
|
|
|
|
|
|
|
|
|
|
Full plan: `C:\Users\dev\.claude\plans\woolly-knitting-fairy.md` (approved).
|
|
|
|
|
|
Decisions locked with the user: composable `<DatePicker.Time />` part (not
|
|
|
|
|
|
auto-rendered) · DateRangePicker shows **start + end** (two time pickers).
|
|
|
|
|
|
|
|
|
|
|
|
Goal: lift the ad-hoc time editor out of the DatePicker **demo** into a
|
|
|
|
|
|
**shared, reusable mechanism**, then give DateRangePicker the same. DatePicker
|
|
|
|
|
|
becomes effectively a DateTimePicker (granularity reaching `hour|minute|second`
|
|
|
|
|
|
surfaces the time editor); the **hour cycle derives from `locale`** when
|
|
|
|
|
|
`hourCycle` is unset (en-US → 12h, es-ES → 24h), for input **and** time editor.
|
|
|
|
|
|
|
|
|
|
|
|
Both soma providers already plumb `granularity` + `hourCycle`; the missing piece
|
|
|
|
|
|
is the popover time editor (today hand-composed in the date-picker demo).
|
|
|
|
|
|
|
|
|
|
|
|
Execution order (see plan §1–6):
|
|
|
|
|
|
1. `picker-shell/picker-time.ts` (new) — pure helpers: `localeHourCycle`,
|
|
|
|
|
|
`granularityHasTime`, `timeOf`, `withTimeOn`, `withoutTime` (reuse `$libs/days`).
|
|
|
|
|
|
2. `picker-shell/picker-time-row.svelte` (new) — value-agnostic time row (knows
|
|
|
|
|
|
only `TimeValue`); self-hides when granularity has no time; composes the
|
|
|
|
|
|
`<TimePicker>` namespace; owns the relocated time-row CSS.
|
|
|
|
|
|
3. Both `*-picker.svelte` roots derive `hourCycle ?? localeHourCycle(locale)` →
|
|
|
|
|
|
pass to the soma Provider (input honours it); publish a bridge context
|
|
|
|
|
|
(value get/set + granularity/locale/resolved hourCycle).
|
|
|
|
|
|
4. `.Time` parts: `date-picker-time.svelte` (one row) + `date-range-picker-time.svelte`
|
|
|
|
|
|
(two rows, start/end); register in each `index.ts` + `types.ts`.
|
|
|
|
|
|
5. langs: `picker-shell.ts` keys `time` / `start` / `end`.
|
|
|
|
|
|
6. Demos: date-picker uses `<DatePicker.Time />` (drop the local bridge/CSS);
|
|
|
|
|
|
date-range-picker gains a granularity control + `<DateRangePicker.Time />`.
|
|
|
|
|
|
|
|
|
|
|
|
Verify: `npx svelte-check … --threshold error` (0 new; the only pre-existing
|
|
|
|
|
|
time-picker error is `time-picker-content.svelte` size/Popover) ·
|
|
|
|
|
|
`npx vitest run src/uix/soma/components/{date-picker,date-range-picker,time-picker}` ·
|
|
|
|
|
|
browser DOM checks (preview 5180; `:hover`/screenshot tooling is flaky).
|
|
|
|
|
|
|
|
|
|
|
|
## Done this session (in the commit)
|
|
|
|
|
|
|
|
|
|
|
|
- **Calendar-nav unification** — shared `CalendarNav` context so
|
|
|
|
|
|
Calendar/RangeCalendar/DateRangePicker reuse the refined month/year selects +
|
|
|
|
|
|
prev/next buttons (deleted the range pickers' bespoke selects). New
|
|
|
|
|
|
`calendar-nav-button`, `calendar-select.css`, `visual-context`, soma `calendar-nav`.
|
|
|
|
|
|
- **Popover** — fixed trigger re-click bounce.
|
|
|
|
|
|
- **TimePicker → datetime building blocks**: `DayPeriodToggle` now composes the
|
|
|
|
|
|
system `<ToggleGroup>` (was native radios; `type=single` `deselectable=false`
|
|
|
|
|
|
solid/primary, right-aligned); sliders self-hide per granularity; `ruler` →
|
|
|
|
|
|
`showScales`; slider labels follow the canonical label scale per size;
|
|
|
|
|
|
active-toggle hover fixed (no wash; `archetypes.css` hover rule now excludes
|
|
|
|
|
|
`data-state=on` so a pressed toggle keeps its accent instead of going
|
|
|
|
|
|
content-primary/black in light).
|
|
|
|
|
|
- **DatePicker demo** — locale-derived hour cycle + composed TimePicker time row
|
|
|
|
|
|
(this is what the next-task plan generalises to the component).
|
|
|
|
|
|
- **Perf (audit A31)** — lifted selection/checked sets across 9 providers.
|
|
|
|
|
|
- **langs** — picker-shell footer strings.
|
|
|
|
|
|
|
|
|
|
|
|
## Do NOT commit (active / separate tracks)
|
|
|
|
|
|
|
|
|
|
|
|
`soma/components/words/**`, `eidos/components/palabras/**` (firm rule), the
|
|
|
|
|
|
untracked `chronos/` component, `web/routes/demos/**`, and the loose untracked
|
|
|
|
|
|
docs (`README.md`, `SYSTEM-AUDIT-*`, `Disenando_*`, `COMPARATIVA_SIUM_*`).
|
|
|
|
|
|
`metrics.ts` langs rode along this commit only because `langs/index.ts` imports it.
|
