scale-stack 0.0.1-alpha.2 → 0.0.2

package/templates/form-handling/example-form.tsx.ejs

@@ -0,0 +1,428 @@
+"use client";
+
+<% if (hasAuth) { %>import { useAction } from "next-safe-action/hooks";
+<% } else { %>import { useHookFormAction } from "@next-safe-action/adapter-react-hook-form/hooks";
+<% } %>
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useEffect } from "react";
+import { Controller, type FieldPath<% if (hasAuth) { %>, useForm<% } %> } from "react-hook-form";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Checkbox } from "@/components/ui/checkbox";
+import {
+  Field,
+  FieldContent,
+  FieldDescription,
+  FieldError,
+  FieldGroup,
+  FieldLabel,
+  FieldLegend,
+  FieldSeparator,
+  FieldSet,
+} from "@/components/ui/field";
+import { Input } from "@/components/ui/input";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Switch } from "@/components/ui/switch";
+import { Textarea } from "@/components/ui/textarea";
+import { exampleFormAction } from "../_actions/example-form";
+import {
+  exampleFormDefaultValues,
+  exampleFormSchema,
+  type ExampleFormValues,
+  notificationOptions,
+  planOptions,
+} from "../_lib/example-form-schema";
+
+export function ExampleForm() {
+<% if (hasAuth) { %>  const action = useAction(exampleFormAction, {
+    throwOnNavigation: true,
+    onSuccess({ data }) {
+      if (!data) {
+        return;
+      }
+
+      console.info("[safe-action] example form succeeded", {
+        submittedAt: data.submittedAt,
+        workspace: data.workspace,
+      });
+    },
+    onError({ error }) {
+      console.warn("[safe-action] example form failed", {
+        hasServerError: Boolean(error.serverError),
+        hasValidationErrors: Boolean(error.validationErrors),
+      });
+    },
+  });
+  const form = useForm<ExampleFormValues>({
+    defaultValues: exampleFormDefaultValues,
+    mode: "onBlur",
+    resolver: zodResolver(exampleFormSchema),
+  });
+  const handleSubmitWithAction = form.handleSubmit((values) => {
+    action.execute(values);
+  });
+  const resetFormAndAction = () => {
+    form.reset(exampleFormDefaultValues);
+    action.reset();
+  };
+<% } else { %>
+  const { action, form, handleSubmitWithAction, resetFormAndAction } =
+    useHookFormAction(exampleFormAction, zodResolver(exampleFormSchema), {
+      actionProps: {
+        onSuccess({ data }) {
+          if (!data) {
+            return;
+          }
+
+          console.info("[safe-action] example form succeeded", {
+            submittedAt: data.submittedAt,
+            workspace: data.workspace,
+          });
+        },
+        onError({ error }) {
+          console.warn("[safe-action] example form failed", {
+            hasServerError: Boolean(error.serverError),
+            hasValidationErrors: Boolean(error.validationErrors),
+          });
+        },
+      },
+      errorMapProps: {
+        joinBy: "\n",
+      },
+      formProps: {
+        defaultValues: exampleFormDefaultValues,
+        mode: "onBlur",
+      },
+    });
+<% } %>
+
+  const watchedValues = form.watch();
+  const serverFieldErrors = action.result.validationErrors?.fieldErrors;
+  const serverFormError =
+    action.result.validationErrors?.formErrors.join("\n") ?? null;
+
+  useEffect(() => {
+    if (!serverFieldErrors) {
+      return;
+    }
+
+    for (const [fieldName, messages] of Object.entries(
+      serverFieldErrors,
+    ) as Array<[FieldPath<ExampleFormValues>, string[] | undefined]>) {
+      if (!messages?.length) {
+        continue;
+      }
+
+      form.setError(fieldName, {
+        message: messages.join("\n"),
+        type: "server",
+      });
+    }
+  }, [form, serverFieldErrors]);
+
+  useEffect(() => {
+    if (action.isPending || action.hasSucceeded) {
+      form.clearErrors();
+    }
+  }, [action.hasSucceeded, action.isPending, form]);
+
+  return (
+    <Card>
+      <CardHeader className="border-b">
+        <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
+          <div className="space-y-1">
+            <CardTitle>Full-stack form example</CardTitle>
+            <CardDescription>
+              One shared Zod schema drives React Hook Form validation, the
+              next-safe-action input parser, and the typed action result.
+            </CardDescription>
+          </div>
+          <Badge variant="secondary">Status: {action.status}</Badge>
+        </div>
+      </CardHeader>
+      <CardContent className="grid gap-6 lg:grid-cols-[minmax(0,1fr)_18rem]">
+        <form
+          id="example-form"
+          className="space-y-6"
+          noValidate
+          onSubmit={handleSubmitWithAction}
+        >
+          <FieldGroup>
+            <Controller
+              control={form.control}
+              name="name"
+              render={({ field, fieldState }) => (
+                <Field data-invalid={fieldState.invalid}>
+                  <FieldLabel htmlFor="example-form-name">Name</FieldLabel>
+                  <Input
+                    {...field}
+                    id="example-form-name"
+                    aria-invalid={fieldState.invalid}
+                    autoComplete="name"
+                    placeholder="Ada Lovelace"
+                  />
+                  <FieldDescription>
+                    Client-side errors come from the shared Zod schema.
+                  </FieldDescription>
+                  {fieldState.invalid ? (
+                    <FieldError errors={[fieldState.error]} />
+                  ) : null}
+                </Field>
+              )}
+            />
+
+            <Controller
+              control={form.control}
+              name="email"
+              render={({ field, fieldState }) => (
+                <Field data-invalid={fieldState.invalid}>
+                  <FieldLabel htmlFor="example-form-email">Email</FieldLabel>
+                  <Input
+                    {...field}
+                    id="example-form-email"
+                    aria-invalid={fieldState.invalid}
+                    autoComplete="email"
+                    placeholder="ada@example.dev"
+                    type="email"
+                  />
+                  <FieldDescription>
+                    The submitted object is inferred from the same schema on
+                    both sides of the server action boundary.
+                  </FieldDescription>
+                  {fieldState.invalid ? (
+                    <FieldError errors={[fieldState.error]} />
+                  ) : null}
+                </Field>
+              )}
+            />
+
+            <Controller
+              control={form.control}
+              name="workspace"
+              render={({ field, fieldState }) => (
+                <Field data-invalid={fieldState.invalid}>
+                  <FieldLabel htmlFor="example-form-workspace">
+                    Workspace slug
+                  </FieldLabel>
+                  <Input
+                    {...field}
+                    id="example-form-workspace"
+                    aria-invalid={fieldState.invalid}
+                    placeholder="scale-stack-demo"
+                  />
+                  <FieldDescription>
+                    Try <code>admin</code> to see a server-side validation error
+                    mapped back into this field.
+                  </FieldDescription>
+                  {fieldState.invalid ? (
+                    <FieldError errors={[fieldState.error]} />
+                  ) : null}
+                </Field>
+              )}
+            />
+
+            <Controller
+              control={form.control}
+              name="plan"
+              render={({ field, fieldState }) => (
+                <Field data-invalid={fieldState.invalid}>
+                  <FieldLabel htmlFor="example-form-plan">Plan</FieldLabel>
+                  <Select
+                    name={field.name}
+                    value={field.value}
+                    onValueChange={field.onChange}
+                  >
+                    <SelectTrigger
+                      id="example-form-plan"
+                      aria-invalid={fieldState.invalid}
+                    >
+                      <SelectValue placeholder="Choose a plan" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {planOptions.map((option) => (
+                        <SelectItem key={option.value} value={option.value}>
+                          {option.label}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                  <FieldDescription>
+                    Enterprise requires a note, enforced by the server action.
+                  </FieldDescription>
+                  {fieldState.invalid ? (
+                    <FieldError errors={[fieldState.error]} />
+                  ) : null}
+                </Field>
+              )}
+            />
+
+            <Controller
+              control={form.control}
+              name="notifications"
+              render={({ field, fieldState }) => (
+                <FieldSet data-invalid={fieldState.invalid}>
+                  <FieldLegend variant="label">Notifications</FieldLegend>
+                  <FieldDescription>
+                    Checkbox arrays stay typed as the schema enum values.
+                  </FieldDescription>
+                  <FieldGroup data-slot="checkbox-group">
+                    {notificationOptions.map((option) => (
+                      <Field key={option.value} orientation="horizontal">
+                        <Checkbox
+                          id={`example-form-notification-${option.value}`}
+                          name={field.name}
+                          checked={field.value.includes(option.value)}
+                          onCheckedChange={(checked) => {
+                            const nextValue =
+                              checked === true
+                                ? [...field.value, option.value]
+                                : field.value.filter(
+                                    (value) => value !== option.value,
+                                  );
+
+                            field.onChange(nextValue);
+                          }}
+                        />
+                        <FieldContent>
+                          <FieldLabel
+                            className="font-normal"
+                            htmlFor={`example-form-notification-${option.value}`}
+                          >
+                            {option.label}
+                          </FieldLabel>
+                          <FieldDescription>
+                            {option.description}
+                          </FieldDescription>
+                        </FieldContent>
+                      </Field>
+                    ))}
+                  </FieldGroup>
+                  {fieldState.invalid ? (
+                    <FieldError errors={[fieldState.error]} />
+                  ) : null}
+                </FieldSet>
+              )}
+            />
+
+            <Controller
+              control={form.control}
+              name="notes"
+              render={({ field, fieldState }) => (
+                <Field data-invalid={fieldState.invalid}>
+                  <FieldLabel htmlFor="example-form-notes">Notes</FieldLabel>
+                  <Textarea
+                    {...field}
+                    id="example-form-notes"
+                    aria-invalid={fieldState.invalid}
+                    placeholder="What should the generated app demonstrate?"
+                  />
+                  <FieldDescription>
+                    Server rules can return field errors through
+                    returnValidationErrors.
+                  </FieldDescription>
+                  {fieldState.invalid ? (
+                    <FieldError errors={[fieldState.error]} />
+                  ) : null}
+                </Field>
+              )}
+            />
+
+            <Controller
+              control={form.control}
+              name="acceptTerms"
+              render={({ field, fieldState }) => (
+                <Field
+                  orientation="horizontal"
+                  data-invalid={fieldState.invalid}
+                >
+                  <Switch
+                    id="example-form-accept-terms"
+                    name={field.name}
+                    checked={field.value}
+                    onCheckedChange={field.onChange}
+                    aria-invalid={fieldState.invalid}
+                  />
+                  <FieldContent>
+                    <FieldLabel htmlFor="example-form-accept-terms">
+                      Accept demo terms
+                    </FieldLabel>
+                    <FieldDescription>
+                      Boolean fields use controlled components without losing
+                      type inference.
+                    </FieldDescription>
+                    {fieldState.invalid ? (
+                      <FieldError errors={[fieldState.error]} />
+                    ) : null}
+                  </FieldContent>
+                </Field>
+              )}
+            />
+          </FieldGroup>
+        </form>
+
+        <aside className="space-y-4 rounded-lg border bg-muted/30 p-4">
+          <div className="space-y-1">
+            <p className="text-sm font-medium">Typed form state</p>
+            <p className="text-sm text-muted-foreground">
+              This preview is typed from the shared schema, not duplicated
+              client state.
+            </p>
+          </div>
+          <pre className="max-h-72 overflow-auto rounded-md bg-background p-3 text-xs">
+            {JSON.stringify(watchedValues, null, 2)}
+          </pre>
+          <FieldSeparator />
+          {action.hasSucceeded ? (
+            <div className="space-y-1 rounded-md border bg-background p-3">
+              <p className="text-sm font-medium">
+                {action.result.data.message}
+              </p>
+              <p className="text-sm text-muted-foreground">
+                Workspace: {action.result.data.workspace}
+              </p>
+              <p className="text-sm text-muted-foreground">
+                Notifications: {action.result.data.notificationCount}
+              </p>
+              <p className="text-xs text-muted-foreground">
+                Submitted at {action.result.data.submittedAt}
+              </p>
+            </div>
+          ) : null}
+          {action.hasErrored && action.result.serverError ? (
+            <FieldError>{action.result.serverError}</FieldError>
+          ) : null}
+          {action.hasErrored && serverFormError ? (
+            <FieldError>{serverFormError}</FieldError>
+          ) : null}
+        </aside>
+      </CardContent>
+      <CardFooter className="flex flex-col gap-3 border-t sm:flex-row sm:justify-between">
+        <Button
+          type="button"
+          variant="outline"
+          onClick={resetFormAndAction}
+          disabled={action.isPending}
+        >
+          Reset form and action
+        </Button>
+        <Button type="submit" form="example-form" disabled={action.isPending}>
+          {action.isPending ? "Submitting..." : "Submit typed action"}
+        </Button>
+      </CardFooter>
+    </Card>
+  );
+}

package/templates/i18n/ar.json.ejs

@@ -0,0 +1,77 @@
+{
+  "Metadata": {
+    "title": "<%= projectName %>",
+    "description": "تم إنشاؤه باستخدام Scale Stack"
+  },
+  "Home": {
+    "eyebrow": "Scale Stack",
+    "description": "تم تجهيز تطبيقك باستخدام shadcn/ui و Tailwind CSS 4 وإجراءات خادم typed ونماذج جاهزة وقواعد Scale Stack التي تساعد الوكلاء على العمل بأمان.",
+    "openDashboard": "افتح لوحة التحكم",
+    "openChat": "افتح المحادثة",
+    "signIn": "تسجيل الدخول",
+    "signUp": "إنشاء حساب",
+    "availablePages": "الصفحات المتاحة",
+    "availablePagesDescription": "انتقل مباشرة إلى المسارات التي أنشأها هذا القالب للمكدس الذي اخترته.",
+    "dashboard": "لوحة التحكم",
+    "dashboardDescription": "نماذج وإجراءات خادم typed.",
+    "dashboardCardDescription": "جرّب مثال React Hook Form المدعوم بـ Zod وحقول shadcn/ui و next-safe-action.",
+    "aiChat": "محادثة الذكاء الاصطناعي",
+    "aiChatDescription": "AI Elements مع مسار تجريبي دون مزود.",
+    "aiChatCardDescription": "افتح تجربة AI Elements وشاهد عقد نقل AI SDK جاهزًا لخلفيتك.",
+    "signInDescription": "تدفق تسجيل دخول Better Auth مع Microsoft Entra OAuth.",
+    "signInCardDescription": "جرّب Better Auth مع Microsoft Entra OAuth.",
+    "signInStatefulCardDescription": "جرّب Better Auth مع Microsoft Entra OAuth وجلسات بريد وكلمة مرور مدعومة بـ Prisma.",
+    "signUpDescription": "إنشاء حساب.",
+    "signUpStatefulDescription": "إنشاء حساب مع بريد وكلمة مرور وجلسات مدعومة بـ Prisma.",
+    "signUpCardDescription": "أنشئ حسابًا من خلال إعداد Better Auth نفسه واترك مسار البدء جاهزًا للتخصيص.",
+    "explorePages": "استكشف الصفحات المنشأة",
+    "explorePagesDescription": "كل بطاقة ترتبط بمسار حقيقي في هذا القالب.",
+    "exploreForms": "استكشف النماذج"
+  },
+  "Dashboard": {
+    "eyebrow": "لوحة التحكم",
+    "title": "تم ربط React Hook Form و next-safe-action معًا.",
+    "description": "هذا المسار هو المثال الوحيد المنشأ للتعديلات: تعرض مكونات shadcn الواجهة، ويدير React Hook Form حالة العميل، ويتحقق Zod من إدخال العميل والخادم، وتعيد next-safe-action بيانات typed وأخطاء تحقق مهيكلة."
+  },
+  "Chat": {
+    "metadataTitle": "المحادثة",
+    "metadataDescription": "محادثة تجريبية متوافقة مع AI SDK",
+    "eyebrow": "محادثة الذكاء الاصطناعي",
+    "title": "تم ربط AI Elements و AI SDK بتجربة حتمية.",
+    "description": "الواجهة جاهزة لخلفية محادثة خارجية، لكن هذا القالب يبقى دون مزود حتى يعمل المسار قبل وجود بيانات الاعتماد."
+  },
+  "Auth": {
+    "signInTitle": "تسجيل الدخول",
+    "signInDescriptionStateful": "استخدم حساب Microsoft أو البريد وكلمة المرور للمتابعة.",
+    "signInDescriptionStateless": "استخدم حساب Microsoft للمتابعة.",
+    "continueWithMicrosoft": "المتابعة باستخدام Microsoft",
+    "email": "البريد الإلكتروني",
+    "password": "كلمة المرور",
+    "name": "الاسم",
+    "signInWithEmail": "تسجيل الدخول بالبريد",
+    "noAccount": "ليس لديك حساب؟",
+    "createOne": "أنشئ حسابًا",
+    "createAccountTitle": "إنشاء حساب",
+    "createAccountMicrosoftTitle": "إنشاء حساب باستخدام Microsoft",
+    "createAccountDescriptionStateful": "استخدم Microsoft أو البريد وكلمة المرور لإنشاء حسابك.",
+    "createAccountDescriptionStateless": "تتم إدارة إنشاء الحساب عبر Microsoft Entra في هذا الإعداد عديم الحالة.",
+    "alreadyHaveAccount": "لديك حساب بالفعل؟",
+    "microsoftSignInFailed": "فشل تسجيل الدخول عبر Microsoft.",
+    "emailSignInFailed": "فشل تسجيل الدخول بالبريد.",
+    "emailSignUpFailed": "فشل إنشاء الحساب بالبريد.",
+    "authenticationRequired": "المصادقة مطلوبة",
+    "signInToContinue": "سجّل الدخول للمتابعة",
+    "protectedAction": "هذا الإجراء محمي. سجّل الدخول ثم حاول مرة أخرى.",
+    "goToSignIn": "اذهب إلى تسجيل الدخول"
+  },
+  "Errors": {
+    "errorEyebrow": "خطأ",
+    "errorTitle": "حدث خطأ ما",
+    "unexpectedError": "حدث خطأ غير متوقع.",
+    "tryAgain": "حاول مرة أخرى",
+    "notFoundEyebrow": "Scale Stack",
+    "notFoundTitle": "الصفحة غير موجودة",
+    "notFoundDescription": "الصفحة التي تبحث عنها غير موجودة.",
+    "goHome": "اذهب إلى الرئيسية"
+  }
+}

package/templates/i18n/en.json.ejs

@@ -0,0 +1,77 @@
+{
+  "Metadata": {
+    "title": "<%= projectName %>",
+    "description": "Generated with Scale Stack"
+  },
+  "Home": {
+    "eyebrow": "Scale Stack",
+    "description": "Your app is wired with shadcn/ui, Tailwind CSS 4, typed server actions, form handling, and the Scale Stack guardrails agents need to keep moving safely.",
+    "openDashboard": "Open dashboard",
+    "openChat": "Open chat",
+    "signIn": "Sign in",
+    "signUp": "Sign up",
+    "availablePages": "Available pages",
+    "availablePagesDescription": "Jump straight into the routes this scaffold generated for your selected stack.",
+    "dashboard": "Dashboard",
+    "dashboardDescription": "Form handling and typed server actions.",
+    "dashboardCardDescription": "Try the generated React Hook Form example backed by Zod, shadcn/ui fields, and next-safe-action.",
+    "aiChat": "AI chat",
+    "aiChatDescription": "AI Elements with a provider-free mock route.",
+    "aiChatCardDescription": "Open the provider-free AI Elements mock and see the AI SDK transport contract ready for your backend.",
+    "signInDescription": "Better Auth sign-in flow with Microsoft Entra OAuth.",
+    "signInCardDescription": "Exercise Better Auth with Microsoft Entra OAuth.",
+    "signInStatefulCardDescription": "Exercise Better Auth with Microsoft Entra OAuth and Prisma-backed email/password sessions.",
+    "signUpDescription": "Account creation.",
+    "signUpStatefulDescription": "Account creation with email/password and Prisma-backed sessions.",
+    "signUpCardDescription": "Create an account through the same Better Auth setup and keep the onboarding route ready for customization.",
+    "explorePages": "Explore generated pages",
+    "explorePagesDescription": "Each card links to a real route in this scaffold.",
+    "exploreForms": "Explore forms"
+  },
+  "Dashboard": {
+    "eyebrow": "Dashboard",
+    "title": "React Hook Form and next-safe-action are wired together.",
+    "description": "This route is the single generated example for mutations: shadcn field components render the UI, React Hook Form owns client state, Zod validates both client and server input, and next-safe-action returns typed data and mapped validation errors."
+  },
+  "Chat": {
+    "metadataTitle": "Chat",
+    "metadataDescription": "Deterministic AI SDK-compatible mock chat",
+    "eyebrow": "AI Chat",
+    "title": "AI Elements and AI SDK are wired to a deterministic mock.",
+    "description": "The UI is ready for an external chat backend, but this scaffold stays provider-free so the route works before credentials exist."
+  },
+  "Auth": {
+    "signInTitle": "Sign in",
+    "signInDescriptionStateful": "Use your Microsoft account or email and password to continue.",
+    "signInDescriptionStateless": "Use your Microsoft account to continue.",
+    "continueWithMicrosoft": "Continue with Microsoft",
+    "email": "Email",
+    "password": "Password",
+    "name": "Name",
+    "signInWithEmail": "Sign in with email",
+    "noAccount": "No account?",
+    "createOne": "Create one",
+    "createAccountTitle": "Create account",
+    "createAccountMicrosoftTitle": "Create account with Microsoft",
+    "createAccountDescriptionStateful": "Use Microsoft or email/password to create your account.",
+    "createAccountDescriptionStateless": "Account creation is handled by Microsoft Entra for this stateless setup.",
+    "alreadyHaveAccount": "Already have an account?",
+    "microsoftSignInFailed": "Microsoft sign-in failed.",
+    "emailSignInFailed": "Email sign-in failed.",
+    "emailSignUpFailed": "Email sign-up failed.",
+    "authenticationRequired": "Authentication required",
+    "signInToContinue": "Sign in to continue",
+    "protectedAction": "This action is protected. Sign in and then try again.",
+    "goToSignIn": "Go to sign in"
+  },
+  "Errors": {
+    "errorEyebrow": "Error",
+    "errorTitle": "Something went wrong",
+    "unexpectedError": "An unexpected error occurred.",
+    "tryAgain": "Try again",
+    "notFoundEyebrow": "Scale Stack",
+    "notFoundTitle": "Page not found",
+    "notFoundDescription": "The page you are looking for does not exist.",
+    "goHome": "Go home"
+  }
+}

package/templates/i18n/locale-layout.tsx.ejs

@@ -0,0 +1,81 @@
+import type { Metadata } from "next";
+import { Geist, Geist_Mono } from "next/font/google";
+import { notFound } from "next/navigation";
+import { Suspense } from "react";
+import { NextIntlClientProvider, hasLocale } from "next-intl";
+import {
+  getMessages,
+  getTranslations,
+  setRequestLocale,
+} from "next-intl/server";
+import { routing } from "@/i18n/routing";
+import "../globals.css";
+import { ClientSideWrappers } from "../_providers/client-side-wrappers";
+
+const geistSans = Geist({
+  variable: "--font-geist-sans",
+  subsets: ["latin"],
+});
+
+const geistMono = Geist_Mono({
+  variable: "--font-geist-mono",
+  subsets: ["latin"],
+});
+
+type LocaleLayoutProps = Readonly<{
+  children: React.ReactNode;
+  params: Promise<{ locale: string }>;
+}>;
+
+export function generateStaticParams() {
+  return routing.locales.map((locale) => ({ locale }));
+}
+
+export async function generateMetadata({
+  params,
+}: Pick<LocaleLayoutProps, "params">): Promise<Metadata> {
+  const { locale } = await params;
+
+  if (!hasLocale(routing.locales, locale)) {
+    notFound();
+  }
+
+  const t = await getTranslations({ locale, namespace: "Metadata" });
+
+  return {
+    title: t("title"),
+    description: t("description"),
+  };
+}
+
+export default async function LocaleLayout({
+  children,
+  params,
+}: LocaleLayoutProps) {
+  const { locale } = await params;
+
+  if (!hasLocale(routing.locales, locale)) {
+    notFound();
+  }
+
+  setRequestLocale(locale);
+
+  const messages = await getMessages();
+  const direction = locale === "ar" ? "rtl" : "ltr";
+
+  return (
+    <html
+      lang={locale}
+      dir={direction}
+      className={`${geistSans.variable} ${geistMono.variable} h-full antialiased`}
+    >
+      <body className="min-h-full flex flex-col">
+        <NextIntlClientProvider locale={locale} messages={messages}>
+          <Suspense>
+            <ClientSideWrappers>{children}</ClientSideWrappers>
+          </Suspense>
+        </NextIntlClientProvider>
+      </body>
+    </html>
+  );
+}

package/templates/i18n/navigation.ts.ejs

@@ -0,0 +1,5 @@
+import { createNavigation } from "next-intl/navigation";
+import { routing } from "./routing";
+
+export const { Link, redirect, usePathname, useRouter, getPathname } =
+  createNavigation(routing);

package/templates/i18n/next-intl.d.ts.ejs

@@ -0,0 +1,9 @@
+import { routing } from "./routing";
+import en from "../../messages/en.json";
+
+declare module "next-intl" {
+  interface AppConfig {
+    Locale: (typeof routing.locales)[number];
+    Messages: typeof en;
+  }
+}