@starci/hfs 4.0.8 → 4.0.9

package/templates/fe/skeleton/apps/landing/src/app/globals.css

@@ -0,0 +1,10 @@
+@import "tailwindcss";
+@import "@heroui/styles/css";
+@import "@starci/grammar/common.css";
+
+/*
+ * The grammar's renderers spell their layout in Tailwind utilities inside node_modules, which Tailwind never scans by default;
+ * the ui package's own utilities are scanned the same way.
+ */
+@source "../../../../../node_modules/@starci/grammar/dist";
+@source "../../../../packages/{{project}}-ui/src";

package/templates/fe/skeleton/apps/landing/src/features/layouts/LandingLayout/index.tsx

@@ -0,0 +1,24 @@
+import type { Metadata } from "next"
+import { getTranslations } from "next-intl/server"
+import type { ReactNode } from "react"
+import { SiteShell } from "@{{project}}/ui"
+import { LANDING_ROUTES } from "@/modules/routes"
+
+/** Framework-layout boundary input: the routed page body and nothing else. */
+type LandingLayoutProps = { readonly content: ReactNode }
+
+/** The document title and description of the landing, for the language in the address. */
+export const landingLayoutMetadata = async (locale: string): Promise<Metadata> => {
+    const t = await getTranslations({ locale, namespace: "landing" })
+    return { title: t("title"), description: t("description") }
+}
+
+/** The landing's chrome, resolved on the server: the shared brand shell with the wordmark linking home, around the routed body. */
+export const LandingLayout = async (props: LandingLayoutProps) => {
+    const t = await getTranslations("landing.shell")
+    return (
+        <SiteShell brand={t("brand")} homeHref={LANDING_ROUTES.home}>
+            {props.content}
+        </SiteShell>
+    )
+}

package/templates/fe/skeleton/apps/landing/src/features/pages/LandingErrorPage/component.tsx

@@ -0,0 +1,18 @@
+import { ErrorNotice } from "@{{project}}/ui"
+
+/** The error page's resolved words. */
+type LandingErrorPageBaseProps = {
+    readonly title: string
+    readonly retryLabel: string
+}
+
+/** What the error page reads: its resolved words and its one command, retry the segment. */
+type LandingErrorPageBaseContract = {
+    readonly props: LandingErrorPageBaseProps
+    readonly on: { readonly retry: () => void }
+}
+
+/** The pure error page of the landing: the screen a render failure shows, drawn from resolved words and one retry. */
+export const LandingErrorPageBase = (props: LandingErrorPageBaseContract) => (
+    <ErrorNotice title={props.props.title} retryLabel={props.props.retryLabel} onRetry={props.on.retry} />
+)

package/templates/fe/skeleton/apps/landing/src/features/pages/LandingErrorPage/index.tsx

@@ -0,0 +1,11 @@
+import { useTranslations } from "next-intl"
+import { LandingErrorPageBase } from "./component"
+
+/** The public props of the landing's locale error page: the boundary hands it the retry. */
+type LandingErrorPageProps = { readonly onRetry: () => void }
+
+/** A render failure in the landing shows this instead of a blank page; retry re-renders the segment. */
+export const LandingErrorPage = (props: LandingErrorPageProps) => {
+    const t = useTranslations("landing.errors.page")
+    return <LandingErrorPageBase props={{ title: t("title"), retryLabel: t("retry") }} on={{ retry: props.onRetry }} />
+}

package/templates/fe/skeleton/apps/landing/src/features/pages/LandingGlobalErrorPage/index.tsx

@@ -0,0 +1,16 @@
+import { DEFAULT_LOCALE } from "@{{project}}/i18n/routing"
+import { GlobalErrorNotice } from "@{{project}}/ui"
+import messages from "@/modules/i18n/messages/vi.json"
+
+/** The public props of the landing's last-resort error page: the boundary hands it the retry. */
+type LandingGlobalErrorPageProps = { readonly onRetry: () => void }
+
+/** The last-resort boundary above the locale layout of the landing: it has no provider, so it reads the default catalog directly. */
+export const LandingGlobalErrorPage = (props: LandingGlobalErrorPageProps) => (
+    <GlobalErrorNotice
+        lang={DEFAULT_LOCALE}
+        title={messages.landing.errors.global.title}
+        retryLabel={messages.landing.errors.global.retry}
+        onRetry={props.onRetry}
+    />
+)

