Interactive kit · grounded in code

Web app — desktop adaptation, round 2

Recommended pathX1 — One toolbar row replaces the stacked phone header

1At 840+ the title and count sit left, the period controls centre and the page action right, all on one 64px row — today 홈 is a lone 24px title with a 480px segmented strip and pager stacked below it.

2MainTabShell gains a `toolbar` slot (one prop); below 840 the slot renders as the phone header, so no screen forks.

3Search sits at the trailing edge with its `/` key hint; the sidebar button stays the one create action.

Owner's word needed → One toolbar row at 840+ for every tab root — yes?

홈오늘 6개

일

주

월

10월 6일 (화)오늘

일정 검색/

홈 — period controls centre, search trailing

경기42개

내 경기

번개 찾기

저장됨

테니스장

일정, 경기장, 클럽 검색/

경기 — tabs centre, search with a focused state trailing

클럽3개

내 클럽

둘러보기

클럽 검색/

클럽 만들기

클럽 — filter chips centre, the page's one primary action trailing

Recommended pathX2 — Session cards become one-line rows at 840+

1A horizontal row (64px): venue tile, title with when and format beneath, tier band, fee, recruitment meter, status chip — the same data and the same component, laid out as a row from `$expanded`.

2A 1440 page shows 7–8 sessions with day headers instead of 6 cards and scans in one column; place names get the room they need and never cut person names.

3The alternative densifies the grid to four columns of the phone card: 8 cards, but each still stacks three lines and names crop. Recommend rows.

Owner's word needed → Row card vs a denser grid — rows? (A drawn large, B below)

twomore.app/home

DABUSI

일정 만들기

홈

클럽

경기

기록

프로필

알림

메시지

김

김민준계정 · 설정

홈오늘 6개

일

주

월

10월 6일 (화)오늘

일정 검색/

10월 6일 (화)오늘

코오롱스포렉스 서초점 테니스장

⏰19:00~21:00

🎾복식

3.0–4.0

8,000원

2/4

호스트

대치유수지체육공원 테니스장

⏰19:00~21:00

🎾복식

3.0–4.0

8,000원

4/4

호스트

강남구 테니스장

⏰19:00~21:00

🎾복식

3.0–4.0

8,000원

4/4

호스트

송파구 테니스장

⏰20:00~22:00

🎾복식 번개

3.0–4.0

8,000원

0/16

10월 7일 (수)내일

서초구 테니스장

⏰08:00~10:00

🎾복식

3.0–4.0

8,000원

5/8

스포타임 테니스장

⏰18:00~20:00

🎾단식

3.0–4.0

8,000원

2/4

곧 시작

올림픽공원 테니스장

⏰19:00~21:00

🎾혼합복식

3.0–4.0

8,000원

7/8

A (recommended) — row cards: 7 sessions and two day headers fit above the fold

twomore.app/home

DABUSI

일정 만들기

홈

클럽

경기

기록

프로필

알림

메시지

김

김민준계정 · 설정

홈오늘 6개

일

주

월

10월 6일 (화)오늘

일정 검색/

10월 6일 (화)오늘

코오롱스포렉스 서초점

⏰19:00~21:00

🎾복식

🎯

3.0–4.0

25,000원

모집 중

2/4

대치유수지체육공원

⏰19:00~21:00

🎾복식

🎯

3.0–4.0

25,000원

예비 접수

4/4

강남구 테니스장

⏰19:00~21:00

🎾복식

🎯

3.0–4.0

25,000원

예비 접수

4/4

송파구 테니스장

⏰20:00~22:00

🎾복식

🎯

3.0–4.0

25,000원

모집 중

0/16

서초구 테니스장

⏰08:00~10:00

🎾복식

🎯

3.0–4.0

25,000원

모집 중

5/8

스포타임 테니스장

⏰18:00~20:00

🎾복식

🎯

3.0–4.0

25,000원

모집 중

2/4

올림픽공원 테니스장

⏰19:00~21:00

🎾복식

🎯

3.0–4.0

25,000원

마감 임박

7/8

양재 시민의숲

⏰14:00~16:00

🎾복식

🎯

3.0–4.0

25,000원

모집 중

3/8

B — the grid densified to four columns of the unchanged phone card: 8 cards, names crop

Recommended pathX3 — Detail pages: breadcrumb strip, reading column, inspector

1A 48px strip carries back-to-list, the trail (경기 › date › venue) and the page actions; no phone header on the page body.

