# @theorchard/suite-frontend Utilities

`@theorchard/suite-frontend` provides the app shell (`Page`) plus standalone utilities available in Figma Make.

```tsx
import { Page, formatMessage, formatDate, formatNumber, filterData } from '@theorchard/suite-frontend';
```

---

## Page

The root layout wrapper for all page content. See [layout.md](../components/layout.md) for full sub-component API.

```tsx
import { Page } from '@theorchard/suite-frontend';
```

---

## formatMessage

The i18n function for all user-facing text.

```tsx
import { formatMessage } from '@theorchard/suite-frontend';

const label = formatMessage('component.key');
const msg   = formatMessage('release.trackCount', { count: 12 });
```

Do NOT use raw string literals for user-facing text — always use `formatMessage`.

---

## formatDate

Formats a date value using the current locale.

```tsx
import { formatDate } from '@theorchard/suite-frontend';

const display = formatDate(releaseDate);               // locale-aware default
const custom  = formatDate(releaseDate, 'yyyy-MM-dd'); // custom format string
```

---

## formatNumber

Formats a number with locale-aware thousands separators and decimal handling.

```tsx
import { formatNumber } from '@theorchard/suite-frontend';

const display = formatNumber(1234567);   // "1,234,567"
const pct     = formatNumber(0.42, '%'); // "42%"
```

---

## filterData

Client-side filter utility for arrays of objects.

```tsx
import { filterData } from '@theorchard/suite-frontend';

const filtered = filterData(items, searchTerm, ['title', 'artist']);
```

---

## NotFoundPage / ErrorPage

Pre-built 404 and error state pages. Use instead of building custom error screens.

```tsx
import { NotFoundPage, ErrorPage } from '@theorchard/suite-frontend';
```