package/templates/fe/skeleton/apps/landing/src/features/pages/LandingLoadingPage/index.tsx

@@ -0,0 +1,8 @@
+import { getTranslations } from "next-intl/server"
+import { LoadingNotice } from "@{{project}}/ui"
+
+/** Shown while a route of the landing resolves. */
+export const LandingLoadingPage = async () => {
+    const t = await getTranslations("landing.loading")
+    return <LoadingNotice label={t("message")} />
+}

package/templates/fe/skeleton/apps/landing/src/features/pages/LandingNotFoundPage/index.tsx

@@ -0,0 +1,9 @@
+import { getTranslations } from "next-intl/server"
+import { NotFoundNotice } from "@{{project}}/ui"
+import { LANDING_ROUTES } from "@/modules/routes"
+
+/** Shown when a route of the landing calls `notFound()`. */
+export const LandingNotFoundPage = async () => {
+    const t = await getTranslations("landing.notFound")
+    return <NotFoundNotice title={t("title")} homeLabel={t("home")} homeHref={LANDING_ROUTES.home} />
+}

package/templates/fe/skeleton/apps/landing/src/features/pages/LandingPage/component.tsx

@@ -0,0 +1,24 @@
+import { Button, Heading, Text } from "@starci/grammar/common"
+
+/** Props for {@link LandingPageBase}. */
+export type LandingPageBaseProps = {
+    /** The words and the link the page shows, already resolved. */
+    readonly props: {
+        readonly title: string
+        readonly lede: string
+        readonly openApp: string
+        /** The product app's origin: the landing hands the reader over to it. */
+        readonly appHref: string
+    }
+}
+
+/** Draw the public front door: the welcome, one sentence about the product and the way into the product app. */
+export const LandingPageBase = (props: LandingPageBaseProps) => (
+    <>
+        <Heading level={1}>{props.props.title}</Heading>
+        <Text tone="muted">{props.props.lede}</Text>
+        <Button href={props.props.appHref} variant="primary">
+            {props.props.openApp}
+        </Button>
+    </>
+)

package/templates/fe/skeleton/apps/landing/src/features/pages/LandingPage/index.tsx

@@ -0,0 +1,16 @@
+import type { Metadata } from "next"
+import { getTranslations } from "next-intl/server"
+import { appUrl } from "@/modules/config"
+import { LandingPageBase } from "./component"
+
+/** The document title of the landing page, from the catalog of the requested locale. */
+export const landingMetadata = async (): Promise<Metadata> => {
+    const t = await getTranslations("landing.home")
+    return { title: t("title") }
+}
+
+/** The landing page, resolved on the server: its copy from the catalog and the product app's origin from the config module. */
+export const LandingPage = async () => {
+    const t = await getTranslations("landing.home")
+    return <LandingPageBase props={{ title: t("title"), lede: t("lede"), openApp: t("openApp"), appHref: appUrl() }} />
+}

package/templates/fe/skeleton/apps/landing/src/modules/config/index.ts

@@ -0,0 +1,12 @@
+/**
+ * The only reader of `process.env` in the landing. A value is read when it is asked for, not when the file loads, and a missing
+ * value stops the caller with a named error: there is no localhost fallback.
+ */
+
+const required = (name: string, value: string | undefined): string => {
+    if (value === undefined || value === "") throw new Error(`${name} is not set`)
+    return value
+}
+
+/** The public origin of the product app the landing hands the reader over to; throws when `NEXT_PUBLIC_APP_URL` is not set. */
+export const appUrl = (): string => required("NEXT_PUBLIC_APP_URL", process.env.NEXT_PUBLIC_APP_URL)

package/templates/fe/skeleton/apps/landing/src/modules/i18n/index.ts