2The reading column stays 680 and loses the full-bleed band; the 340px inspector carries the hero map (16:9), the key facts, fee, meter and the action.

3Club detail follows the same frame: tabs and feed in the column; album cover, next sessions, members and 글쓰기 in the inspector.

Owner's word needed → Strip + column + inspector, hero into the pane — yes?

twomore.app/sessions/…

DABUSI

일정 만들기

홈

클럽

경기

기록

프로필

알림

메시지

김

김민준계정 · 설정

경기 목록

경기10월 5일 (월)스포타임 테니스장

송파구 라켓클럽

스포타임 테니스장모집 중

📅10월 5일 (월) 08:00~10:00

🎾복식 번개

🔥 급번개! 참여하실 분!

참석2/4명

dev (나)NTRP 3.0

강

강정우NTRP 3.5

정보

🎾종목

복식

👥대상

클럽 멤버

⛅날씨

맑음 · 18°

👤호스트

김민준

경기

아직 대진이 없어요.

서울 서초구 강남대로 213

📍

장소코트 2면 · 야외 · 하드서울 서초구 강남대로 213

🕗

일시10월 5일 (월) 08:00~10:00

🎯

실력대NTRP 3.0–4.0

참가비12,000원

모집 중

2/4

매너 태그 남기기

Session detail at 1440

twomore.app/clubs/…

DABUSI

일정 만들기

홈

클럽

경기

기록

프로필

알림

메시지

김

김민준계정 · 설정

클럽 목록

클럽송파구 라켓클럽

송파

송파구 라켓클럽

📍서울 서초구

홈

일정

채팅

순위

멤버

회비

전체공지자유일정 후기가입인사

김

김하은님이 사진 2장을 올렸어요9월 27일

토

토요일 코트 예약 안내9월 26일

신

신규 멤버 환영합니다9월 24일

앨범 4

다음 일정

10/5

월

스포타임 테니스장08:00 · 참석 확정

10/9

금

서초구 테니스장19:00 · 모집 중

김

이

박

최

+14

멤버 18명

글쓰기

Club detail at 1440

Recommended pathX4 — Pointer density: a token set, hover and focus states, a keyboard layer

1From `$expanded`: rows 40px (dense lists 36), body 16→15, meta unchanged at 13 (Hangul floor); 24px is the WCAG minimum target, so nothing needs 44.

2Hover lifts the card (1px, soft shadow, primary outline) — never a tint band; keyboard selection shows a 2px primary ring; focus is always visible.

3`/` focuses search, `j`/`k` move the selected row, `Enter` opens, `Esc` closes a pane or clears search, `?` lists them. Tokens and hover are cheap; the keyboard layer is new.

Owner's word needed → Pointer density + keyboard layer — yes?

twomore.app/games

DABUSI

일정 만들기

홈

클럽

경기

기록

프로필

알림

메시지

김

김민준계정 · 설정

경기42개

내 경기

번개 찾기

저장됨

테니스장

일정, 경기장, 클럽 검색/

10월 7일 (수)내일

서초구 테니스장

⏰08:00~10:00

🎾복식

3.0–4.0

8,000원

5/8

스포타임 테니스장

⏰18:00~20:00

🎾단식

3.0–4.0

8,000원

2/4

곧 시작

올림픽공원 테니스장

⏰19:00~21:00

🎾혼합복식

3.0–4.0

8,000원

7/8

양재 시민의숲

⏰14:00~16:00

🎾복식

3.0–4.0

8,000원

3/8

키보드 단축키

검색

j / k

다음 · 이전 일정

Enter

열기

Esc

닫기

단축키 보기

경기 at 1440 — search focused, row 2 keyboard-selected, row 3 hovered, shortcuts card

Change	Phone	Pointer (from $expanded)	Cost
Row height	44	40 (36 dense lists)	Token — cheap
Body / meta	16 / 13	15 / 13	Token — cheap
Hover	opacity dim	lift 1px + shadow + outline inside the element	hoverStyle on Pressable — cheap
Cursor	pointer	pointer, text on inputs	Already set
Focus	browser default	2px primary ring, offset 2	focusVisibleStyle — cheap
`/` `?`	—	focus search, shortcuts overlay	New: one web-only hook
`j` `k` `Enter`	—	selected row, open	New: selection model in FeedList
`Esc`	—	close pane, clear search	New: wire into DetailShell / list-detail

Recommended pathX5 — Profile in two columns; settings stays list-detail

