docs(docs): 화면별 current와 archive 구조로 분리

docs/screens/space/current/13_space_intent_card_collapsed_expanded_spec.md

@@ -0,0 +1,273 @@
+# 13. `/space` Intent Card Collapsed / Expanded Spec
+
+Last Updated: 2026-03-15
+
+이 문서는 `/space` 좌상단 목표 카드의 **collapsed / expanded 구조**를 정의한다.
+
+목적은 단순하다.
+
+- goal은 항상 보여야 한다
+- 하지만 배경을 계속 크게 가리면 안 된다
+- 평소에는 조용한 `anchor`처럼 남고, 필요할 때만 `card`처럼 확장돼야 한다
+
+관련 문서:
+
+- `./10_refocus_system_spec.md`
+- `./11_away_return_recovery_spec.md`
+- `../../product/12_core_loop_execution_roadmap.md`
+- `../../current_context.md`
+
+---
+
+## 1. 왜 바꾸는가
+
+현재 구조의 문제는 이것이다.
+
+- goal, microStep, 액션이 항상 한 카드 안에 모두 보인다
+- 읽힘은 확보하지만, 배경의 존재감을 과하게 가져간다
+- `/space`의 주인공이 scene이어야 하는데, 좌상단 카드가 먼저 읽힌다
+
+즉 문제는 glass material 자체보다 **항상 큰 상태로 떠 있는 면적**이다.
+
+premium ambient UI에서는:
+
+- 정보는 항상 남아야 하지만
+- 존재감은 항상 같을 필요가 없다
+
+그래서 목표 카드는 `persistent presence`는 유지하고, `persistent emphasis`는 버려야 한다.
+
+---
+
+## 2. 한 줄 정의
+
+> `/space`의 목표 카드는 평소에는 얇은 glass rail로 남고, 사용자가 실제로 결정을 내려야 할 때만 확장된다.
+
+---
+
+## 3. 상태 정의
+
+Intent Card는 아래 2개 상태만 가진다.
+
+### 3.1 Collapsed
+
+기본 상태.
+
+보이는 것:
+
+- goal 1줄
+
+보이지 않는 것:
+
+- microStep 상세
+- 완료 액션
+- recovery footer
+
+역할:
+
+- 지금 어떤 일 위에 있는지 잃지 않게 하는 기준점
+
+감정:
+
+- panel이 아니라 anchor
+
+### 3.2 Expanded
+
+필요할 때만 열리는 상태.
+
+보이는 것:
+
+- goal
+- microStep 또는 비어 있을 때의 조용한 helper line
+- `이번 목표 완료`
+- microStep 완료 체크
+
+역할:
+
+- 지금 이 세션을 어떻게 계속할지 결정하게 하는 짧은 제어 면
+
+감정:
+
+- 툴바가 아니라, 잠깐 열리는 soft control surface
+
+---
+
+## 4. 상태 전환 규칙
+
+### Expanded로 전환되는 경우
+
+- desktop에서 hover
+- focus 진입
+- rail 전체 클릭/tap
+
+### Collapsed로 돌아가는 경우
+
+- pointer leave
+- focus out
+- expand affordance 재클릭
+- expanded 상태에서 card 바깥 pointer down
+- recovery tray가 열릴 때
+
+중요:
+
+- `pause / return / next-beat / complete / refocus` tray가 열려 있는 동안에는 목표 카드는 강제로 collapsed 상태를 유지한다
+- tray가 이미 의사결정 레이어이기 때문에, base card까지 expanded 상태면 배경을 이중으로 가리게 된다
+
+### dismissal rule
+
+- expanded goal card는 `outside click / outside tap`으로 접혀도 된다
+- 이 동작은 base card의 ephemeral expansion에만 적용한다
+- `refocus / next-beat / return / complete`처럼 의사결정을 요구하는 tray는 outside click으로 닫히면 안 된다
+- decision tray는 반드시 명시적 액션으로만 닫는다
+  - `취소`
+  - `적용`
+  - `여기서 마무리하기`
+  - `잠시 비우기`
+  - `다음 블록 이어가기`
+- 즉, `/space`에서 가볍게 접히는 것은 `expanded rail`뿐이고, 실질적인 state change layer는 dismissible popover로 취급하지 않는다
+
+---
+
+## 5. 시각 구조
+
+### Collapsed rail
+
+- 폭: 약 `18rem ~ 19rem`
+- 높이: 약 `48px ~ 52px`
+- radius: `18px` 전후
+- glass:
+  - 더 얇고 더 투명
+  - large panel처럼 보이면 안 된다
+- goal:
+  - 1줄 truncate
+  - medium weight
+- affordance:
+  - 별도 chevron / dropdown button은 두지 않는다
+  - rail 자체가 expand trigger로 동작한다
+  - desktop에서는 hover로, mobile에서는 tap으로 자연스럽게 열린다
+
+### Expanded card
+
+- 폭: 약 `21rem ~ 23rem`
+- 높이: 내용에 따라 자연스럽게
+- radius: `22px ~ 24px`
+- glass:
+  - collapsed보다 한 단계 더 선명한 재질
+  - 하지만 tray만큼 무겁지는 않다
+- 내부 구조:
+  1. goal row
+  2. microStep row
+  3. quiet footer action
+
+---
+
+## 6. 정보 구조
+
+### Goal row
+
+- 좌측: goal 1줄
+- 우측: expanded 상태에서만 보이는 `수정` 액션
+- collapsed 상태에서는 rail 전체가 expand trigger로만 동작한다
+- expanded 상태에서도 goal 텍스트 자체는 edit trigger가 아니다
+- refocus는 expanded 상태의 명시적 `수정` 액션으로만 진입한다
+
+### MicroStep row
+
+- expanded 상태에서만 노출
+- 왼쪽: completion glyph
+- 오른쪽: microStep text
+- microStep이 없으면:
+  - helper 1줄만 노출
+  - planner-like placeholder 금지
+
+### Footer action
+
+- expanded 상태에서만 노출
+- 우측 정렬된 quiet text action 1개
+  - `이번 목표 완료`
+- `다시 방향` 상시 버튼은 두지 않는다
+- refocus는 expanded 상태의 명시적 `수정` 액션으로만 진입한다
+
+---
+
+## 7. interaction 원칙
+
+### Goal 수정
+
+- expanded 상태의 `수정` 액션 클릭 -> refocus
+- collapsed 상태의 rail 클릭은 절대 refocus를 열지 않는다
+- 핵심은 `expand`와 `edit`의 역할이 섞이지 않게 하는 것이다
+
+### microStep 완료
+
+- expanded 상태에서만 완료 glyph가 노출된다
+- collapsed 상태에서는 실수 클릭을 막기 위해 숨긴다
+
+### 목표 완료
+
+- expanded 상태에서만 footer action 노출
+- collapsed 상태에서는 보이지 않는다
+
+---
+
+## 8. motion 원칙
+
+### Collapsed -> Expanded
+
+- 넓어짐 + 내부 row fade-in
+- card가 “튀어나오는” 느낌보다, rail이 조용히 열리는 느낌이어야 한다
+- duration은 짧고 부드럽게
+
+### Expanded -> Collapsed
+
+- 내부 row가 먼저 약해지고
+- 폭이 줄어든다
+- 닫힘은 더 조용해야 한다
+
+### tray open 시
+
+- intent card는 먼저 collapsed
+- 그 아래 tray가 열림
+- 즉 `card 확장`과 `tray 확장`은 동시에 크게 보이면 안 된다
+
+---
+
+## 9. 금지사항
+
+- 상시 expanded 금지
+- goal + microStep + footer action 항상 노출 금지
+- Now chip 재도입 금지
+- toolbar/pill/button cluster처럼 보이게 만들기 금지
+- 배경보다 card가 먼저 읽히게 만들기 금지
+- rail 클릭과 edit 진입을 같은 액션으로 섞기 금지
+- 별도 chevron/dropdown button을 상시 노출하기 금지
+
+---
+
+## 10. 구현 기준
+
+필수 변경 파일:
+
+- `src/widgets/space-focus-hud/ui/IntentCapsule.tsx`
+- `src/widgets/space-focus-hud/ui/SpaceFocusHudWidget.tsx`
+
+가능한 보조 변경:
+
+- `src/shared/i18n/messages/space.ts`
+- `src/widgets/space-focus-hud/ui/overlayStyles.ts`
+
+구현 포인트:
+
+- `IntentCapsule` 내부에 local expanded state 추가
+- hover / focus / toggle button 기반 전환
+- `showActions === false` 또는 overlay open 상태에서는 강제 collapsed
+- microStep / footer action은 expanded에서만 렌더
+
+---
+
+## 11. 완료 기준
+
+- idle 상태에서 상단 goal UI가 배경을 덜 가린다
+- expanded 상태에서만 microStep과 완료 액션이 보인다
+- recovery tray가 열릴 때 base card는 과하게 커져 있지 않다
+- bright / dark scene 모두에서 읽히지만 scene이 먼저 읽힌다
+- `/space`가 productivity dashboard처럼 보이지 않는다