@played/app-ui (0.7.11)
Published 2026-05-21 13:31:51 +00:00 by enricobuehler
Installation
@played:registry=https://git.unom.io/api/packages/played/npm/npm install @played/app-ui@0.7.11"@played/app-ui": "0.7.11"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 |
|---|---|
| @played/cms | ^1.2.0 |
| @played/games-registry | ^0.3.7 |
| @played/platform | ^0.1.5 |
| @played/ui | ^0.6.7 |
| @storybook/react-vite | ^10.4.0 |
| @tailwindcss/vite | ^4.3.0 |
| @tanstack/react-query | ^5.100.11 |
| @types/bun | latest |
| @types/react | ^19.2.15 |
| @unom/style | ^0.4.4 |
| @vitejs/plugin-react | ^6.0.2 |
| better-auth | ^1.6.11 |
| motion | ^12.40.0 |
| react | ^19.2.6 |
| react-dom | ^19.2.6 |
| storybook | ^10.4.0 |
| tailwindcss | ^4.3.0 |
| tsdown | ^0.22.0 |
| tw-animate-css | ^1.4.0 |
| typescript | ^6.0.3 |
| vite | ^8.0.14 |
Peer Dependencies
| ID | Version |
|---|---|
| @played/auth | ^0.6.0 |
| @played/cms | ^1.2.0 |
| @played/games-registry | ^0.3.7 |
| @played/platform | ^0.1.5 |
| @played/ui | ^0.6.7 |
| @tanstack/react-query | ^5.100.11 |
| @unom/style | ^0.4.4 |
| better-auth | ^1.6.11 |
| lucide-react | ^1.16.0 |
| motion | ^12.40.0 |
| radix-ui | ^1.4.3 |
| react | ^19.2.6 |