npm - create-zerotal - Versions diffs - 1.0.0 - Mend

create-zerotal 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (142) hide show

package/CHANGELOG.md +17 -0
package/LICENSE +21 -0
package/README.md +58 -0
package/package.json +43 -0
package/src/index.ts +136 -0
package/src/prompts.ts +81 -0
package/src/scaffold.ts +104 -0
package/templates/admin/_env.example +2 -0
package/templates/admin/_gitignore +4 -0
package/templates/admin/app/admin/ProductResource.ts +192 -0
package/templates/admin/app/admin/SettingsResource.ts +37 -0
package/templates/admin/app/admin/UserResource.ts +103 -0
package/templates/admin/app/admin/index.ts +46 -0
package/templates/admin/app/admin/shared.ts +36 -0
package/templates/admin/app/admin/widgets.ts +51 -0
package/templates/admin/app/models/Product.ts +21 -0
package/templates/admin/app/models/Setting.ts +14 -0
package/templates/admin/app/models/User.ts +20 -0
package/templates/admin/bootstrap/app.ts +16 -0
package/templates/admin/bootstrap/providers.ts +23 -0
package/templates/admin/config/app.ts +22 -0
package/templates/admin/config/auth.ts +5 -0
package/templates/admin/config/cache.ts +7 -0
package/templates/admin/config/database.ts +14 -0
package/templates/admin/config/session.ts +10 -0
package/templates/admin/database/seeders/DatabaseSeeder.ts +50 -0
package/templates/admin/package.json +18 -0
package/templates/admin/tests/admin_test.ts +58 -0
package/templates/admin/tsconfig.json +20 -0
package/templates/admin/zt.ts +15 -0
package/templates/api/_env.example +4 -0
package/templates/api/_gitignore +5 -0
package/templates/api/app/controllers/AuthController.ts +69 -0
package/templates/api/app/controllers/WelcomeController.ts +10 -0
package/templates/api/app/middleware/RequireAuth.ts +10 -0
package/templates/api/app/models/User.ts +16 -0
package/templates/api/bootstrap/app.ts +19 -0
package/templates/api/config/app.ts +8 -0
package/templates/api/config/database.ts +6 -0
package/templates/api/config/notifications.ts +13 -0
package/templates/api/config/queue.ts +6 -0
package/templates/api/config/session.ts +10 -0
package/templates/api/database/migrations/0001_create_users_table.ts +18 -0
package/templates/api/package.json +16 -0
package/templates/api/routes/index.ts +13 -0
package/templates/api/tests/README.md +77 -0
package/templates/api/tests/auth.test.ts +134 -0
package/templates/api/tests/helpers.ts +36 -0
package/templates/api/tsconfig.json +14 -0
package/templates/api/zt.ts +16 -0
package/templates/flow/_env.example +2 -0
package/templates/flow/_gitignore +6 -0
package/templates/flow/app/flow/layouts/app.tsx +52 -0
package/templates/flow/app/flow/pages/about.tsx +35 -0
package/templates/flow/app/flow/pages/contact.tsx +47 -0
package/templates/flow/app/flow/pages/index.tsx +48 -0
package/templates/flow/bootstrap/app.ts +8 -0
package/templates/flow/bootstrap/providers.ts +6 -0
package/templates/flow/config/app.ts +28 -0
package/templates/flow/package.json +20 -0
package/templates/flow/public/zt.svg +17 -0
package/templates/flow/resources/css/app.css +1 -0
package/templates/flow/resources/js/app.ts +10 -0
package/templates/flow/resources/js/env.d.ts +23 -0
package/templates/flow/tests/smoke.test.ts +56 -0
package/templates/flow/tsconfig.json +18 -0
package/templates/flow/zt.ts +15 -0
package/templates/minimal/_env.example +2 -0
package/templates/minimal/_gitignore +6 -0
package/templates/minimal/bootstrap/app.ts +9 -0
package/templates/minimal/config/app.ts +28 -0
package/templates/minimal/package.json +20 -0
package/templates/minimal/resources/css/app.css +1 -0
package/templates/minimal/resources/js/app.ts +2 -0
package/templates/minimal/resources/js/components/Logo.tsx +48 -0
package/templates/minimal/resources/js/env.d.ts +13 -0
package/templates/minimal/resources/js/layouts/AppLayout.tsx +56 -0
package/templates/minimal/resources/js/pages/about.tsx +30 -0
package/templates/minimal/resources/js/pages/contact.tsx +49 -0
package/templates/minimal/resources/js/pages/welcome.tsx +42 -0
package/templates/minimal/routes/index.ts +16 -0
package/templates/minimal/tests/smoke.test.ts +51 -0
package/templates/minimal/tsconfig.json +19 -0
package/templates/minimal/zt.ts +15 -0
package/templates/react/_env.example +4 -0
package/templates/react/_gitignore +5 -0
package/templates/react/app/exceptions/Handler.ts +55 -0
package/templates/react/app/routes/about.ts +8 -0
package/templates/react/app/routes/contact.ts +31 -0
package/templates/react/app/routes/index.ts +11 -0
package/templates/react/bootstrap/app.ts +12 -0
package/templates/react/bootstrap/providers.ts +10 -0
package/templates/react/config/app.ts +25 -0
package/templates/react/config/inertia.ts +7 -0
package/templates/react/config/session.ts +11 -0
package/templates/react/package.json +26 -0
package/templates/react/public/zt.svg +17 -0
package/templates/react/resources/app.html +39 -0
package/templates/react/resources/css/app.css +206 -0
package/templates/react/resources/js/Components/Button.tsx +67 -0
package/templates/react/resources/js/Components/Card.tsx +40 -0
package/templates/react/resources/js/Components/Code.tsx +33 -0
package/templates/react/resources/js/Components/Field.tsx +125 -0
package/templates/react/resources/js/Components/FlashToasts.tsx +79 -0
package/templates/react/resources/js/Components/Icons.tsx +149 -0
package/templates/react/resources/js/Components/ThemeToggle.tsx +47 -0
package/templates/react/resources/js/Layouts/AppLayout.tsx +163 -0
package/templates/react/resources/js/app.tsx +29 -0
package/templates/react/resources/js/env.d.ts +13 -0
package/templates/react/resources/js/lib/cn.ts +13 -0
package/templates/react/resources/js/lib/site.ts +11 -0
package/templates/react/resources/js/pages/about.tsx +146 -0
package/templates/react/resources/js/pages/contact.tsx +152 -0
package/templates/react/resources/js/pages/error.tsx +91 -0
package/templates/react/resources/js/pages/home.tsx +199 -0
package/templates/react/resources/js/pages.generated.ts +13 -0
package/templates/react/resources/js/types.ts +17 -0
package/templates/react/tests/smoke.test.ts +69 -0
package/templates/react/tsconfig.json +21 -0
package/templates/react/zt.ts +15 -0
package/templates/vue/_env.example +4 -0
package/templates/vue/_gitignore +5 -0
package/templates/vue/app/routes/about.ts +7 -0
package/templates/vue/app/routes/contact.ts +7 -0
package/templates/vue/app/routes/index.ts +8 -0
package/templates/vue/bootstrap/app.ts +8 -0
package/templates/vue/bootstrap/providers.ts +6 -0
package/templates/vue/config/app.ts +25 -0
package/templates/vue/config/inertia.ts +7 -0
package/templates/vue/package.json +24 -0
package/templates/vue/resources/app.html +13 -0
package/templates/vue/resources/css/app.css +1 -0
package/templates/vue/resources/js/Layouts/AppLayout.vue +63 -0
package/templates/vue/resources/js/app.tsx +19 -0
package/templates/vue/resources/js/env.d.ts +20 -0
package/templates/vue/resources/js/pages/about.vue +41 -0
package/templates/vue/resources/js/pages/contact.vue +54 -0
package/templates/vue/resources/js/pages/home.vue +54 -0
package/templates/vue/resources/js/pages.generated.ts +12 -0
package/templates/vue/tests/smoke.test.ts +46 -0
package/templates/vue/tsconfig.json +21 -0
package/templates/vue/zt.ts +15 -0

