# flemo

> A React screen router and transition system with nested Router ownership, interactive back gestures, Parts, shared bars, Morphs, decorators, and diagnostic tooling.

Install `@flemo/react`. Start by deciding which Router handles each navigation and which Slot marks the region that moves. A Part with no `onSwipe*` hook follows its declared pop styles during a swipe automatically; adding a hook replaces that default behavior.

- [Complete machine-readable documentation](https://flemo.dev/llms-full.txt)
- [English documentation](https://flemo.dev/en/docs/introduction)
- [Korean documentation](https://flemo.dev/ko/docs/introduction)
- [Portable Agent Skill](https://github.com/kimjh96/flemo/tree/main/.agents/skills/flemo)
- [npm package](https://www.npmjs.com/package/@flemo/react)
- [Source repository](https://github.com/kimjh96/flemo)

## English documentation

### Getting started
- [Introduction](https://flemo.dev/en/docs/introduction): flemo is a screen router for React that gives web apps a native-style stack: push a screen, pop it, or drag from the edge to go back.
- [How it works](https://flemo.dev/en/docs/how-it-works): How flemo moves screens, in pictures: a stack of cards, a movement written down once, a swipe your finger drives, and a few pieces that stay still.
- [Getting started](https://flemo.dev/en/docs/getting-started): Build the smallest complete flemo app: two screens, one typed route param, and a push you can pop with Back, a button, or a swipe.

### Core
- [Router and Route](https://flemo.dev/en/docs/router): Router manages one screen stack, its history, and its transitions; each Route maps a path pattern to the screen it renders.
- [Slot](https://flemo.dev/en/docs/slot): Slot marks where screens render inside your layout, so the header, sidebar or tab bar around it stays mounted and still while only that region transitions.
- [Screen](https://flemo.dev/en/docs/screen): Screen is what every route renders: the screen's surface, its top and bottom bars, and its safe-area insets.
- [Navigation](https://flemo.dev/en/docs/navigation): useNavigate pushes, replaces, and pops screens; useParams, usePathname, and useStep read where you are and move within one screen.

### Motion
- [Transitions](https://flemo.dev/en/docs/transitions): Animate the screens of a stack with a built-in preset or your own createTransition, pick one per navigation, add a swipe gesture, and add a decorator such as a dim over the previous screen.
- [Decorator](https://flemo.dev/en/docs/decorator): A decorator dims or tints the previous screen during a transition. It uses that transition's timing and follows a swipe back without any code.
- [Part](https://flemo.dev/en/docs/part): Part animates one element inside a screen or its shared bar, such as a header title, in step with the screen transition.
- [Morph](https://flemo.dev/en/docs/morph): <Morph> pairs two elements that share a layoutId, so one element moves from the old screen to the new one while your screen transition runs unchanged.
- [Layer](https://flemo.dev/en/docs/layer): <Layer> renders an overlay beside its screen instead of inside it, so a sheet can cover shared bars and stay correct while the screen moves.
- [Putting it together](https://flemo.dev/en/docs/composition): Build an inbox step by step: a header whose title changes, a panel with its own back stack, a card that grows into the next screen, and a menu drawn above everything.

### Reference
- [API reference](https://flemo.dev/en/docs/api): Every public export of @flemo/react, grouped by job, with a one-line description and the page that explains it.

## 한국어 문서

### Getting started
- [Introduction](https://flemo.dev/ko/docs/introduction): flemo는 웹 앱에 네이티브 같은 화면 스택을 만들어 주는 React 라우터예요. 화면을 push하고 pop하거나, 화면 가장자리를 스와이프해서 뒤로 갈 수 있어요.
- [How it works](https://flemo.dev/ko/docs/how-it-works): flemo가 화면을 움직이는 방식을 그림으로 설명해요. 카드 더미, 한 번 적어 두는 움직임, 손가락이 움직이는 스와이프, 그리고 그대로 있는 부분들까지 차례로 봐요.
- [Getting started](https://flemo.dev/ko/docs/getting-started): 화면 두 개짜리 가장 작은 flemo 앱을 만들어요. 라우트 파라미터에 타입을 붙이고, push로 연 화면에서 브라우저 뒤로 가기, 버튼, 스와이프로 돌아와 봐요.

### Core
- [Router and Route](https://flemo.dev/ko/docs/router): Router는 화면 스택 하나와 그 히스토리, 화면 전환을 관리하고, Route는 경로 패턴마다 어떤 화면을 렌더링할지 정해요.
- [Slot](https://flemo.dev/ko/docs/slot): Slot은 레이아웃 안에서 화면이 그려질 영역을 정해요. 헤더나 탭 바 같은 바깥 UI는 마운트된 채 그대로 있고, 이 영역만 화면 전환돼요.
- [Screen](https://flemo.dev/ko/docs/screen): Screen은 모든 라우트가 렌더링하는 화면 컴포넌트예요. 화면 영역과 상단·하단 바, 세이프 에어리어 여백을 맡아요.
- [Navigation](https://flemo.dev/ko/docs/navigation): useNavigate로 화면을 push, replace, pop하고, useParams, usePathname, useStep으로 지금 위치를 읽거나 한 화면 안에서 단계를 옮겨요.

### Motion
- [Transitions](https://flemo.dev/ko/docs/transitions): 내장 프리셋이나 createTransition으로 화면 전환 애니메이션을 정하고, 이동할 때마다 다른 트랜지션을 고르거나 스와이프 뒤로 가기와 데코레이터를 더할 수 있어요.
- [Decorator](https://flemo.dev/ko/docs/decorator): 데코레이터는 화면 전환 중에 이전 화면을 어둡게 하거나 색을 덮어요. 트랜지션과 같은 타이밍으로 움직이고, 코드 없이도 스와이프 뒤로 가기를 따라가요.
- [Part](https://flemo.dev/ko/docs/part): Part는 헤더 제목처럼 화면이나 공유 바 안의 요소 하나만 골라서 화면 전환에 맞춰 움직여요.
- [Morph](https://flemo.dev/ko/docs/morph): <Morph>는 같은 layoutId를 가진 두 요소를 짝지어요. 화면 전환은 그대로 두고, 요소 하나가 이전 화면의 자리에서 새 화면의 자리로 이어지듯 움직여요.
- [Layer](https://flemo.dev/ko/docs/layer): <Layer>는 오버레이를 화면 안이 아니라 화면 옆에 그려요. 그래서 시트가 공유 바를 덮을 수 있고, 화면이 움직이는 동안에도 올바른 위치에 보여요.
- [Putting it together](https://flemo.dev/ko/docs/composition): 받은편지함 화면을 단계별로 만들어 봐요. 제목만 바뀌는 헤더, 자체 뒤로 가기가 있는 패널, 다음 화면으로 커지는 카드, 모든 화면 위에 뜨는 메뉴를 차례로 더해요.

### Reference
- [API reference](https://flemo.dev/ko/docs/api): @flemo/react가 공개하는 모든 export를 용도별로 묶었어요. 항목마다 한 줄 설명과 자세히 다루는 문서 링크가 있어요.