@starci/hfs 5.0.8 → 5.2.0

package/templates/fe/skeleton/apps/__app__/src/modules/toast/toast.tsx

@@ -18,15 +18,21 @@ const INDICATOR: Record<"success" | "danger" | "warning" | "info", ReactNode> =
     info: <InformationCircleIcon className="size-6" />,
 }
 
-/** The app's toast: HeroUI's imperative toast with the status indicator injected; the region is mounted by the providers. */
-export const toast = {
-    ...heroToast,
-    success: (message: ReactNode, options?: StatusToastOptions) =>
-        heroToast.success(message, { indicator: INDICATOR.success, ...options }),
-    danger: (message: ReactNode, options?: StatusToastOptions) =>
-        heroToast.danger(message, { indicator: INDICATOR.danger, ...options }),
-    warning: (message: ReactNode, options?: StatusToastOptions) =>
-        heroToast.warning(message, { indicator: INDICATOR.warning, ...options }),
-    info: (message: ReactNode, options?: StatusToastOptions) =>
-        heroToast.info(message, { indicator: INDICATOR.info, ...options }),
-}
+/** The app's toast: HeroUI's, with the four status methods wrapped. */
+type AppToast = typeof heroToast
+
+/** The app's toast: HeroUI's imperative toast, callable as it is, with the four status methods wrapped to inject the status indicator; the region is mounted by the providers. */
+export const toast: AppToast = Object.assign(
+    (message: ReactNode, options?: Parameters<typeof heroToast>[1]) => heroToast(message, options),
+    heroToast,
+    {
+        success: (message: ReactNode, options?: StatusToastOptions) =>
+            heroToast.success(message, { indicator: INDICATOR.success, ...options }),
+        danger: (message: ReactNode, options?: StatusToastOptions) =>
+            heroToast.danger(message, { indicator: INDICATOR.danger, ...options }),
+        warning: (message: ReactNode, options?: StatusToastOptions) =>
+            heroToast.warning(message, { indicator: INDICATOR.warning, ...options }),
+        info: (message: ReactNode, options?: StatusToastOptions) =>
+            heroToast.info(message, { indicator: INDICATOR.info, ...options }),
+    },
+)

package/templates/fe/skeleton/apps/__app__/src/modules/viewer-cache/index.ts

@@ -0,0 +1,5 @@
+import { createViewerCache } from "@starci/next-data"
+import type { ViewerCache } from "@starci/next-data"
+
+/** The writes to the cache of the viewer on screen: the one instance of the app, bound by the client providers. */
+export const viewerCache: ViewerCache = createViewerCache()

package/templates/fe/skeleton/apps/__app__/src/redux/hooks.ts

@@ -1,8 +1,9 @@
 import { useDispatch, useSelector } from "react-redux"
+import type { UseDispatch, UseSelector } from "react-redux"
 import type { AppDispatch, RootState } from "./store"
 
 /** The typed dispatch of the app's store. */
-export const useAppDispatch = useDispatch.withTypes<AppDispatch>()
+export const useAppDispatch: UseDispatch<AppDispatch> = useDispatch.withTypes<AppDispatch>()
 
 /** The typed selector of the app's store. */
-export const useAppSelector = useSelector.withTypes<RootState>()
+export const useAppSelector: UseSelector<RootState> = useSelector.withTypes<RootState>()

package/templates/fe/skeleton/apps/__app__/src/redux/index.ts

@@ -1,3 +1,4 @@
 export { useAppDispatch, useAppSelector } from "./hooks"
 export { ReduxProvider } from "./ReduxProvider"
 export { sessionChanged } from "./slices/session"
+export type { SessionState } from "./slices/session"

package/templates/fe/skeleton/apps/__app__/src/redux/slices/session.ts

@@ -1,5 +1,5 @@
 import { createSlice } from "@reduxjs/toolkit"
-import type { PayloadAction } from "@reduxjs/toolkit"
+import type { CaseReducer, PayloadAction, Reducer, Slice } from "@reduxjs/toolkit"
 import type { AuthSession } from "@/modules/auth"
 
 /** The reader's session as the app shares it: unknown until modules/auth answers, then signed in or signed out. */