@@ -0,0 +1,7 @@
+import { createAppI18n } from "@{{project}}/i18n"
+
+/** The landing's i18n: the product's one next-intl stack (the i18n package), with this app's own catalogs under `messages/`. */
+export const landingI18n = createAppI18n(
+    "landing",
+    async (locale) => (await import(`./messages/${locale}.json`)).default,
+)

package/templates/fe/skeleton/apps/landing/src/modules/i18n/messages/vi.json

@@ -0,0 +1,31 @@
+{
+  "landing": {
+    "title": "{{project}}",
+    "description": "Trang giới thiệu {{project}}.",
+    "shell": {
+      "brand": "{{project}}"
+    },
+    "home": {
+      "title": "Chào mừng đến với {{project}}",
+      "lede": "Mọi thứ bạn cần đều ở trong ứng dụng.",
+      "openApp": "Mở ứng dụng"
+    },
+    "loading": {
+      "message": "Đang tải"
+    },
+    "notFound": {
+      "title": "Không tìm thấy trang",
+      "home": "Về trang chủ"
+    },
+    "errors": {
+      "page": {
+        "title": "Đã xảy ra lỗi",
+        "retry": "Thử lại"
+      },
+      "global": {
+        "title": "Đã xảy ra lỗi nghiêm trọng",
+        "retry": "Thử lại"
+      }
+    }
+  }
+}

package/templates/fe/skeleton/apps/landing/src/modules/i18n/request.ts

@@ -0,0 +1,4 @@
+import { landingI18n } from "./index"
+
+/** The request config next-intl's plugin loads (next.config.ts): the product stack over the landing's catalogs. */
+export default landingI18n.requestConfig

package/templates/fe/skeleton/apps/landing/src/modules/routes/index.ts

@@ -0,0 +1,4 @@
+/** Every internal destination the landing's screens link to, named once. */
+export const LANDING_ROUTES = {
+    home: "/",
+} as const

package/templates/fe/skeleton/apps/landing/src/proxy.ts

@@ -0,0 +1 @@
+export { proxy } from "@{{project}}/i18n/proxy"

package/templates/fe/skeleton/packages/__project__-i18n/src/index.ts

@@ -0,0 +1,49 @@
+import "server-only"
+import { hasLocale } from "next-intl"
+import { createNavigation } from "next-intl/navigation"
+import { getMessages, getRequestConfig, setRequestLocale } from "next-intl/server"
+import { notFound } from "next/navigation"
+import { locale as routeLocale } from "next/root-params"
+import { PRODUCT_TIME_ZONE, routing } from "./routing"
+
+/** Loads one app's own catalog for a served locale. */
+type LoadMessages = (locale: string) => Promise<Record<string, unknown>>
+
+/** The missing message next-intl asks a fallback for. */
+type MissingMessage = { readonly namespace?: string; readonly key: string }
+
+/**
+ * The next-intl stack of one app of the product, written once here and called once by each app's `modules/i18n` (R59): the
+ * product's one routing with its locale-aware navigation, the request config next-intl's plugin loads (the app's
+ * `modules/i18n/request.ts` default-exports it) and what the app's `[locale]` layout resolves before it mounts the shell. `app` names
+ * the app in the text of a message its catalog lacks (`<app>:<namespace>.<key>`); `loadMessages` loads its own catalogs. A server
+ * module: a client component reads the default locale from `./routing`.
+ */
+export const createAppI18n = (app: string, loadMessages: LoadMessages) => ({
+    navigation: createNavigation(routing),
+    /**
+     * The locale is the `[locale]` route param read through `next/root-params` (`experimental.rootParams` in the app's next.config.ts,
+     * FE-I18N-1), never the deprecated `requestLocale`. An unrecognised locale resolves to the default before the loader runs, so a
+     * missing catalog file is never imported.
+     */
+    requestConfig: getRequestConfig(async () => {
+        const requested: unknown = await routeLocale()
+        const locale = hasLocale(routing.locales, requested) ? requested : routing.defaultLocale
+        return {
+            locale,
+            timeZone: PRODUCT_TIME_ZONE,
+            messages: await loadMessages(locale),
+            getMessageFallback: ({ namespace, key }: MissingMessage) => `${app}:${namespace ?? ""}.${key}`,
+        }
+    }),
+    /**
+     * The language the address states, its catalog and the product time zone. An unknown segment is a route that does not exist,
+     * not a request to fall back silently.
+     */
+    readLocaleSegment: async (params: Promise<{ readonly locale: string }>) => {
+        const { locale } = await params
+        if (!hasLocale(routing.locales, locale)) notFound()
+        setRequestLocale(locale)
+        return { locale, messages: await getMessages(), timeZone: PRODUCT_TIME_ZONE }
+    },
+})