package/templates/react/resources/js/lib/site.ts ADDED Viewed

@@ -0,0 +1,11 @@
+/**
+ * Site-wide constants the UI reads.
+ *
+ * `APP_NAME` is stamped in when the project is scaffolded — the same value as
+ * `name` in config/app.ts and the `<title>` suffix in resources/js/app.tsx.
+ * Change all three together when you rename the app.
+ */
+export const APP_NAME = "{{name}}";
+/** Where the header and footer "Docs" links point. */
+export const DOCS_URL = "https://github.com/zerotaldev/zerotal";

package/templates/react/resources/js/pages/about.tsx ADDED Viewed

@@ -0,0 +1,146 @@
+import type { ReactNode } from "react";
+import { Head } from "@inertiajs/react";
+import AppLayout from "../Layouts/AppLayout";
+import { ButtonLink } from "../Components/Button";
+import { Card } from "../Components/Card";
+import { Code } from "../Components/Code";
+import { ArrowRightIcon } from "../Components/Icons";
+interface Props {
+  title: string;
+}
+/** The trip this very page made, from URL to rendered React. */
+const LIFECYCLE = [
+  {
+    where: "app/routes/about.ts",
+    what: (
+      <>
+        The URL <Code>/about</Code> is this file's path. Its exported <Code>GET</Code> function runs
+        on the server.
+      </>
+    ),
+  },
+  {
+    where: 'Inertia.render("about", props)',
+    what: (
+      <>
+        Names the page component and hands it data. On a first load the server returns HTML; on
+        every visit after that, just JSON.
+      </>
+    ),
+  },
+  {
+    where: "resources/js/pages/about.tsx",
+    what: (
+      <>
+        Receives <Code>props</Code> as React props. Each page is bundled into its own chunk and
+        fetched the first time it is needed.
+      </>
+    ),
+  },
+  {
+    where: "Layouts/AppLayout.tsx",
+    what: (
+      <>
+        Wraps the page. Assigned via <Code>Page.layout</Code>, it stays mounted across visits — the
+        header never re-renders.
+      </>
+    ),
+  },
+];
+const TREE = [
+  { path: "app/routes/", note: "One file per URL. Exports GET, POST, PUT, DELETE." },
+  { path: "bootstrap/", note: "Application creation and the provider list." },
+  { path: "config/", note: "Typed config objects, read with config('app.name')." },
+  { path: "resources/js/pages/", note: "Inertia page components, one per screen." },
+  { path: "resources/js/Layouts/", note: "Persistent shells that survive navigation." },
+  { path: "resources/js/Components/", note: "Buttons, cards, fields — the shared vocabulary." },
+  { path: "resources/css/app.css", note: "Design tokens. Every colour in the app starts here." },
+  { path: "tests/", note: "Runs with the app booted via bun zt test." },
+];
+function About({ title }: Props) {
+  return (
+    <>
+      <Head title={title} />
+      <div className="mx-auto max-w-3xl">
+        <header>
+          <p className="font-mono text-xs tracking-[0.2em] text-muted-foreground uppercase">
+            The tour
+          </p>
+          <h1 className="mt-3 text-3xl font-bold tracking-tight text-balance sm:text-4xl">
+            {title}
+          </h1>
+          <p className="mt-4 text-lg leading-relaxed text-pretty text-muted-foreground">
+            One TypeScript project serves the HTML, owns the data, and renders the React. Here is
+            how the page you are reading got here.
+          </p>
+        </header>
+        <section className="mt-14">
+          <h2 className="font-semibold">From URL to rendered page</h2>
+          <ol className="mt-6 space-y-px">
+            {LIFECYCLE.map((step, index) => (
+              <li key={step.where} className="flex gap-4">
+                {/* The rail: a number, and a line joining it to the next step. */}
+                <div className="flex flex-col items-center">
+                  <span className="grid size-8 shrink-0 place-items-center rounded-full border border-border bg-card font-mono text-sm text-primary">
+                    {index + 1}
+                  </span>
+                  {index < LIFECYCLE.length - 1 ? (
+                    <span aria-hidden="true" className="w-px flex-1 bg-border" />
+                  ) : null}
+                </div>
+                <div className="pb-8">
+                  <p className="font-mono text-sm text-foreground">{step.where}</p>
+                  <p className="mt-1.5 text-sm leading-relaxed text-muted-foreground">
+                    {step.what}
+                  </p>
+                </div>
+              </li>
+            ))}
+          </ol>
+        </section>
+        <section className="mt-6">
+          <h2 className="font-semibold">Where things live</h2>
+          <Card className="mt-5 divide-y divide-border overflow-hidden">
+            {TREE.map(({ path, note }) => (
+              <div
+                key={path}
+                className="flex flex-col gap-1 px-5 py-3.5 sm:flex-row sm:items-baseline sm:gap-6"
+              >
+                <span className="shrink-0 font-mono text-sm text-primary sm:w-56">{path}</span>
+                <span className="text-sm text-muted-foreground">{note}</span>
+              </div>
+            ))}
+          </Card>
+        </section>
+        <section className="mt-14 rounded-xl border border-border bg-accent/40 p-6 sm:p-8">
+          <h2 className="font-semibold">See a form do all of it</h2>
+          <p className="mt-2 text-sm leading-relaxed text-muted-foreground">
+            The contact page posts to a route, validates on the server, and comes back with either a
+            flash message or the errors and your original input — no client-side state to reconcile.
+          </p>
+          <ButtonLink href="/contact" className="mt-5">
+            Open the contact form
+            <ArrowRightIcon className="size-4" />
+          </ButtonLink>
+        </section>
+      </div>
+    </>
+  );
+}
+(About as { layout?: (page: ReactNode) => ReactNode }).layout = (page) => (
+  <AppLayout>{page}</AppLayout>
+);
+export default About;