1Profile: identity, ELO, stats and manner tags in a 360 left column; friends, achievements and recent matches on the right — the whole profile fits one screen instead of a long phone scroll.

2The 편집 and 설정 actions move into the toolbar.

3Settings keeps the shipped list-detail (360 list, 680 detail); no change beyond the 40px row height.

Owner's word needed → Two-column profile, settings unchanged — yes?

twomore.app/profile

DABUSI

일정 만들기

홈

클럽

경기

기록

프로필

알림

메시지

김

김민준계정 · 설정

프로필

프로필 수정

dev

신뢰 멤버NTRP 3.0

ELO1,200

골드까지 200점

50+총 경기

64%승률

92%출석률

받은 매너 태그

매너가 좋아요 ×10시간 약속을 잘 지켜요 ×10실력이 정확해요 ×10

친구18명

전체

김

이

박

최

+14

업적12/20

전체 보기

🏅

✨

🏆

⭐

🔥

👥

최근 경기

전체 보기

승

김민준 · 이서준 vs 박지훈 · 최유나6-4 6-3

패

정우성 · 한지민 vs 김민준 · 강정우4-6 5-7

프로필 at 1440

twomore.app/settings/notifications

DABUSI

일정 만들기

홈

클럽

경기

기록

프로필

알림

메시지

김

김민준계정 · 설정

설정

프로필 수정

비밀번호 변경

알림

개인정보 보호

동의 관리

차단한 사용자

알림

푸시

푸시 알림

일정 리마인더

알림에 메시지 내용 표시

설정 at 1440 — unchanged list-detail

Spec — staged plan, components touched, what is cheap vs new

Contract: everything keys off the existing window classes (`$expanded` 840, `$large` 1200). Phones are unchanged: every new prop is a no-op below 840. No second implementation of any component — each stage extends the shared one.

Stage	What	Components touched	Kind
S1	Pointer-density tokens (row 40/36, body 15) and Pressable hover lift + focus ring	window-size.ts, both tamagui configs, pressable.tsx, ListRow / FlatRow primitives	Tokens + media props
S2	`MainTabShell toolbar` slot; period controls move into it at 840+	main-tab-shell.tsx, home / activity / club-list / records screens, period pager	Slot (small)
S3	SessionCardV2 `row` layout from `$expanded` (FeedList has no grid mode since batch 63: day rows are one column)	session-card-v2.tsx, feed-list.web.tsx	Layout variant
S4	Breadcrumb strip and inspector content; map hero shrinks into the pane	detail-shell.tsx (`crumbs`, `hero="inline"` when a pane exists), supporting-pane.tsx, session / club detail screens	Re-compose
S5	Keyboard layer: `/`, `j`/`k`, `Enter`, `Esc`, `?`	new web-only `useListKeyboard` + shortcuts overlay, list-detail-layout.tsx, FeedList selection	New mechanic
S6	Profile two columns	profile-screen.tsx, MainTabShell (`columns` slot)	Layout
S7	Blueprints, web-frame-contract test, QA screenshots at 1440	docs/architecture/screen-blueprint.md, scripts/__tests__/web-frame-contract.test.mjs	Docs + gate

Type deltas: desktop type steps down, not up (macOS body 13 vs iOS 17). Recommended: body 16→15, titles unchanged, meta stays 13 because Hangul has a higher legibility floor than Latin (our judgement; no source publishes a Korean floor).

Spec (grounding, anatomy)

Proposal 2026-10-06. Reuses the web-app board kit (WaWindow, WaSidebar, WaPane); the toolbar slot, row layout, inspector content and keyboard layer are all unbuilt.

route ·

packages/ui/src/{main-tab-shell,detail-shell,supporting-pane,feed-list.web,pressable,window-size}.tsx · session-card-v2.tsx · apps/web/components/{app-nav,list-detail-layout}.tsx

grounded in 14 source file(s)

packages/ui/src/window-size.tspackages/ui/src/main-tab-shell.tsxpackages/ui/src/detail-shell.tsxpackages/ui/src/supporting-pane.tsxpackages/ui/src/content-width.tsxpackages/ui/src/feed-list.web.tsxpackages/ui/src/pressable.tsxpackages/app/src/presentation/components/sessions/session-card-v2.tsxpackages/features/sessions/src/session-detail-screen.tsxpackages/features/clubs/src/club-detail-screen.tsxpackages/features/profile/src/profile-screen.tsxpackages/features/profile/src/settings-screen.tsxapps/web/components/app-nav.tsxapps/web/components/list-detail-layout.tsx