package/templates/fe/skeleton/packages/__project__-i18n/src/proxy.ts

@@ -0,0 +1,24 @@
+import "server-only"
+import createMiddleware from "next-intl/middleware"
+import { NextResponse, type NextRequest } from "next/server"
+import { routing } from "./routing"
+
+/** The first path segments of the API, the health probe and the framework: never locale-negotiated. */
+const UNNEGOTIATED_ROOTS: ReadonlySet<string> = new Set(["api", "health", "_next", "_vercel"])
+
+/** Whether the path belongs to the API, the health probe, the framework or a file with an extension. */
+const isUnnegotiated = (pathname: string): boolean => {
+    const segments = pathname.split("/")
+    const last = segments.at(-1) ?? ""
+    return UNNEGOTIATED_ROOTS.has(segments[1] ?? "") || (last.includes(".") && !last.endsWith("."))
+}
+
+const negotiate = createMiddleware(routing)
+
+/**
+ * The one thing that runs before a route exists: which language it is in. next-intl's middleware reads the cookie, falls back to
+ * the default and serves the default locale (vi) without a prefix. One routing table for every app; each app's `src/proxy.ts`
+ * re-exports this.
+ */
+export const proxy = (request: NextRequest) =>
+    isUnnegotiated(request.nextUrl.pathname) ? NextResponse.next() : negotiate(request)

package/templates/fe/skeleton/packages/__project__-i18n/src/routing.ts

@@ -0,0 +1,20 @@
+import { defineRouting } from "next-intl/routing"
+
+/** The locales every app of the product serves; every catalog of an app has the same keys in each. */
+const LOCALES = ["vi"] as const
+
+/** The locale served at the unprefixed path, and the language of a document no locale reached (the global error boundary). */
+export const DEFAULT_LOCALE = "vi"
+
+/** The product's time zone: fixed, not inferred, so the server and the hydrated client format the same instant the same way. */
+export const PRODUCT_TIME_ZONE = "Asia/Ho_Chi_Minh"
+
+/**
+ * The one routing table of the product, for the proxy, the navigation and the request config of every app: vi default, a prefix
+ * only when the locale is not the default, so `/vi` means the same thing on every app.
+ */
+export const routing = defineRouting({
+    locales: LOCALES,
+    defaultLocale: DEFAULT_LOCALE,
+    localePrefix: "as-needed",
+})

package/templates/fe/skeleton/packages/__project__-ui/src/branches/Providers/index.tsx

@@ -0,0 +1,23 @@
+"use client"
+
+import { I18nProvider } from "@heroui/react"
+import { NextIntlClientProvider } from "next-intl"
+import type { ReactNode } from "react"
+
+/** What the provider stack takes: the locale resolved on the server, its catalog, the product time zone and the tree it wraps. */
+type ProvidersProps = {
+    readonly locale: string
+    readonly messages: Record<string, unknown>
+    readonly timeZone: string
+    readonly children: ReactNode
+}
+
+/**
+ * The two contexts above every route: next-intl's copy context and React Aria's locale for the grammar's controls. Both take the
+ * same locale, so the sentences and the controls of a page speak one language.
+ */
+export const Providers = (props: ProvidersProps) => (
+    <NextIntlClientProvider locale={props.locale} messages={props.messages} timeZone={props.timeZone}>
+        <I18nProvider locale={props.locale}>{props.children}</I18nProvider>
+    </NextIntlClientProvider>
+)

package/templates/fe/skeleton/packages/__project__-ui/src/composites/ErrorNotice/index.tsx

