@played/app-ui (0.23.5)
Published 2026-06-06 00:49:08 +00:00 by enricobuehler
Installation
@played:registry=https://git.unom.io/api/packages/played/npm/npm install @played/app-ui@0.23.5"@played/app-ui": "0.23.5"About this package
@played/app-ui
Composite, opinionated app-level UI shared across played.* games. One layer up from @played/ui (which is primitives only). Consumes @played/ui, @played/auth, optionally @played/cms, and a paraglide-style i18n message namespace.
Subpath exports
@played/app-ui/auth—<AuthSection>: sign-in flows (guest / email / Discord). Renders nothing when logged in.@played/app-ui/account—<AccountCard>: "logged in as X" + sign-out + a slot for game-specific extras (e.g. avatar editor).@played/app-ui/page—<CmsPage slug={...} />: queries@played/cmsby slug, renders<Section>+<Heading>+<RichText>.@played/app-ui/provider—<PlayedAppUIProvider cmsClient={...} messages={m}>: wires the cms client + i18n messages into context.@played/app-ui/messages—AppUIMessagesTypeScript interface (every key the components call).
authClient is provided separately via <AuthClientProvider> from @played/auth/client — that context lives with the auth package itself.
Wiring (one-time per app)
import { AuthClientProvider } from "@played/auth/client";
import { PlayedAppUIProvider } from "@played/app-ui/provider";
import { authClient } from "./lib/auth-client";
import { cmsClient } from "./lib/cms-client";
import { m } from "./paraglide/messages";
export function Wrap({ children }) {
return (
<AuthClientProvider authClient={authClient}>
<PlayedAppUIProvider cmsClient={cmsClient} messages={m}>
{children}
</PlayedAppUIProvider>
</AuthClientProvider>
);
}
Required paraglide message keys
See AppUIMessages in src/messages.ts. Your consumer's paraglide-generated m must satisfy that interface — match the key names and signatures exactly. A starter examples/messages.en.json is included.
Dependencies
Development Dependencies
| ID | Version |
|---|---|
| @biomejs/biome | ^2.4.16 |
| @played/api-core | ^0.6.9 |
| @played/cms | ^1.2.0 |
| @played/games-registry | ^0.11.0 |
| @played/platform | ^0.1.9 |
| @played/ui | ^0.8.16 |
| @react-three/drei | ^10.7.7 |
| @react-three/fiber | ^9.6.1 |
| @storybook/react-vite | ^10.4.2 |
| @tailwindcss/vite | ^4.3.0 |
| @tanstack/react-query | ^5.101.0 |
| @tanstack/react-router | ^1.170.11 |
| @types/bun | latest |
| @types/react | ^19.2.16 |
| @types/three | ^0.184.1 |
| @unom/style | ^0.4.4 |
| @vitejs/plugin-react | ^6.0.2 |
| better-auth | ^1.6.14 |
| motion | ^12.40.0 |
| react | ^19.2.7 |
| react-dom | ^19.2.7 |
| satori | ^0.26.0 |
| storybook | ^10.4.2 |
| tailwindcss | ^4.3.0 |
| three | ^0.184.0 |
| tsdown | ^0.22.1 |
| tw-animate-css | ^1.4.0 |
| typescript | ^6.0.3 |
| vite | ^8.0.16 |
Peer Dependencies
| ID | Version |
|---|---|
| @played/api-core | ^0.6.9 |
| @played/auth | ^0.8.2 |
| @played/cms | ^1.2.0 |
| @played/games-registry | ^0.11.0 |
| @played/platform | ^0.1.9 |
| @played/ui | ^0.8.16 |
| @react-three/drei | ^10.7.7 |
| @react-three/fiber | ^9.6.1 |
| @tanstack/react-query | ^5.101.0 |
| @tanstack/react-router | >=1.170.11 |
| @unom/style | ^0.4.4 |
| better-auth | ^1.6.14 |
| lucide-react | ^1.17.0 |
| motion | ^12.40.0 |
| radix-ui | ^1.4.3 |
| react | ^19.2.7 |
| three | ^0.184.0 |