package/templates/react/resources/js/pages/contact.tsx ADDED Viewed

@@ -0,0 +1,152 @@
+import type { FormEvent, ReactNode } from "react";
+import { Head, useForm, usePage } from "@inertiajs/react";
+import AppLayout from "../Layouts/AppLayout";
+import { Button } from "../Components/Button";
+import { Card } from "../Components/Card";
+import { Code } from "../Components/Code";
+import { TextAreaField, TextField } from "../Components/Field";
+import { MailIcon } from "../Components/Icons";
+import type { SharedProps } from "../types";
+interface Props {
+  title: string;
+}
+/**
+ * A working form, end to end.
+ *
+ * Worth reading as a pattern rather than as content: the browser posts, the
+ * server validates, and a failure comes back as a redirect carrying `errors`
+ * and `old`. There is no client-side validation to keep in step with the
+ * server's rules, and no fetch/loading/error state to hand-roll — `useForm`
+ * exposes `processing` and reads the error bag off the page props.
+ *
+ * The matching route is app/routes/contact.ts.
+ */
+function Contact({ title }: Props) {
+  // Repopulate from the input the server flashed back after a failed validate().
+  const { old } = usePage<SharedProps>().props;
+  const { data, setData, post, processing, errors } = useForm({
+    name: typeof old["name"] === "string" ? old["name"] : "",
+    email: typeof old["email"] === "string" ? old["email"] : "",
+    message: typeof old["message"] === "string" ? old["message"] : "",
+  });
+  function submit(event: FormEvent) {
+    event.preventDefault();
+    post("/contact");
+  }
+  return (
+    <>
+      <Head title={title} />
+      <div className="mx-auto max-w-4xl">
+        <header className="max-w-2xl">
+          <p className="font-mono text-xs tracking-[0.2em] text-muted-foreground uppercase">
+            Say hello
+          </p>
+          <h1 className="mt-3 text-3xl font-bold tracking-tight text-balance sm:text-4xl">
+            {title}
+          </h1>
+          <p className="mt-4 text-lg leading-relaxed text-pretty text-muted-foreground">
+            Submit it empty, or with a malformed address, and watch the server send the errors and
+            your input straight back.
+          </p>
+        </header>
+        <div className="mt-12 grid gap-6 lg:grid-cols-5">
+          <Card className="p-6 sm:p-8 lg:col-span-3">
+            <form onSubmit={submit} className="space-y-5" noValidate>
+              <TextField
+                label="Name"
+                name="name"
+                value={data.name}
+                error={errors.name}
+                autoComplete="name"
+                placeholder="Ada Lovelace"
+                onChange={(event) => setData("name", event.target.value)}
+              />
+              <TextField
+                label="Email"
+                name="email"
+                type="email"
+                value={data.email}
+                error={errors.email}
+                autoComplete="email"
+                placeholder="ada@example.com"
+                onChange={(event) => setData("email", event.target.value)}
+              />
+              <TextAreaField
+                label="Message"
+                name="message"
+                value={data.message}
+                error={errors.message}
+                hint="At least 10 characters."
+                placeholder="What's on your mind?"
+                onChange={(event) => setData("message", event.target.value)}
+              />
+              <div className="flex items-center gap-3 pt-1">
+                <Button type="submit" disabled={processing}>
+                  {processing ? (
+                    <span
+                      aria-hidden="true"
+                      className="size-4 animate-spin rounded-full border-2 border-current border-t-transparent"
+                    />
+                  ) : null}
+                  {processing ? "Sending…" : "Send message"}
+                </Button>
+                <p className="text-sm text-muted-foreground">Nothing is stored — see the route.</p>
+              </div>
+            </form>
+          </Card>
+          <div className="space-y-6 lg:col-span-2">
+            <Card className="p-6">
+              <h2 className="font-semibold text-card-foreground">What happens on submit</h2>
+              <ol className="mt-4 space-y-3 text-sm leading-relaxed text-muted-foreground">
+                <li>
+                  <span className="font-medium text-foreground">1.</span> The POST reaches{" "}
+                  <Code>app/routes/contact.ts</Code>.
+                </li>
+                <li>
+                  <span className="font-medium text-foreground">2.</span> <Code>validate()</Code>{" "}
+                  checks the body and returns typed data.
+                </li>
+                <li>
+                  <span className="font-medium text-foreground">3.</span> If it fails, errors and
+                  input are flashed and you are redirected back.
+                </li>
+                <li>
+                  <span className="font-medium text-foreground">4.</span> If it passes, a success
+                  flash becomes the toast in the corner.
+                </li>
+              </ol>
+            </Card>
+            <Card className="p-6">
+              <h2 className="font-semibold text-card-foreground">Prefer email?</h2>
+              <a
+                href="mailto:hello@example.com"
+                className="mt-3 inline-flex items-center gap-2 text-sm font-medium text-primary transition-opacity hover:opacity-80"
+              >
+                <MailIcon className="size-4" />
+                hello@example.com
+              </a>
+            </Card>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}
+(Contact as { layout?: (page: ReactNode) => ReactNode }).layout = (page) => (
+  <AppLayout>{page}</AppLayout>
+);
+export default Contact;

package/templates/react/resources/js/pages/error.tsx ADDED Viewed

@@ -0,0 +1,91 @@
+import type { ReactNode } from "react";
+import { Head } from "@inertiajs/react";
+import AppLayout from "../Layouts/AppLayout";
+import { ButtonLink, buttonClass } from "../Components/Button";
+import { DOCS_URL } from "../lib/site";
+interface Props {
+  status: number;
+}
+/**
+ * The page behind every HTTP error the app renders to a browser.
+ *
+ * `app/exceptions/Handler.ts` picks the status and renders this component, so a
+ * missing URL lands inside the app's own shell instead of on a bare framework
+ * page. In development the framework's stack-trace page still wins for 500s —
+ * this is what production shows.
+ */
+const COPY: Record<number, { title: string; body: string }> = {
+  403: {
+    title: "Not allowed",
+    body: "You are signed in, but this page is not yours to see.",
+  },
+  404: {
+    title: "No page here",
+    body: "The URL does not match any route. Check the address, or head back to the start.",
+  },
+  419: {
+    title: "The page expired",
+    body: "Your session timed out before the form was submitted. Reload and try once more.",
+  },
+  429: {
+    title: "Too many requests",
+    body: "You have been rate limited. Give it a moment and try again.",
+  },
+  500: {
+    title: "Something broke",
+    body: "An error on our side stopped this request. It has been logged.",
+  },
+  503: {
+    title: "Down for maintenance",
+    body: "The app is briefly unavailable. It should be back shortly.",
+  },
+};
+const FALLBACK = {
+  title: "Something went wrong",
+  body: "That request could not be completed.",
+};
+function ErrorPage({ status }: Props) {
+  const { title, body } = COPY[status] ?? FALLBACK;
+  return (
+    <>
+      <Head title={`${status} — ${title}`} />
+      <section className="mx-auto max-w-lg py-10 text-center sm:py-20">
+        <p
+          aria-hidden="true"
+          className="bg-linear-to-b from-foreground to-primary bg-clip-text font-mono text-7xl font-bold text-transparent tabular-nums sm:text-8xl"
+        >
+          {status}
+        </p>
+        <h1 className="mt-6 text-2xl font-bold tracking-tight text-balance sm:text-3xl">{title}</h1>
+        <p className="mt-3 leading-relaxed text-pretty text-muted-foreground">{body}</p>
+        <div className="mt-9 flex flex-col items-center justify-center gap-3 sm:flex-row">
+          <ButtonLink href="/">Back to home</ButtonLink>
+          <a
+            href={DOCS_URL}
+            target="_blank"
+            rel="noreferrer"
+            className={buttonClass("secondary", "md")}
+          >
+            Read the docs
+          </a>
+        </div>
+      </section>
+    </>
+  );
+}
+(ErrorPage as { layout?: (page: ReactNode) => ReactNode }).layout = (page) => (
+  <AppLayout>{page}</AppLayout>
+);
+export default ErrorPage;

package/templates/react/resources/js/pages/home.tsx ADDED Viewed

@@ -0,0 +1,199 @@
+import type { ReactNode } from "react";
+import { Head } from "@inertiajs/react";
+import AppLayout from "../Layouts/AppLayout";
+import { ButtonLink, buttonClass } from "../Components/Button";
+import { Card, CardIcon } from "../Components/Card";
+import { Code, Command } from "../Components/Code";
+import {
+  ArrowRightIcon,
+  BoltIcon,
+  ClockIcon,
+  DatabaseIcon,
+  FolderIcon,
+  LayersIcon,
+  ShieldIcon,
+  TerminalIcon,
+} from "../Components/Icons";
+import { DOCS_URL } from "../lib/site";
+interface Props {
+  title: string;
+  message: string;
+}
+const docs = (page: string) => `${DOCS_URL}/blob/main/docs/${page}`;
+const FEATURES = [
+  {
+    icon: FolderIcon,
+    heading: "File-based routing",
+    body: (
+      <>
+        Every file under <Code>app/routes</Code> is a URL. Export a <Code>GET</Code> or{" "}
+        <Code>POST</Code> function and the route exists — there is no registration list to keep in
+        sync.
+      </>
+    ),
+    href: docs("routing.md"),
+  },
+  {
+    icon: LayersIcon,
+    heading: "Pages, not endpoints",
+    body: (
+      <>
+        A route returns <Code>Inertia.render(&quot;home&quot;, props)</Code> and this component
+        receives them as React props. No API layer in between to build, version or keep in step.
+      </>
+    ),
+    href: docs("inertia.md"),
+  },
+  {
+    icon: ShieldIcon,
+    heading: "Validation that comes back",
+    body: (
+      <>
+        <Code>validate()</Code> returns typed data on success. On failure it flashes the errors and
+        the submitted input and sends the user back — the form repopulates itself.
+      </>
+    ),
+    href: docs("validator.md"),
+  },
+  {
+    icon: DatabaseIcon,
+    heading: "An ORM you can read",
+    body: (
+      <>
+        Models, relationships, migrations, factories, and a query builder that still looks like the
+        query you meant to write.
+      </>
+    ),
+    href: docs("orm/index.md"),
+  },
+  {
+    icon: ClockIcon,
+    heading: "Background work, built in",
+    body: (
+      <>
+        Push a job onto a queue or put it on a schedule. Same app, same types, one{" "}
+        <Code>bun zt worker</Code> away.
+      </>
+    ),
+    href: docs("queue.md"),
+  },
+  {
+    icon: TerminalIcon,
+    heading: "A CLI that writes the boilerplate",
+    body: (
+      <>
+        <Code>make:page</Code>, <Code>make:controller</Code>, <Code>route:list</Code>,{" "}
+        <Code>repl</Code> — and <Code>make:command</Code> when you need one of your own.
+      </>
+    ),
+    href: docs("commands.md"),
+  },
+];
+const NEXT_STEPS = [
+  { command: "bun zt route:list", note: "Every route this app registers, in one table." },
+  { command: "bun zt make:page Dashboard", note: "Scaffold a page with its layout wired up." },
+  { command: "bun zt test", note: "Run the suite with the application booted." },
+];
+function Home({ title, message }: Props) {
+  return (
+    <>
+      <Head title="Home" />
+      <section className="text-center">
+        <span className="inline-flex items-center gap-2.5 rounded-full border border-border bg-card px-3.5 py-1.5 text-sm font-medium text-muted-foreground">
+          <span className="relative flex size-2">
+            <span className="absolute inline-flex size-full animate-ping rounded-full bg-success opacity-60" />
+            <span className="relative inline-flex size-2 rounded-full bg-success" />
+          </span>
+          The install worked
+        </span>
+        <h1 className="mx-auto mt-6 max-w-3xl bg-linear-to-br from-foreground via-foreground to-primary bg-clip-text text-4xl font-bold tracking-tight text-balance text-transparent sm:text-6xl">
+          {title}
+        </h1>
+        <p className="mx-auto mt-5 max-w-xl text-lg leading-relaxed text-pretty text-muted-foreground">
+          {message}
+        </p>
+        <div className="mt-9 flex flex-col items-center justify-center gap-3 sm:flex-row">
+          <ButtonLink href="/about" size="lg">
+            Take the tour
+            <ArrowRightIcon className="size-4" />
+          </ButtonLink>
+          <a
+            href={DOCS_URL}
+            target="_blank"
+            rel="noreferrer"
+            className={buttonClass("secondary", "lg")}
+          >
+            Read the docs
+          </a>
+        </div>
+        <p className="mt-8 text-sm text-muted-foreground">
+          Edit <Code>resources/js/pages/home.tsx</Code> and the page reloads itself.
+        </p>
+      </section>
+      <section className="mt-20 sm:mt-28">
+        <h2 className="text-center font-mono text-xs tracking-[0.2em] text-muted-foreground uppercase">
+          What you already have
+        </h2>
+        <div className="mt-8 grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+          {FEATURES.map(({ icon: Icon, heading, body, href }) => (
+            <Card key={heading} interactive className="group relative p-5">
+              <CardIcon className="transition-colors group-hover:border-primary/40">
+                <Icon className="size-5" />
+              </CardIcon>
+              <h3 className="mt-4 font-semibold text-card-foreground">
+                {/* The pseudo-element stretches this link over the whole card, so the
+                    entire surface is clickable while its accessible name stays the heading. */}
+                <a
+                  href={href}
+                  target="_blank"
+                  rel="noreferrer"
+                  className="after:absolute after:inset-0 after:rounded-xl"
+                >
+                  {heading}
+                </a>
+              </h3>
+              <p className="mt-2 text-sm leading-relaxed text-muted-foreground">{body}</p>
+            </Card>
+          ))}
+        </div>
+      </section>
+      <section className="mt-20 sm:mt-28">
+        <div className="flex items-center gap-2.5">
+          <BoltIcon className="size-5 text-primary" />
+          <h2 className="font-semibold">Where to go next</h2>
+        </div>
+        <div className="mt-5 grid gap-4 sm:grid-cols-3">
+          {NEXT_STEPS.map(({ command, note }) => (
+            <div key={command} className="space-y-2">
+              <Command>{command}</Command>
+              <p className="px-1 text-sm text-muted-foreground">{note}</p>
+            </div>
+          ))}
+        </div>
+      </section>
+    </>
+  );
+}
+// Inertia persistent layout — preserved across client-side navigations.
+(Home as { layout?: (page: ReactNode) => ReactNode }).layout = (page) => (
+  <AppLayout>{page}</AppLayout>
+);
+export default Home;