@@ -0,0 +1,14 @@
+import { Alert } from "@starci/grammar/common"
+
+/** The words of a recoverable failure and the one way out of it. */
+type ErrorNoticeProps = {
+    readonly title: string
+    readonly retryLabel: string
+    /** Re-render the segment that failed. */
+    readonly onRetry: () => void
+}
+
+/** A failure shown as an assertive banner with its one recovery action, in place of a blank page. */
+export const ErrorNotice = (props: ErrorNoticeProps) => (
+    <Alert title={props.title} tone="negative" action={{ label: props.retryLabel, onAction: props.onRetry }} />
+)

package/templates/fe/skeleton/packages/__project__-ui/src/composites/GlobalErrorNotice/index.tsx

@@ -0,0 +1,25 @@
+import { Alert, GrammarRoot } from "@starci/grammar/common"
+
+/** The document language, the words of the failure and the one way out of it. */
+type GlobalErrorNoticeProps = {
+    readonly lang: string
+    readonly title: string
+    readonly retryLabel: string
+    /** Re-render the whole app. */
+    readonly onRetry: () => void
+}
+
+/** The last-resort failure: the whole document, drawn here because this boundary replaces the layout that would have drawn it. */
+export const GlobalErrorNotice = (props: GlobalErrorNoticeProps) => (
+    <html lang={props.lang}>
+        <body>
+            <GrammarRoot>
+                <Alert
+                    title={props.title}
+                    tone="negative"
+                    action={{ label: props.retryLabel, onAction: props.onRetry }}
+                />
+            </GrammarRoot>
+        </body>
+    </html>
+)

package/templates/fe/skeleton/packages/__project__-ui/src/composites/LoadingNotice/index.tsx

@@ -0,0 +1,9 @@
+import { Spinner } from "@starci/grammar/common"
+
+/** The word a wait announces. */
+type LoadingNoticeProps = {
+    readonly label: string
+}
+
+/** A wait shown as one announced spinner while a route resolves. */
+export const LoadingNotice = (props: LoadingNoticeProps) => <Spinner label={props.label} />

package/templates/fe/skeleton/packages/__project__-ui/src/composites/LocaleShell/index.tsx

@@ -0,0 +1,21 @@
+import type { ReactNode } from "react"
+import { Providers } from "../../branches/Providers"
+
+/** What the app's locale layout resolves before mounting the shell (the i18n package's readLocaleSegment). */
+type LocaleShellProps = {
+    readonly locale: string
+    readonly messages: Record<string, unknown>
+    readonly timeZone: string
+    readonly children: ReactNode
+}
+
+/** The document of one route language: `<html lang>` from the address and the provider stack; the app's own chrome is the children. */
+export const LocaleShell = (props: LocaleShellProps) => (
+    <html lang={props.locale}>
+        <body>
+            <Providers locale={props.locale} messages={props.messages} timeZone={props.timeZone}>
+                {props.children}
+            </Providers>
+        </body>
+    </html>
+)

package/templates/fe/skeleton/packages/__project__-ui/src/composites/NotFoundNotice/index.tsx

@@ -0,0 +1,19 @@
+import { Heading, TextAction } from "@starci/grammar/common"
+
+/** The words of a page that does not exist and the way back. */
+type NotFoundNoticeProps = {
+    readonly title: string
+    readonly homeLabel: string
+    /** The app's front door. */
+    readonly homeHref: string
+}
+
+/** A missing page: the message and the way back to the app's front door. */
+export const NotFoundNotice = (props: NotFoundNoticeProps) => (
+    <>
+        <Heading level={1}>{props.title}</Heading>
+        <TextAction appearance="inline" href={props.homeHref}>
+            {props.homeLabel}
+        </TextAction>
+    </>
+)

package/templates/fe/skeleton/packages/__project__-ui/src/composites/SiteShell/classNames.ts

@@ -0,0 +1,4 @@
+/** The shell's frame: a full-height column on the theme's page colours. */
+export const siteShellClassNames = {
+    frame: "flex min-h-screen flex-col bg-background text-foreground",
+} as const

package/templates/fe/skeleton/packages/__project__-ui/src/composites/SiteShell/index.tsx

