Derived from docs/issues/42-onboarding-coach.md — the canonical source of truth. Execution order & dependencies: docs/ISSUE_PLAN.md (PR #1). If this issue and the doc disagree, the doc wins.
Summary
Build src/app/onboarding.ts: a one-time, three-step dismissible coach (slider → locate →
menu/share-import) shown on first visit, per DESIGN §3.1.
Context
The time slider is a novel control; a 10-second nudge materially improves first-session success.
Must be skippable, tiny, and never shown again after dismissal.
Scope
- Trigger: after first map
idle on / when localStorage["chronomap.onboarded"] !== "1" AND
no deep-link params present (arriving via share = user already has context; skip and mark done).
- Three sequential coach marks (anchored tooltips with scrim cutout — CSS only, no lib):
- slider dock: i18n
onboard.slider (スライダーで年代を移動)
- LocateButton:
onboard.locate (現在地から時間旅行を始める)
- MenuButton:
onboard.menu (リンク共有や貼り付けはこちら)
Controls: onboard.next (次へ) / onboard.done (はじめる) / onboard.skip (スキップ,
step 1 only, text button).
- Any outside interaction (map gesture) = skip-all + mark done.
- Set the flag on completion OR skip; never re-show (Language toggle later does not re-trigger).
- Reduced-motion: no pulse animations; static highlight.
Detailed Requirements
- Coach must not block the slider/map hit-testing outside the scrim cutout — implement cutout
via 4 scrim rects around the target (pointer-events on scrim only).
- Focus management: coach steps are keyboard reachable (Next focused on open); Esc = skip-all.
- Anchored positioning reuses 33's popover placement helper (flip near edges).
- Total added JS ≤ 6 KB (lazy
import() after idle — §14 budget).
Acceptance Criteria
Validation
tests/e2e/onboarding.spec.ts (fresh storage state per test).
Dependencies
13, 19, 12 (targets exist), 33 (placement helper), 39 (strings).
Non-goals
Feature tours beyond 3 steps, re-showable help center (About covers reference content, 47),
analytics on completion (none).
Design References
DESIGN §3.1, §8 #13, §14.
Summary
Build
src/app/onboarding.ts: a one-time, three-step dismissible coach (slider → locate →menu/share-import) shown on first visit, per DESIGN §3.1.
Context
The time slider is a novel control; a 10-second nudge materially improves first-session success.
Must be skippable, tiny, and never shown again after dismissal.
Scope
idleon/whenlocalStorage["chronomap.onboarded"] !== "1"ANDno deep-link params present (arriving via share = user already has context; skip and mark done).
onboard.slider(スライダーで年代を移動)onboard.locate(現在地から時間旅行を始める)onboard.menu(リンク共有や貼り付けはこちら)Controls:
onboard.next(次へ) /onboard.done(はじめる) /onboard.skip(スキップ,step 1 only, text button).
Detailed Requirements
via 4 scrim rects around the target (pointer-events on scrim only).
import()after idle — §14 budget).Acceptance Criteria
?lat=…) → no coach, flag set.Validation
tests/e2e/onboarding.spec.ts(fresh storage state per test).Dependencies
13, 19, 12 (targets exist), 33 (placement helper), 39 (strings).
Non-goals
Feature tours beyond 3 steps, re-showable help center (About covers reference content, 47),
analytics on completion (none).
Design References
DESIGN §3.1, §8 #13, §14.