package/templates/react/resources/js/pages.generated.ts ADDED Viewed

@@ -0,0 +1,13 @@
+// Auto-generated by @zerotal/inertia — do not edit manually.
+// Regenerate with: bun zt inertia:build
+//
+// IMPORTANT: These are dynamic import THUNKS, not static imports.
+// Bun.build with splitting:true creates one .js chunk per page.
+// Converting to static imports will bundle ALL pages into app.js.
+export const pages: Record<string, () => Promise<{ default: unknown }>> = {
+  about: () => import("./pages/about.tsx"),
+  contact: () => import("./pages/contact.tsx"),
+  error: () => import("./pages/error.tsx"),
+  home: () => import("./pages/home.tsx"),
+};

package/templates/react/resources/js/types.ts ADDED Viewed

@@ -0,0 +1,17 @@
+/**
+ * Props `@zerotal/inertia` merges into every page, so no controller has to pass
+ * them. Type `usePage<SharedProps>()` with this to read them safely.
+ *
+ * Add your own here after registering them with `Inertia.share(...)`.
+ */
+export interface SharedProps {
+  /** The signed-in user, or null. Populated once an auth provider is registered. */
+  auth: { user: { id: number; name: string; email: string } | null };
+  /** One-request-only messages set with `http.flash("success" | "error", …)`. */
+  flash: { success: string | null; error: string | null };
+  /** Field errors from a failed `validate()` call, keyed by field name. */
+  errors: Record<string, string>;
+  /** Submitted input from a failed `validate()`, so a form can repopulate itself. */
+  old: Record<string, unknown>;
+  [key: string]: unknown;
+}