@@ -0,0 +1,19 @@
+import type { ReactNode } from "react"
+import { GrammarRoot, PageContainer, TextAction, TopBar, WorkspaceShell } from "@starci/grammar/common"
+import { siteShellClassNames } from "./classNames"
+
+/** What an app's chrome hands the shell: the brand, its home link and the routed body. */
+type SiteShellProps = {
+    /** The wordmark; it also names the page's main landmark. */
+    readonly brand: string
+    /** The destination of the wordmark: the app's front door. */
+    readonly homeHref: string
+    /** The routed page body. */
+    readonly children: ReactNode
+}
+
+/**
+ * The document chrome both apps share: Grammar's Common boundary, the brand header (the top bar carrying the wordmark that links
+ * home), then the routed body in the shell's main landmark at reading measure. Colours are the theme's semantic tokens.
+ */
+{{> fe/common/site-shell.tsx.partial}}

package/templates/fe/skeleton/packages/__project__-ui/src/index.ts

@@ -0,0 +1,6 @@
+export { ErrorNotice } from "./composites/ErrorNotice"
+export { GlobalErrorNotice } from "./composites/GlobalErrorNotice"
+export { LoadingNotice } from "./composites/LoadingNotice"
+export { LocaleShell } from "./composites/LocaleShell"
+export { NotFoundNotice } from "./composites/NotFoundNotice"
+export { SiteShell } from "./composites/SiteShell"

package/templates/fe/skeleton-lite/apps/web/next.config.ts

@@ -0,0 +1,22 @@
+import { dirname, join } from "node:path"
+import { fileURLToPath } from "node:url"
+import type { NextConfig } from "next"
+import createNextIntlPlugin from "next-intl/plugin"
+
+/** The request config lives in this app's i18n module. */
+const withNextIntl = createNextIntlPlugin("./src/modules/i18n/request.ts")
+
+/** The npm workspace root, used by Turbopack and output tracing. */
+const WORKSPACE_ROOT = join(dirname(fileURLToPath(import.meta.url)), "..", "..", "..")
+
+/** Next config of the web app. */
+const nextConfig: NextConfig = {
+    output: "standalone",
+    reactStrictMode: true,
+    experimental: { rootParams: true },
+    outputFileTracingRoot: WORKSPACE_ROOT,
+    turbopack: { root: WORKSPACE_ROOT },
+    poweredByHeader: false,
+}
+
+export default withNextIntl(nextConfig)

package/templates/fe/skeleton-lite/apps/web/src/app/[locale]/error.tsx

@@ -0,0 +1,10 @@
+"use client"
+
+import { AppErrorPage } from "@/features/pages/AppErrorPage"
+
+type ErrorProps = { readonly reset: () => void }
+
+/** The locale segment's error boundary slot. */
+const ErrorBoundary = (props: ErrorProps) => <AppErrorPage onRetry={props.reset} />
+
+export default ErrorBoundary

package/templates/fe/skeleton-lite/apps/web/src/app/[locale]/layout.tsx

@@ -0,0 +1,37 @@
+import { hasLocale } from "next-intl"
+import { getMessages, setRequestLocale } from "next-intl/server"
+import { notFound } from "next/navigation"
+import type { ReactNode } from "react"
+import { AppLayout, appLayoutMetadata } from "@/features/layouts/AppLayout"
+import { PRODUCT_TIME_ZONE, routing } from "@/modules/i18n"
+import { Providers } from "./providers"
+import "../globals.css"
+import "@/modules/brand"
+
+type LayoutProps = {
+    readonly children: ReactNode
+    readonly params: Promise<{ readonly locale: string }>
+}
+
+/** The localized document title of this route segment. */
+export const generateMetadata = async (props: LayoutProps) => appLayoutMetadata((await props.params).locale)
+
+/** The locale segment's document, providers and app chrome. */
+const Layout = async (props: LayoutProps) => {
+    const { locale } = await props.params
+    if (!hasLocale(routing.locales, locale)) notFound()
+    setRequestLocale(locale)
+    const messages = await getMessages()
+    return (
+        <AppLayout
+            locale={locale}
+            content={
+                <Providers locale={locale} messages={messages} timeZone={PRODUCT_TIME_ZONE}>
+                    {props.children}
+                </Providers>
+            }
+        />
+    )
+}
+
+export default Layout

