diff --git a/.gitignore b/.gitignore
index 4c322762..91be2938 100644
--- a/.gitignore
+++ b/.gitignore
@@ -46,4 +46,6 @@ coverage
.claude/*.md
# context files (session notes, etc.)
-context/
\ No newline at end of file
+context/
+.omc/
+.omx/
diff --git a/.scripts/commands/generateDocs/index.ts b/.scripts/commands/generateDocs/index.ts
index 846937a6..c933e5cb 100644
--- a/.scripts/commands/generateDocs/index.ts
+++ b/.scripts/commands/generateDocs/index.ts
@@ -25,12 +25,12 @@ export async function generateDocs(names: string[]) {
names
.map(name => [name, glob.sync(`**/${name}.ts*`, { cwd: getRootPath() })[0]])
.forEach(([name, sourceFilePath]) => {
- const subCtx: { docSource?: string; translatedDoc?: string } = {};
+ const subCtx: { docSource?: string; translatedDoc?: string | null } = {};
tasks.add([
{
title: `Generate documents: ${sourceFilePath}`,
task: async (_, task) =>
- task.newListr<{ docSource?: string; translatedDoc?: string }>(
+ task.newListr<{ docSource?: string; translatedDoc?: string | null }>(
[
{
title: `Convert JSDoc to markdown`,
@@ -147,6 +147,9 @@ function parseJSDoc(source: string) {
: (exampleSource
.splice(1, exampleSource.length - 2)
.map(line => line.source.replace(/\s\*\s{0,1}/, ''))
+ // the doc template wraps the example in its own ```tsx fence, so fences
+ // inside @example would nest and render as literal backticks
+ .filter(line => !/^\s*```/.test(line))
.join('\n') ?? '');
return {
diff --git a/.scripts/commands/generateDocs/translate.ts b/.scripts/commands/generateDocs/translate.ts
index 1259c22f..2b80c503 100644
--- a/.scripts/commands/generateDocs/translate.ts
+++ b/.scripts/commands/generateDocs/translate.ts
@@ -284,9 +284,23 @@ ${origin}
`;
const response = await client.chat.completions.create({
- model: 'gpt-3.5-turbo',
+ model: 'gpt-5.6-terra',
messages: [{ role: 'user', content: prompt }],
- response_format: { type: 'json_object' },
+ // gpt-5.6-terra's endpoint compatibility lists structured_outputs but not the
+ // legacy json_object mode, so declare the shape via json_schema
+ response_format: {
+ type: 'json_schema',
+ json_schema: {
+ name: 'translation',
+ strict: true,
+ schema: {
+ type: 'object',
+ properties: { result: { type: 'string' } },
+ required: ['result'],
+ additionalProperties: false,
+ },
+ },
+ },
});
const translatedItem = response.choices[0].message.content;
diff --git a/packages/mobile/src/hooks/useAvoidKeyboard/useAvoidKeyboard.md b/packages/mobile/src/hooks/useAvoidKeyboard/useAvoidKeyboard.md
index a2cfce0a..b3c3d4a4 100644
--- a/packages/mobile/src/hooks/useAvoidKeyboard/useAvoidKeyboard.md
+++ b/packages/mobile/src/hooks/useAvoidKeyboard/useAvoidKeyboard.md
@@ -1,12 +1,12 @@
# useAvoidKeyboard
-A React hook that helps fixed-bottom elements smoothly avoid the on-screen keyboard. When the keyboard appears, it moves the element upward using `transform` with a smooth transition.
+`useAvoidKeyboard` is a React hook that helps fixed-bottom elements avoid the on-screen keyboard. It returns a CSS style that can be applied to `position: fixed` elements to smoothly move them above the keyboard when it appears.
## Interface
```ts
function useAvoidKeyboard(
- options?: UseAvoidKeyboardOptions
+ options: UseAvoidKeyboardOptions
): UseAvoidKeyboardResult;
```
@@ -15,37 +15,35 @@ function useAvoidKeyboard(
@@ -55,15 +53,7 @@ function useAvoidKeyboard(
## Example
@@ -87,24 +77,3 @@ function FixedBottomCTA() {
);
}
```
-
-```tsx
-// With safe area bottom offset (e.g., for iPhone home indicator)
-function FixedBottomCTA() {
- const { style } = useAvoidKeyboard({ safeAreaBottom: 34 });
-
- return (
-
-
-
- );
-}
-```
diff --git a/packages/mobile/src/hooks/useAvoidKeyboard/useAvoidKeyboard.ts b/packages/mobile/src/hooks/useAvoidKeyboard/useAvoidKeyboard.ts
index b3c1fe10..c4e52736 100644
--- a/packages/mobile/src/hooks/useAvoidKeyboard/useAvoidKeyboard.ts
+++ b/packages/mobile/src/hooks/useAvoidKeyboard/useAvoidKeyboard.ts
@@ -49,7 +49,6 @@ type UseAvoidKeyboardResult = {
* @returns {UseAvoidKeyboardResult} An object containing the `style` property to apply to the fixed bottom element.
*
* @example
- * ```tsx
* function FixedBottomCTA() {
* const { style } = useAvoidKeyboard();
*
@@ -67,10 +66,8 @@ type UseAvoidKeyboardResult = {
*
* );
* }
- * ```
*
* @example
- * ```tsx
* // With safe area bottom offset (e.g., for iPhone home indicator)
* function FixedBottomCTA() {
* const { style } = useAvoidKeyboard({ safeAreaBottom: 34 });
@@ -89,7 +86,6 @@ type UseAvoidKeyboardResult = {
*
* );
* }
- * ```
*/
export function useAvoidKeyboard(options: UseAvoidKeyboardOptions = {}): UseAvoidKeyboardResult {
const {
diff --git a/packages/mobile/src/hooks/useBodyScrollLock/useBodyScrollLock.ts b/packages/mobile/src/hooks/useBodyScrollLock/useBodyScrollLock.ts
index d775ea25..7468513c 100644
--- a/packages/mobile/src/hooks/useBodyScrollLock/useBodyScrollLock.ts
+++ b/packages/mobile/src/hooks/useBodyScrollLock/useBodyScrollLock.ts
@@ -4,22 +4,19 @@ import { disableBodyScrollLock } from '../../utils/disableBodyScrollLock/index.t
import { enableBodyScrollLock } from '../../utils/enableBodyScrollLock/index.ts';
/**
- * Hook to lock body scroll
- *
- * Automatically locks body scroll when mounted, unlocks when unmounted.
+ * @description
+ * `useBodyScrollLock` is a React hook that locks body scroll while the component is mounted.
+ * It automatically locks on mount and unlocks on unmount.
*
* **Note:** For multiple overlapping modals, use a single lock at the parent level.
*
* @example
- * ```tsx
* function Modal() {
* useBodyScrollLock();
* return Modal content
;
* }
- * ```
*
* @example
- * ```tsx
* // Multiple modals - single lock pattern
* function BodyScrollLock() {
* useBodyScrollLock();
@@ -37,7 +34,6 @@ import { enableBodyScrollLock } from '../../utils/enableBodyScrollLock/index.ts'
* >
* );
* }
- * ```
*/
export function useBodyScrollLock(): void {
useEffect(() => {
diff --git a/packages/mobile/src/hooks/useKeyboardHeight/useKeyboardHeight.md b/packages/mobile/src/hooks/useKeyboardHeight/useKeyboardHeight.md
index 13de536f..68a94597 100644
--- a/packages/mobile/src/hooks/useKeyboardHeight/useKeyboardHeight.md
+++ b/packages/mobile/src/hooks/useKeyboardHeight/useKeyboardHeight.md
@@ -1,12 +1,12 @@
# useKeyboardHeight
-A React hook that tracks the on-screen keyboard height in real time. It automatically updates when the keyboard appears, disappears, or changes size.
+`useKeyboardHeight` is a React hook that tracks the on-screen keyboard height. It returns the current keyboard height in pixels, which updates automatically when the keyboard appears, disappears, or changes size.
## Interface
```ts
function useKeyboardHeight(
- options?: UseKeyboardHeightOptions
+ options: UseKeyboardHeightOptions
): UseKeyboardHeightResult;
```
@@ -15,15 +15,14 @@ function useKeyboardHeight(
@@ -33,15 +32,7 @@ function useKeyboardHeight(
## Example
@@ -57,17 +48,3 @@ function ChatInput() {
);
}
```
-
-```tsx
-function KeyboardStatus() {
- const { keyboardHeight } = useKeyboardHeight();
-
- return (
-
- {keyboardHeight > 0
- ? `Keyboard is open (${keyboardHeight}px)`
- : 'Keyboard is closed'}
-
- );
-}
-```
diff --git a/packages/mobile/src/hooks/useKeyboardHeight/useKeyboardHeight.ts b/packages/mobile/src/hooks/useKeyboardHeight/useKeyboardHeight.ts
index 8b67cc98..1763e0a5 100644
--- a/packages/mobile/src/hooks/useKeyboardHeight/useKeyboardHeight.ts
+++ b/packages/mobile/src/hooks/useKeyboardHeight/useKeyboardHeight.ts
@@ -29,7 +29,6 @@ type UseKeyboardHeightResult = {
* @returns {UseKeyboardHeightResult} An object containing the current keyboard height in pixels.
*
* @example
- * ```tsx
* function ChatInput() {
* const { keyboardHeight } = useKeyboardHeight();
*
@@ -39,7 +38,6 @@ type UseKeyboardHeightResult = {
*
* );
* }
- * ```
*/
export function useKeyboardHeight(options: UseKeyboardHeightOptions = {}): UseKeyboardHeightResult {
const { immediate = true } = options;
diff --git a/packages/mobile/src/hooks/useNetworkStatus/useNetworkStatus.ts b/packages/mobile/src/hooks/useNetworkStatus/useNetworkStatus.ts
index ce4fd5ee..39a1af6a 100644
--- a/packages/mobile/src/hooks/useNetworkStatus/useNetworkStatus.ts
+++ b/packages/mobile/src/hooks/useNetworkStatus/useNetworkStatus.ts
@@ -54,9 +54,9 @@ type NavigatorWithConnection = {
} & Navigator;
/**
- * React hook to access Network Information API
- *
- * Provides raw network connection data. Returns undefined for all properties
+ * @description
+ * `useNetworkStatus` is a React hook that provides access to the Network Information API.
+ * It provides raw network connection data. Returns undefined for all properties
* if the API is not supported (e.g., Safari, Firefox).
*
* **Browser Support**:
@@ -73,7 +73,6 @@ type NavigatorWithConnection = {
* - `saveData` - User's data saver preference
*
* @example
- * ```tsx
* function AdaptiveImage() {
* const { effectiveType, saveData } = useNetworkStatus();
*
@@ -87,10 +86,8 @@ type NavigatorWithConnection = {
* />
* );
* }
- * ```
*
* @example
- * ```tsx
* function VideoPlayer() {
* const { type, downlink } = useNetworkStatus();
*
@@ -99,7 +96,6 @@ type NavigatorWithConnection = {
*
* return ;
* }
- * ```
*
* @see https://wicg.github.io/netinfo/
* @see https://developer.mozilla.org/en-US/docs/Web/API/Network_Information_API
diff --git a/packages/mobile/src/hooks/usePageVisibility/usePageVisibility.ts b/packages/mobile/src/hooks/usePageVisibility/usePageVisibility.ts
index b908c497..fa8fddb9 100644
--- a/packages/mobile/src/hooks/usePageVisibility/usePageVisibility.ts
+++ b/packages/mobile/src/hooks/usePageVisibility/usePageVisibility.ts
@@ -19,9 +19,9 @@ export type PageVisibility = {
};
/**
- * React hook to detect page visibility changes
- *
- * Monitors when the user switches tabs or minimizes the browser using the Page Visibility API.
+ * @description
+ * `usePageVisibility` is a React hook that detects page visibility changes.
+ * It monitors when the user switches tabs or minimizes the browser using the Page Visibility API.
* Useful for pausing/resuming animations, videos, or background tasks.
*
* **SSR Behavior**: Returns `{ isVisible: true, visibilityState: 'visible' }` during server-side rendering.
@@ -31,7 +31,6 @@ export type PageVisibility = {
* - `visibilityState` - Current visibility state: 'visible' | 'hidden'
*
* @example
- * ```tsx
* function VideoPlayer() {
* const { isVisible } = usePageVisibility();
* const videoRef = useRef(null);
@@ -47,10 +46,8 @@ export type PageVisibility = {
*
* return ;
* }
- * ```
*
* @example
- * ```tsx
* function Analytics() {
* const { isVisible, visibilityState } = usePageVisibility();
*
@@ -63,7 +60,6 @@ export type PageVisibility = {
*
* return null;
* }
- * ```
*/
export function usePageVisibility(): PageVisibility {
const [pageVisibility, setPageVisibility] = useState(() => getPageVisibility());
diff --git a/packages/mobile/src/hooks/useSafeAreaInset/useSafeAreaInset.ts b/packages/mobile/src/hooks/useSafeAreaInset/useSafeAreaInset.ts
index da5f9e62..be82fe59 100644
--- a/packages/mobile/src/hooks/useSafeAreaInset/useSafeAreaInset.ts
+++ b/packages/mobile/src/hooks/useSafeAreaInset/useSafeAreaInset.ts
@@ -4,9 +4,9 @@ import { getSafeAreaInset, type SafeAreaInset } from '../../utils/getSafeAreaIns
import { isServer } from '../../utils/isServer/index.ts';
/**
- * React hook to track safe area inset changes
- *
- * Returns the safe area insets that automatically update when the screen
+ * @description
+ * `useSafeAreaInset` is a React hook that tracks safe area inset changes.
+ * It returns the safe area insets that automatically update when the screen
* orientation changes (e.g., portrait to landscape).
*
* Safe area insets account for device-specific UI elements:
@@ -14,10 +14,9 @@ import { isServer } from '../../utils/isServer/index.ts';
* - **bottom**: Home indicator on Face ID devices
* - **left/right**: Rounded corners in landscape mode
*
- * @returns Object containing safe area insets for all four sides
+ * @returns {SafeAreaInset} Object containing safe area insets for all four sides.
*
* @example
- * ```tsx
* function MyComponent() {
* const safeArea = useSafeAreaInset();
*
@@ -32,10 +31,8 @@ import { isServer } from '../../utils/isServer/index.ts';
*
* );
* }
- * ```
*
* @example
- * ```tsx
* // Automatically updates when screen rotates
* function RotationAwareHeader() {
* const { top, left, right } = useSafeAreaInset();
@@ -50,7 +47,6 @@ import { isServer } from '../../utils/isServer/index.ts';
*
* );
* }
- * ```
*/
export function useSafeAreaInset(): SafeAreaInset {
const [inset, setInset] = useState(() => getSafeAreaInset());
diff --git a/packages/mobile/src/hooks/useScrollDirection/useScrollDirection.ts b/packages/mobile/src/hooks/useScrollDirection/useScrollDirection.ts
index 2c11d78a..5e71d907 100644
--- a/packages/mobile/src/hooks/useScrollDirection/useScrollDirection.ts
+++ b/packages/mobile/src/hooks/useScrollDirection/useScrollDirection.ts
@@ -17,16 +17,16 @@ type UseScrollDirectionOptions = {
};
/**
- * React hook to detect scroll direction
- *
- * Returns scroll direction (up/down) and current scroll position.
+ * @description
+ * `useScrollDirection` is a React hook that detects scroll direction.
+ * It returns scroll direction (up/down) and current scroll position.
* Throttled by default (50ms) for performance.
*
- * @param options.throttleMs - Throttle interval (default: 50ms)
- * @returns Scroll direction state (direction: 'up' | 'down' | null, position: number)
+ * @param {UseScrollDirectionOptions} [options] - Configuration options.
+ * @param {number} [options.throttleMs=50] - Throttle interval in milliseconds.
+ * @returns {ScrollDirectionState} Scroll direction state: `direction` (`'up' | 'down' | null`) and `position` (px).
*
* @example
- * ```tsx
* function Header() {
* const { direction, position } = useScrollDirection();
*
@@ -39,7 +39,6 @@ type UseScrollDirectionOptions = {
*
* );
* }
- * ```
*/
export function useScrollDirection(options: UseScrollDirectionOptions = {}): ScrollDirectionState {
const { throttleMs = 50 } = options;
diff --git a/packages/mobile/src/hooks/useVisualViewport/useVisualViewport.ts b/packages/mobile/src/hooks/useVisualViewport/useVisualViewport.ts
index 56bfbdae..14208e16 100644
--- a/packages/mobile/src/hooks/useVisualViewport/useVisualViewport.ts
+++ b/packages/mobile/src/hooks/useVisualViewport/useVisualViewport.ts
@@ -42,9 +42,9 @@ type VisualViewportState = {
};
/**
- * React hook to track Visual Viewport changes
- *
- * Returns the actual visible area in mobile WebView, which changes when
+ * @description
+ * `useVisualViewport` is a React hook that tracks Visual Viewport changes.
+ * It returns the actual visible area in mobile WebView, which changes when
* the keyboard appears or the user zooms/scrolls.
*
* **Important:** `viewport` is `null` on SSR or in browsers that don't support Visual Viewport API.
@@ -53,12 +53,11 @@ type VisualViewportState = {
* **Tip:** If you only need keyboard height, use `useKeyboardHeight()` instead
* for a simpler API.
*
- * @returns Object containing Visual Viewport state or `null` if not supported
+ * @returns {{ viewport: VisualViewportState | null }} Object containing Visual Viewport state, or `null` viewport if not supported.
*
* @see {@link useKeyboardHeight} - Simpler hook for keyboard height only
*
* @example
- * ```tsx
* function CustomLayout() {
* const { viewport } = useVisualViewport();
*
@@ -79,7 +78,6 @@ type VisualViewportState = {
*
* );
* }
- * ```
*/
export function useVisualViewport(): { viewport: VisualViewportState | null } {
const visualViewport = isServer() ? null : window.visualViewport;