@@ -8,10 +8,18 @@ export interface SessionState {
     readonly session?: AuthSession
 }
 
+/** The reducers of the session slice. */
+type SessionReducers = {
+    sessionChanged: CaseReducer<SessionState, PayloadAction<AuthSession | undefined>>
+}
+
+/** The session slice as the store and the effects see it. */
+type SessionSlice = Slice<SessionState, SessionReducers, "session">
+
 const initialState: SessionState = { status: "unknown" }
 
 /** The session slice: written only by the auth session effect (hooks/effects), read by any component through useAppSelector. */
-export const sessionSlice = createSlice({
+export const sessionSlice: SessionSlice = createSlice({
     name: "session",
     initialState,
     reducers: {
@@ -21,6 +29,6 @@ export const sessionSlice = createSlice({
 })
 
 /** The one action of the session slice: modules/auth reported a session (or none). */
-export const { sessionChanged } = sessionSlice.actions
+export const sessionChanged: SessionSlice["actions"]["sessionChanged"] = sessionSlice.actions.sessionChanged
 /** The reducer the store mounts under `session`. */
-export const sessionReducer = sessionSlice.reducer
+export const sessionReducer: Reducer<SessionState> = sessionSlice.reducer

package/templates/fe/skeleton/apps/__app__/src/redux/store.ts

@@ -1,14 +1,19 @@
 import { configureStore } from "@reduxjs/toolkit"
+import type { EnhancedStore } from "@reduxjs/toolkit"
 import { sessionReducer } from "./slices/session"
+import type { SessionState } from "./slices/session"
+
+/** The state of the store, for useAppSelector: one slice per key of the root reducer. */
+export interface RootState {
+    readonly session: SessionState
+}
 
 /** The one store of the app: app-wide shared state only (feature-local state lives in hooks/zustand). */
-export const store = configureStore({
+export const store: EnhancedStore<RootState> = configureStore({
     reducer: {
         session: sessionReducer,
     },
 })
 
-/** The state of the store, for useAppSelector. */
-export type RootState = ReturnType<typeof store.getState>
 /** The dispatch of the store, for useAppDispatch. */
 export type AppDispatch = typeof store.dispatch

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

@@ -1,4 +1,5 @@
-import type { ReactNode } from "react"
+import type { Metadata } from "next"
+import type { ReactElement, ReactNode } from "react"
 import { LocaleShell } from "@{{project}}/ui"
 import { AppProviders } from "@/components/providers/AppProviders"
 import { AppLayout, appLayoutMetadata } from "@/features/layouts/AppLayout"
@@ -11,10 +12,10 @@ type LayoutProps = {
 }
 
 /** The localized document title of this route segment. */
-export const generateMetadata = async (props: LayoutProps) => appLayoutMetadata((await props.params).locale)
+export const generateMetadata = async (props: LayoutProps): Promise<Metadata> => appLayoutMetadata((await props.params).locale)
 
 /** The locale segment's layout slot: the document of the address's language, the app's client providers and its chrome. */
-const Layout = async (props: LayoutProps) => (
+const Layout = async (props: LayoutProps): Promise<ReactElement> => (
     <LocaleShell
         {...await appI18n.readLocaleSegment(props.params)}
         content={

package/templates/fe/skeleton/apps/app/src/features/layouts/AppLayout/index.tsx

@@ -1,6 +1,6 @@
 import type { Metadata } from "next"
 import { getTranslations } from "next-intl/server"
-import type { ReactNode } from "react"
+import type { ReactElement, ReactNode } from "react"
 import { SiteShell } from "@{{project}}/ui"
 import { siteUrl } from "@/modules/config"
 import { APP_ROUTES } from "@/modules/routes"

package/templates/fe/skeleton/apps/app/src/features/pages/AppHomePage/index.tsx

@@ -1,3 +1,4 @@
+import type { ReactElement } from "react"
 import type { Metadata } from "next"
 import { getTranslations } from "next-intl/server"
 import { AppGuideOverlay } from "@/features/overlays/AppGuideOverlay"
@@ -10,7 +11,7 @@ export const appHomeMetadata = async (): Promise<Metadata> => {
 }
 
 /** The first page of the product app: a server component; the session surface it draws runs on the client. */
-export const AppHomePage = async () => {
+export const AppHomePage = async (): Promise<ReactElement> => {
     const t = await getTranslations("app.home")
     return (
         <>

package/templates/fe/skeleton/apps/app/src/features/pages/AppLoadingPage/index.tsx

@@ -1,8 +1,9 @@
+import type { ReactElement } from "react"
 import { getTranslations } from "next-intl/server"
 import { LoadingNotice } from "@{{project}}/ui"
 
 /** Shown while a route of the product app resolves. */
-export const AppLoadingPage = async () => {
+export const AppLoadingPage = async (): Promise<ReactElement> => {
     const t = await getTranslations("app.loading")
     return <LoadingNotice label={t("message")} />
 }

package/templates/fe/skeleton/apps/app/src/features/pages/AppNotFoundPage/index.tsx

@@ -1,9 +1,10 @@
+import type { ReactElement } from "react"
 import { getTranslations } from "next-intl/server"
 import { NotFoundNotice } from "@{{project}}/ui"
 import { APP_ROUTES } from "@/modules/routes"
 
 /** Shown when a route of the product app calls `notFound()`. */
-export const AppNotFoundPage = async () => {
+export const AppNotFoundPage = async (): Promise<ReactElement> => {
     const t = await getTranslations("app.notFound")
     return <NotFoundNotice title={t("title")} homeLabel={t("home")} homeHref={APP_ROUTES.home} />
 }

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

@@ -1,4 +1,5 @@
 import { createAppI18n } from "@{{project}}/i18n"
+import type { AppI18n } from "@{{project}}/i18n"
 
 /** The product app's i18n: the product's one next-intl stack (the i18n package), with this app's own catalogs under `messages/`. */
-export const appI18n = createAppI18n("app", (locale) => import(`./messages/${locale}.json`))
+export const appI18n: AppI18n = createAppI18n("app", (locale) => import(`./messages/${locale}.json`))

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

@@ -1,4 +1,7 @@
 import { appI18n } from "./index"
+import type { AppI18n } from "@{{project}}/i18n"
 
 /** The request config next-intl's plugin loads (next.config.ts): the product stack over this app's catalogs. */
-export default appI18n.requestConfig
+const requestConfig: AppI18n["requestConfig"] = appI18n.requestConfig
+
+export default requestConfig

package/templates/fe/skeleton/apps/landing/src/app/[locale]/layout.tsx

@@ -1,4 +1,5 @@
-import type { ReactNode } from "react"
+import type { Metadata } from "next"
+import type { ReactElement, ReactNode } from "react"
 import { LocaleShell } from "@{{project}}/ui"
 import { LandingLayout, landingLayoutMetadata } from "@/features/layouts/LandingLayout"
 import { landingI18n } from "@/modules/i18n"
@@ -10,10 +11,10 @@ type LayoutProps = {
 }
 
 /** The localized document title and description of the landing. */
-export const generateMetadata = async (props: LayoutProps) => landingLayoutMetadata((await props.params).locale)
+export const generateMetadata = async (props: LayoutProps): Promise<Metadata> => landingLayoutMetadata((await props.params).locale)
 
 /** The locale segment's layout slot: the document of the address's language around the landing's chrome. */
-const Layout = async (props: LayoutProps) => (
+const Layout = async (props: LayoutProps): Promise<ReactElement> => (
     <LocaleShell {...await landingI18n.readLocaleSegment(props.params)} content={<LandingLayout content={props.children} />} />
 )
 

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

@@ -1,6 +1,6 @@
 import type { Metadata } from "next"
 import { getTranslations } from "next-intl/server"
-import type { ReactNode } from "react"
+import type { ReactElement, ReactNode } from "react"
 import { SiteShell } from "@{{project}}/ui"
 import { LANDING_ROUTES } from "@/modules/routes"
 
@@ -14,7 +14,7 @@ export const landingLayoutMetadata = async (locale: string): Promise<Metadata> =
 }
 
 /** 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) => {
+export const LandingLayout = async (props: LandingLayoutProps): Promise<ReactElement> => {
     const t = await getTranslations("landing.shell")
     return (
         <SiteShell brand={t("brand")} homeHref={LANDING_ROUTES.home}>

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

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

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

@@ -1,9 +1,10 @@
+import type { ReactElement } from "react"
 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 () => {
+export const LandingNotFoundPage = async (): Promise<ReactElement> => {
     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/index.tsx

@@ -1,3 +1,4 @@
+import type { ReactElement } from "react"
 import type { Metadata } from "next"
 import { getTranslations } from "next-intl/server"
 import { appUrl } from "@/modules/config"
@@ -10,7 +11,7 @@ export const landingMetadata = async (): Promise<Metadata> => {
 }
 
 /** 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 () => {
+export const LandingPage = async (): Promise<ReactElement> => {
     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/i18n/index.ts

@@ -1,4 +1,5 @@
 import { createAppI18n } from "@{{project}}/i18n"
+import type { AppI18n } 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", (locale) => import(`./messages/${locale}.json`))
+export const landingI18n: AppI18n = createAppI18n("landing", (locale) => import(`./messages/${locale}.json`))

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

@@ -1,4 +1,7 @@
 import { landingI18n } from "./index"
+import type { AppI18n } from "@{{project}}/i18n"
 
 /** The request config next-intl's plugin loads (next.config.ts): the product stack over the landing's catalogs. */
-export default landingI18n.requestConfig
+const requestConfig: AppI18n["requestConfig"] = landingI18n.requestConfig
+
+export default requestConfig

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

@@ -6,6 +6,7 @@ import { getMessages, getRequestConfig } from "next-intl/server"
 import { notFound } from "next/navigation"
 import { locale as routeLocale } from "next/root-params"
 import { PRODUCT_TIME_ZONE, routing } from "./routing"
+import type { ProductRouting } from "./routing"
 
 /** Loads one app's own catalog for a served locale. */
 type LoadMessages = (locale: string) => Promise<unknown>
@@ -27,6 +28,23 @@ const isLocaleReader = (value: unknown): value is () => Promise<unknown> => type
 
 const readRouteLocale = async (): Promise<unknown> => (isLocaleReader(routeLocale) ? routeLocale() : undefined)
 
+/** The language the address states, its catalog and the product time zone. */
+interface LocaleSegment {
+    readonly locale: string
+    readonly messages: AbstractIntlMessages
+    readonly timeZone: string
+}
+
+/** The navigation helpers of the product's routing (links, redirects, the locale-aware router). */
+type ProductNavigation = ReturnType<typeof createNavigation<ProductRouting["locales"], "as-needed">>
+
+/** What one app of the product reads of its next-intl stack. */
+export interface AppI18n {
+    readonly navigation: ProductNavigation
+    readonly requestConfig: ReturnType<typeof getRequestConfig>
+    readonly readLocaleSegment: (params: Promise<{ readonly locale: string }>) => Promise<LocaleSegment>
+}
+
 /**
  * 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
@@ -34,8 +52,8 @@ const readRouteLocale = async (): Promise<unknown> => (isLocaleReader(routeLocal
  * 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),
+export const createAppI18n = (app: string, loadMessages: LoadMessages): AppI18n => ({
+    navigation: createNavigation<ProductRouting["locales"], "as-needed">(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

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

@@ -20,5 +20,5 @@ const negotiate = createMiddleware(routing)
  * 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) =>
+export const proxy = (request: NextRequest): NextResponse =>
     isUnnegotiated(request.nextUrl.pathname) ? NextResponse.next() : negotiate(request)

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

@@ -1,4 +1,5 @@
 import { defineRouting } from "next-intl/routing"
+import type { RoutingConfig } 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", "en"] as const
@@ -9,11 +10,14 @@ 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 type of the product's routing table: the served locales, no locale prefix for the default one, no localized pathnames or domains. */
+export type ProductRouting = RoutingConfig<typeof LOCALES, "as-needed", never, never>
+
 /**
  * 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({
+export const routing: ProductRouting = defineRouting({
     locales: LOCALES,
     defaultLocale: DEFAULT_LOCALE,
     localePrefix: "as-needed",

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

@@ -1,4 +1,4 @@
-import { Heading, TextAction } from "@starci/grammar/common"
+import { Link, Page } from "@starci/grammar/common"
 
 /** The words of a page that does not exist and the way back. */
 type NotFoundNoticeProps = {
@@ -10,10 +10,7 @@ type NotFoundNoticeProps = {
 
 /** 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>
-    </>
+    <Page header={{ title: props.title }} measure="reading">
+        <Link href={props.homeHref}>{props.homeLabel}</Link>
+    </Page>
 )

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

@@ -1,6 +1,5 @@
 import type { ReactNode } from "react"
-import { GrammarRoot, PageContainer, TextAction, TopBar, WorkspaceShell } from "@starci/grammar/common"
-import { siteShellClassNames } from "./classNames"
+import { GrammarRoot, Link, TopBar, WorkspaceShell } from "@starci/grammar/common"
 
 /** What an app's chrome hands the shell: the brand, its home link and the routed body. */
 type SiteShellProps = {
@@ -14,6 +13,6 @@ type SiteShellProps = {
 
 /**
  * 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.
+ * home), then the routed body in the shell's main landmark (each page draws its own measure).
  */
 {{> fe/common/site-shell.tsx.partial}}

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

@@ -1,7 +1,8 @@
 import { hasLocale } from "next-intl"
 import { getMessages } from "next-intl/server"
 import { notFound } from "next/navigation"
-import type { ReactNode } from "react"
+import type { Metadata } from "next"
+import type { ReactElement, ReactNode } from "react"
 import { AppLayout, appLayoutMetadata } from "@/features/layouts/AppLayout"
 import { PRODUCT_TIME_ZONE, routing } from "@/modules/i18n"
 import { Providers } from "./providers"
@@ -14,10 +15,10 @@ type LayoutProps = {
 }
 
 /** The localized document title of this route segment. */
-export const generateMetadata = async (props: LayoutProps) => appLayoutMetadata((await props.params).locale)
+export const generateMetadata = async (props: LayoutProps): Promise<Metadata> => appLayoutMetadata((await props.params).locale)
 
 /** The locale segment's document, providers and app chrome. */
-const Layout = async (props: LayoutProps) => {
+const Layout = async (props: LayoutProps): Promise<ReactElement> => {
     const { locale } = await props.params
     if (!hasLocale(routing.locales, locale)) notFound()
     const messages = await getMessages()

package/templates/fe/skeleton-lite/apps/web/src/components/composites/NotFoundNotice/index.tsx

@@ -1,4 +1,4 @@
-import { Heading, TextAction } from "@starci/grammar/common"
+import { Link, Page } from "@starci/grammar/common"
 
 /** The words of a missing page and the way home. */
 type NotFoundNoticeProps = {
@@ -9,10 +9,7 @@ type NotFoundNoticeProps = {
 
 /** A missing page with one destination 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>
-    </>
+    <Page header={{ title: props.title }} measure="reading">
+        <Link href={props.homeHref}>{props.homeLabel}</Link>
+    </Page>
 )

package/templates/fe/skeleton-lite/apps/web/src/components/frames/SiteShell/index.tsx

@@ -1,6 +1,5 @@
 import type { ReactNode } from "react"
-import { GrammarRoot, PageContainer, TextAction, TopBar, WorkspaceShell } from "@starci/grammar/common"
-import { siteShellClassNames } from "./classNames"
+import { GrammarRoot, Link, TopBar, WorkspaceShell } from "@starci/grammar/common"
 
 /** What the app chrome hands the shell. */
 type SiteShellProps = {

package/templates/fe/skeleton-lite/apps/web/src/features/layouts/AppLayout/index.tsx

@@ -1,6 +1,6 @@
 import type { Metadata } from "next"
 import { getTranslations } from "next-intl/server"
-import type { ReactNode } from "react"
+import type { ReactElement, ReactNode } from "react"
 import { SiteShell } from "@/components/frames/SiteShell"
 import { siteUrl } from "@/modules/config"
 import { APP_ROUTES } from "@/modules/routes"
@@ -17,7 +17,7 @@ export const appLayoutMetadata = async (locale: string): Promise<Metadata> => {
 }
 
 /** The server-resolved app chrome around the routed body. */
-export const AppLayout = async (props: AppLayoutProps) => {
+export const AppLayout = async (props: AppLayoutProps): Promise<ReactElement> => {
     const t = await getTranslations("app.shell")
     return (
         <html lang={props.locale}>

package/templates/fe/skeleton-lite/apps/web/src/features/pages/AppHomePage/index.tsx

@@ -1,3 +1,4 @@
+import type { ReactElement } from "react"
 import type { Metadata } from "next"
 import { getTranslations } from "next-intl/server"
 import { AppGuideOverlay } from "@/features/overlays/AppGuideOverlay"
@@ -10,7 +11,7 @@ export const appHomeMetadata = async (): Promise<Metadata> => {
 }
 
 /** The front door (the session is client-side, drawn by the blocks the page composes). */
-export const AppHomePage = async () => {
+export const AppHomePage = async (): Promise<ReactElement> => {
     const t = await getTranslations("app.home")
     return (
         <>

package/templates/fe/skeleton-lite/apps/web/src/features/pages/AppLoadingPage/index.tsx

@@ -1,8 +1,9 @@
+import type { ReactElement } from "react"
 import { getTranslations } from "next-intl/server"
 import { LoadingNotice } from "@/components/composites/LoadingNotice"
 
 /** Shown while a route resolves. */
-export const AppLoadingPage = async () => {
+export const AppLoadingPage = async (): Promise<ReactElement> => {
     const t = await getTranslations("app.loading")
     return <LoadingNotice label={t("message")} />
 }

package/templates/fe/skeleton-lite/apps/web/src/features/pages/AppNotFoundPage/index.tsx

@@ -1,9 +1,10 @@
+import type { ReactElement } from "react"
 import { getTranslations } from "next-intl/server"
 import { NotFoundNotice } from "@/components/composites/NotFoundNotice"
 import { APP_ROUTES } from "@/modules/routes"
 
 /** Shown when a route does not exist. */
-export const AppNotFoundPage = async () => {
+export const AppNotFoundPage = async (): Promise<ReactElement> => {
     const t = await getTranslations("app.notFound")
     return <NotFoundNotice title={t("title")} homeLabel={t("home")} homeHref={APP_ROUTES.home} />
 }

package/templates/fe/skeleton-lite/apps/web/src/modules/i18n/request.ts

@@ -21,7 +21,7 @@ const LOCALE_HEADER = "x-next-intl-locale"
  * The request config next-intl's plugin loads. The locale is the one the middleware negotiated: this module is reachable from the proxy
  * through the navigation, and `next/root-params` can only be imported inside the app directory.
  */
-export default getRequestConfig(async () => {
+const requestConfig: ReturnType<typeof getRequestConfig> = getRequestConfig(async () => {
     const requested = (await headers()).get(LOCALE_HEADER)
     const locale = hasLocale(routing.locales, requested) ? requested : routing.defaultLocale
     return {
@@ -31,3 +31,5 @@ export default getRequestConfig(async () => {
         getMessageFallback: ({ namespace, key }) => `web:${namespace ?? ""}.${key}`,
     }
 })
+
+export default requestConfig

package/templates/fe/skeleton-lite/apps/web/src/modules/i18n/routing.ts

@@ -7,7 +7,11 @@ export const DEFAULT_LOCALE = "vi" as const
 export const PRODUCT_TIME_ZONE = "Asia/Ho_Chi_Minh"
 
 /** The one locale-routing table of the web app. */
-export const routing = {
+export const routing: {
+    readonly locales: typeof LOCALES
+    readonly defaultLocale: typeof DEFAULT_LOCALE
+    readonly localePrefix: "as-needed"
+} = {
     locales: LOCALES,
     defaultLocale: DEFAULT_LOCALE,
     localePrefix: "as-needed" as const,

package/templates/fe/table/graphql/useMutateSwr.ts.tpl

@@ -1,5 +1,6 @@
 import { useSWRConfig } from "swr"
 import useSWRMutation from "swr/mutation"
+import type { SWRMutationResponse } from "swr/mutation"
 import type { GraphQLResponse } from "@/modules/api"
 import { mutateCreate{{Singular}} } from "@/modules/api/graphql/mutations/mutation-create-{{singular}}"
 import type { MutateCreate{{Singular}}Data } from "@/modules/api/graphql/mutations/types/create-{{singular}}"
@@ -12,7 +13,7 @@ export const MUTATE_CREATE_{{singularUpper}}_SWR_KEY = "MUTATE_CREATE_{{singular
  * Creates one {{singular}} row; answers the GraphQLResponse so the caller reports it through modules/toast
  * (useGraphQLWithToast). A success primes the {{singular}} query of the new row with that response.
  */
-export const useMutateCreate{{Singular}}Swr = () => {
+export const useMutateCreate{{Singular}}Swr = (): SWRMutationResponse<GraphQLResponse<MutateCreate{{Singular}}Data>, Error, string, never> => {
     const { mutate } = useSWRConfig()
     return useSWRMutation(MUTATE_CREATE_{{singularUpper}}_SWR_KEY, async () => {
         const response: GraphQLResponse<MutateCreate{{Singular}}Data> = await mutateCreate{{Singular}}({ request: {} })

package/templates/fe/table/graphql/useQuerySwr.ts.tpl

@@ -1,4 +1,5 @@
 import useSWR from "swr"
+import type { SWRResponse } from "swr"
 import type { GraphQLResponse } from "@/modules/api"
 import { query{{Singular}} } from "@/modules/api/graphql/queries/query-{{singular}}"
 import type { Query{{Singular}}Data } from "@/modules/api/graphql/queries/types/{{singular}}"
@@ -7,7 +8,7 @@ import type { Query{{Singular}}Data } from "@/modules/api/graphql/queries/types/
 export const QUERY_{{singularUpper}}_SWR_KEY = "QUERY_{{singularUpper}}_SWR"
 
 /** One {{singular}} row of the signed-in reader by id, as its GraphQLResponse; no id, no request. */
-export const useQuery{{Singular}}Swr = (id: string | undefined) =>
+export const useQuery{{Singular}}Swr = (id: string | undefined): SWRResponse<GraphQLResponse<Query{{Singular}}Data>, Error> =>
     useSWR(
         id === undefined ? null : ([QUERY_{{singularUpper}}_SWR_KEY, id] as const),
         ([, rowId]): Promise<GraphQLResponse<Query{{Singular}}Data>> => query{{Singular}}({ request: { id: rowId } }),

package/templates/fe/transport/graphql/clients/clients/auth.ts

@@ -23,7 +23,7 @@ export interface CreateAuthApolloClientOptions {
  * retry (transient network failures) -> error (report) -> timeout -> refresh (one token refresh and replay on
  * UNAUTHENTICATED) -> locale (`Accept-Language`) -> access token (`Authorization: Bearer`, from modules/auth) -> http (terminal).
  */
-export const createAuthApolloClient = ({ signal, report }: CreateAuthApolloClientOptions) =>
+export const createAuthApolloClient = ({ signal, report }: CreateAuthApolloClientOptions): ApolloClient =>
     new ApolloClient({
         link: ApolloLink.from([
             createRetryLink(),

package/templates/fe/transport/graphql/clients/clients/no-auth.ts

@@ -19,7 +19,7 @@ export interface CreateNoAuthApolloClientOptions {
  * The anonymous Apollo client for public operations: retry -> error -> timeout -> locale -> http. It never attaches a
  * token, so a public operation stays public even for a signed-in reader.
  */
-export const createNoAuthApolloClient = ({ signal, report }: CreateNoAuthApolloClientOptions) =>
+export const createNoAuthApolloClient = ({ signal, report }: CreateNoAuthApolloClientOptions): ApolloClient =>
     new ApolloClient({
         link: ApolloLink.from([
             createRetryLink(),