package/templates/fe/skeleton-lite/apps/web/src/app/[locale]/loading.tsx

@@ -0,0 +1,6 @@
+import { AppLoadingPage } from "@/features/pages/AppLoadingPage"
+
+/** The locale segment's loading slot. */
+const Loading = () => <AppLoadingPage />
+
+export default Loading

package/templates/fe/skeleton-lite/apps/web/src/app/[locale]/not-found.tsx

@@ -0,0 +1,6 @@
+import { AppNotFoundPage } from "@/features/pages/AppNotFoundPage"
+
+/** The locale segment's not-found slot. */
+const NotFound = () => <AppNotFoundPage />
+
+export default NotFound

package/templates/fe/skeleton-lite/apps/web/src/app/[locale]/page.tsx

@@ -0,0 +1,9 @@
+import { AppHomePage, appHomeMetadata } from "@/features/pages/AppHomePage"
+
+/** The document title of this page. */
+export const generateMetadata = appHomeMetadata
+
+/** The locale root's page slot. */
+const Page = () => <AppHomePage />
+
+export default Page

package/templates/fe/skeleton-lite/apps/web/src/app/[locale]/providers.tsx

@@ -0,0 +1,26 @@
+"use client"
+
+import { I18nProvider } from "@heroui/react"
+import { NextIntlClientProvider } from "next-intl"
+import { useEffect, type ReactNode } from "react"
+import { subscribeToAuthRefresh } from "@/modules/db/browser"
+import { navigation } from "@/modules/i18n"
+
+/** What the provider stack takes from the locale layout. */
+type ProvidersProps = {
+    readonly locale: string
+    readonly messages: Record<string, unknown>
+    readonly timeZone: string
+    readonly children: ReactNode
+}
+
+/** The copy, React Aria and auth-refresh contexts above every route. */
+export const Providers = (props: ProvidersProps) => {
+    const router = navigation.useRouter()
+    useEffect(() => subscribeToAuthRefresh(() => router.refresh()), [router])
+    return (
+        <NextIntlClientProvider locale={props.locale} messages={props.messages} timeZone={props.timeZone}>
+            <I18nProvider locale={props.locale}>{props.children}</I18nProvider>
+        </NextIntlClientProvider>
+    )
+}

package/templates/fe/skeleton-lite/apps/web/src/app/auth/callback/route.ts

@@ -0,0 +1,24 @@
+import "server-only"
+
+import type { NextRequest } from "next/server"
+import { NextResponse } from "next/server"
+import { exchangeAuthCode } from "@/modules/db"
+import { safeNextPath } from "@/modules/routes"
+
+const destinationOf = (request: NextRequest): URL => {
+    const path = safeNextPath(request.nextUrl.searchParams.get("next"), request.nextUrl.origin)
+    return new URL(path, request.nextUrl.origin)
+}
+
+/** Completes Supabase's PKCE exchange and returns only to a same-origin path. */
+export const GET = async (request: NextRequest): Promise<NextResponse> => {
+    const destination = destinationOf(request)
+    const code = request.nextUrl.searchParams.get("code")
+    if (code === null) {
+        destination.searchParams.set("auth", "invalid")
+        return NextResponse.redirect(destination)
+    }
+    const exchanged = await exchangeAuthCode(code)
+    if (exchanged.kind !== "ok") destination.searchParams.set("auth", exchanged.kind)
+    return NextResponse.redirect(destination)
+}

package/templates/fe/skeleton-lite/apps/web/src/app/global-error.tsx

@@ -0,0 +1,10 @@
+"use client"
+
+import { AppGlobalErrorPage } from "@/features/pages/AppGlobalErrorPage"
+
+type GlobalErrorProps = { readonly reset: () => void }
+
+/** The last-resort error boundary slot. */
+const GlobalError = (props: GlobalErrorProps) => <AppGlobalErrorPage onRetry={props.reset} />
+
+export default GlobalError