@intelligo-dev/cli 1.0.0-beta.1 → 1.0.0-beta.14

package/templates/app-scaffold/i18n-request.ts.tpl

@@ -3,8 +3,32 @@ import path from "node:path";
 
 import { getRequestConfig } from "next-intl/server";
 
+import {
+  getRequestHeaders,
+  resolveTimeZone,
+} from "@intelligo-dev/core/request-context";
+
 import { routing } from "./routing";
 
+/**
+ * The reader's own time zone, from the cookie the app shell writes.
+ *
+ * Every date and time on the page formats against this, so a reader in
+ * +08:00 sees the day they actually had rather than UTC's. Anything the
+ * runtime does not recognise — and a first request, which has no cookie
+ * yet — falls back to UTC.
+ */
+async function requestTimeZone(): Promise<string> {
+  try {
+    const cookie = (await getRequestHeaders()).get("cookie") ?? "";
+    const match = cookie.match(/(?:^|;\s*)tz=([^;]*)/);
+    return resolveTimeZone(match?.[1] ? decodeURIComponent(match[1]) : null);
+  } catch {
+    // No request context bound (a build-time render, a script).
+    return "UTC";
+  }
+}
+
 const MESSAGES_ROOT = path.join(process.cwd(), "messages");
 
 /**
@@ -47,5 +71,6 @@ export default getRequestConfig(async ({ requestLocale }) => {
   return {
     locale,
     messages: loadMessages(locale),
+    timeZone: await requestTimeZone(),
   };
 });

package/templates/app-scaffold/instrumentation.ts.tpl

@@ -0,0 +1,21 @@
+/**
+ * Next.js runs `register()` once per server process, before the first
+ * request. Composing here is what lets a page, a Server Action or a
+ * Route Handler read a registry — plans, model prices, the request
+ * context source — without each of them remembering to compose first.
+ * The registries live on `globalThis`, so a bundle that duplicates
+ * `lib/intelligo` still sees what this bound.
+ *
+ * Route Handlers keep their own `composeIntelligo()` call as well: it is
+ * idempotent, and a handler invoked from a test or a worker has no
+ * instrumentation hook to rely on.
+ */
+export async function register() {
+  if (process.env.NEXT_RUNTIME === "nodejs") {
+    const { composeIntelligo, seedIntelligo } = await import("./lib/intelligo");
+    composeIntelligo();
+    // The first request finds the plan and billing-settings rows in
+    // place. A failure is already logged, and the next request retries.
+    await seedIntelligo().catch(() => undefined);
+  }
+}

package/templates/app-scaffold/intelligo.ts.tpl

@@ -1,7 +1,7 @@
 import "server-only";
 
 /**
- * Your composition root (ADR-0005).
+ * Your composition root.
  *
  * This file is yours — Intelligo generated it once and will not
  * overwrite it. It is the single place the application wires itself
@@ -14,18 +14,29 @@ import "server-only";
  */
 
 import {
-  checkQuota,
-  recordTokenUsage,
-  releaseReservation,
+  createBillingExecutions,
+  ensureBillingSettingsRow,
+  ensurePlanRows,
 } from "@intelligo-dev/billing";
+import { DEFAULT_MARGIN_BP } from "@intelligo-dev/executions/pricing";
 import {
   registerProductFeatures,
   registerProductPlans,
+  registerTeamMemberLimits,
   setDefaultProductSlug,
 } from "@intelligo-dev/billing/plans";
-import { createExecutions } from "@intelligo-dev/executions";
+import { setWorkspaceCreatedHandler } from "@intelligo-dev/auth";
+import { assertEnv } from "@intelligo-dev/core/env";
+import { setRequestContextSource } from "@intelligo-dev/core/request-context";
+import {
+  DEFAULT_MODELS,
+  registerModels,
+} from "@intelligo-dev/executions";
+import { nextRequestContext } from "@intelligo-dev/next";
+import { createLogger } from "@intelligo-dev/core/logger";
 
-import { PLANS, FEATURES } from "./plans";
+import { FEATURES, PLANS, TEAM_MEMBER_LIMITS } from "./plans";
+import { onWorkspaceCreated } from "./workspace-bootstrap";
 
 /** Identifies your product to the billing engine. */
 export const PRODUCT_SLUG = "__APP_SLUG__";
@@ -38,47 +49,90 @@ export const CAPABILITIES = {
   assistantMessage: "assistant.message",
 } as const;
 
+const log = createLogger("Intelligo");
+
 let composed = false;
 
 export function composeIntelligo(): void {
-  if (composed) return;
-  composed = true;
+  if (!composed) {
+    composed = true;
+    bind();
+  }
+  // Every call checks the seed, so a database that was unreachable at
+  // boot is seeded by the first request after it comes back.
+  seedIntelligo().catch((error: unknown) => {
+    log.error("Seeding the plan and billing-settings rows failed", {
+      error,
+    });
+  });
+}
+
+let seeding: Promise<void> | undefined;
+
+/**
+ * Writes the rows the registrations imply, and resolves once they
+ * exist. Both writes are idempotent upserts, so processes that boot
+ * together are safe; callers share one promise, and a failure clears
+ * it so the next call tries again.
+ */
+export function seedIntelligo(): Promise<void> {
+  seeding ??= Promise.all([
+    // The plans table is a copy of the catalogue: a subscription row
+    // references its plan there, so the rows exist before the first
+    // checkout rather than being seeded by a migration.
+    ensurePlanRows(),
+
+    // What you bill in. Provider prices are USD, so a USD deployment
+    // converts at exactly 1.0; selling in another currency means stating
+    // its rate per USD here, in micros. There is no default rate — a
+    // framework that guesses one is inventing money. The row is seeded once;
+    // an existing row is left alone, because changing the currency under
+    // a ledger that holds balances is your decision, not a deploy's.
+    ensureBillingSettingsRow({
+      currency: "USD",
+      usdRateMicros: 1_000_000,
+      marginBp: DEFAULT_MARGIN_BP,
+    }),
+  ]).then(
+    () => undefined,
+    (error: unknown) => {
+      seeding = undefined;
+      throw error;
+    }
+  );
+  return seeding;
+}
+
+function bind(): void {
+  // Fail on the first request rather than on the first query: a
+  // missing DATABASE_URL or auth secret is a configuration error, not
+  // something to discover deep inside a handler.
+  assertEnv();
+
+  // Where the framework reads the incoming request's headers from.
+  // Only this line knows the app is a Next.js one; `@intelligo-dev/auth`
+  // asks `@intelligo-dev/core/request-context` and stays usable from a
+  // worker or a test.
+  setRequestContextSource(nextRequestContext);
+
+  // What a new user's personal workspace starts with.
+  setWorkspaceCreatedHandler(onWorkspaceCreated);
 
   setDefaultProductSlug(PRODUCT_SLUG);
   registerProductPlans(PRODUCT_SLUG, PLANS);
   registerProductFeatures(PRODUCT_SLUG, FEATURES);
-}
+  registerTeamMemberLimits(PRODUCT_SLUG, TEAM_MEMBER_LIMITS);
 
-export const executions = createExecutions({
-  async checkEntitlement({ workspaceId, requestId, model }) {
-    // Passing requestId makes admission atomic: the worst-case cost is
-    // reserved in the same transaction that reads the balance, so
-    // concurrent requests cannot all pass.
-    const quota = await checkQuota(workspaceId, { modelId: model, requestId });
-    return {
-      allowed: quota.allowed,
-      reason: quota.reason,
-      estimatedMnt: quota.estimatedMnt,
-      usingTrialCredits: quota.usingTrialCredits,
-    };
-  },
-
-  async settleUsage(s) {
-    await recordTokenUsage({
-      workspaceId: s.workspaceId,
-      userId: s.userId ?? "",
-      model: s.model ?? "unknown",
-      agent: s.capability,
-      inputTokens: s.inputTokens,
-      outputTokens: s.outputTokens,
-      totalTokens: s.totalTokens,
-      usingTrialCredits: s.usingTrialCredits,
-      requestId: s.requestId,
-      metadata: s.metadata,
-    });
-  },
+  // What each model costs. The framework ships a catalogue as data and
+  // registers none of it: an id with no registered price throws where
+  // the price is needed, rather than being guessed. Swap in your own
+  // contracted rates, or add a model the framework has never heard of,
+  // by passing your own array here.
+  registerModels(DEFAULT_MODELS);
+}
 
-  async releaseHold({ requestId }) {
-    await releaseReservation(requestId);
-  },
-});
+// The execution boundary, bound to the billing engine: admission
+// reserves the worst-case cost atomically, settlement records usage and
+// deducts credits, reconcile() can tell a committed charge from none.
+// Pass a port to replace one.
+export const executions = createBillingExecutions();

package/templates/app-scaffold/layout.tsx.tpl

@@ -1,5 +1,6 @@
 import type { ReactNode } from "react";
 
+import { Geist, Geist_Mono } from "next/font/google";
 import { notFound } from "next/navigation";
 import { NextIntlClientProvider } from "next-intl";
 import { getMessages, getTranslations } from "next-intl/server";
@@ -10,6 +11,18 @@ import { ThemeProvider } from "@/components/shell/theme-provider";
 import { Toaster } from "@/components/ui/sonner";
 import { routing } from "@/i18n/routing";
 
+// The theme names "Geist" in `--font-sans`; loading it here registers the
+// faces under that family (and exposes the variables for a product's own
+// use). Without it every surface falls back to the system face.
+const geistSans = Geist({
+  subsets: ["latin", "latin-ext", "cyrillic"],
+  variable: "--font-geist-sans",
+});
+const geistMono = Geist_Mono({
+  subsets: ["latin", "latin-ext", "cyrillic"],
+  variable: "--font-geist-mono",
+});
+
 type Props = {
   children: ReactNode;
   params: Promise<{ locale: string }>;
@@ -39,7 +52,11 @@ export default async function RootLayout({ children, params }: Props) {
   return (
     // suppressHydrationWarning: next-themes sets the class attribute on
     // <html> before hydration (see components/shell/theme-provider.tsx).
-    <html lang={locale} suppressHydrationWarning>
+    <html
+      lang={locale}
+      className={`${geistSans.variable} ${geistMono.variable}`}
+      suppressHydrationWarning
+    >
       <body>
         <ThemeProvider>
           <NextIntlClientProvider messages={messages}>

package/templates/app-scaffold/lib-utils.ts.tpl

@@ -1,6 +1 @@
-import { type ClassValue, clsx } from "clsx";
-import { twMerge } from "tailwind-merge";
-
-export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs));
-}
+export { cn } from "cn";

package/templates/app-scaffold/next.config.mjs.tpl

@@ -11,8 +11,10 @@ const nextConfig = {
     "@intelligo-dev/audit",
     "@intelligo-dev/auth",
     "@intelligo-dev/billing",
+    "@intelligo-dev/chat",
     "@intelligo-dev/core",
     "@intelligo-dev/executions",
+    "@intelligo-dev/next",
   ],
 };
 

package/templates/app-scaffold/package.json.tpl

@@ -7,36 +7,50 @@
     "dev": "next dev --turbopack --port 3000",
     "build": "next build",
     "start": "next start --port 3000",
-    "type-check": "tsc --noEmit"
+    "type-check": "tsc --noEmit",
+    "db:generate": "drizzle-kit generate",
+    "db:migrate": "intelligo migrate && drizzle-kit migrate",
+    "db:check": "intelligo migrate --check"
   },
   "dependencies": {
+    "@base-ui/react": "^1.8.0",
     "@intelligo-dev/admin": "__INTELLIGO_DEP__",
     "@intelligo-dev/audit": "__INTELLIGO_DEP__",
     "@intelligo-dev/auth": "__INTELLIGO_DEP__",
     "@intelligo-dev/billing": "__INTELLIGO_DEP__",
+    "@intelligo-dev/chat": "__INTELLIGO_DEP__",
     "@intelligo-dev/core": "__INTELLIGO_DEP__",
     "@intelligo-dev/executions": "__INTELLIGO_DEP__",
-    "@intelligo-dev/ui": "__INTELLIGO_DEP__",
-    "@radix-ui/react-slot": "^1.2.4",
+    "@intelligo-dev/jobs": "__INTELLIGO_DEP__",
+    "@intelligo-dev/next": "__INTELLIGO_DEP__",
+    "ai": "^7.0.103",
+    "better-auth": "~1.6.33",
     "class-variance-authority": "^0.7.1",
-    "clsx": "^2.1.1",
-    "lucide-react": "^0.563.0",
-    "next": "^16.2.3",
-    "next-intl": "^4.9.2",
+    "cn": "^0.3.0",
+    "drizzle-orm": "^0.45.2",
+    "lucide-react": "^1.46.0",
+    "next": "~16.3.5",
+    "next-intl": "^4.14.5",
     "next-themes": "^0.4.6",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
+    "react": "^19.3.0",
+    "react-dom": "^19.3.0",
     "server-only": "^0.0.1",
-    "sonner": "^2.0.7",
-    "tailwind-merge": "^3.4.0"
+    "sonner": "^2.0.8",
+    "stripe": "^22.6.2",
+    "zod": "^4.6.5"
   },
   "devDependencies": {
-    "@tailwindcss/postcss": "^4",
-    "@types/node": "^22.0.0",
-    "@types/react": "^19.0.0",
-    "@types/react-dom": "^19.0.0",
-    "tailwindcss": "^4",
+    "@intelligo-dev/cli": "__INTELLIGO_DEP__",
+    "@tailwindcss/postcss": "^4.3.3",
+    "@types/node": "^22.20.3",
+    "@types/react": "^19.3.0",
+    "@types/react-dom": "^19.3.0",
+    "dotenv": "^17.4.2",
+    "drizzle-kit": "^0.31.10",
+    "pg": "8.18.0",
+    "shadcn": "^4.21.0",
+    "tailwindcss": "^4.3.3",
     "tw-animate-css": "^1.4.0",
-    "typescript": "^5.7.2"
+    "typescript": "^5.9.3"
   }
 }

package/templates/app-scaffold/page.tsx.tpl

@@ -0,0 +1,16 @@
+import { getAuthSession } from "@intelligo-dev/auth";
+import { getLocale } from "next-intl/server";
+
+import { redirect } from "@/i18n/navigation";
+
+/**
+ * The root URL — a session decides where you land: the dashboard when
+ * signed in (the `dashboard` registry item), the login page otherwise
+ * (`auth-login`). Replace it with a landing page of your own whenever
+ * you like; it is yours.
+ */
+export default async function Home() {
+  const locale = await getLocale();
+  const session = await getAuthSession();
+  redirect({ href: session ? "/dashboard" : "/login", locale });
+}

package/templates/app-scaffold/plans.ts.tpl

@@ -1,13 +1,14 @@
 /**
  * Your plans and feature gates.
  *
- * This file is yours. Intelligo's billing engine knows only the shape;
- * the names, prices, and limits are entirely your product's, and it
- * reads them through the registry your composition root populates
- * (ADR-0006). Two limit keys are special because the credit engine
- * reads them directly: `monthlyCreditMnt` and `rolloverEnabled`.
+ * The billing engine knows only the shape; the names, prices, and
+ * limits are yours, read through the registry your composition root
+ * populates. `monthlyAllowance` is what the credit engine enforces: an
+ * amount with its currency, which must be the one your composition root
+ * declares to `ensureBillingSettingsRow`.
  */
 
+import { fromMajor } from "@intelligo-dev/core/money";
 import type { PlanConfig } from "@intelligo-dev/billing/plans";
 
 export const PLANS: Record<string, PlanConfig> = {
@@ -15,29 +16,47 @@ export const PLANS: Record<string, PlanConfig> = {
     name: "Free",
     slug: "free",
     description: "Get started",
-    descriptionMn: "",
     priceOneTime: 0,
     targetAudience: "Everyone",
     aiModelLabel: "Base",
-    limits: { monthlyCreditMnt: 2_000, rolloverEnabled: false },
+    /** Half a dollar of model time a month — roughly a hundred cheap turns. */
+    monthlyAllowance: fromMajor(0.5, "USD"),
+    limits: {},
     features: [],
-    featuresMn: [],
   },
   pro: {
     name: "Pro",
     slug: "pro",
     description: "For daily use",
-    descriptionMn: "",
-    priceOneTime: 20_000,
+    priceOneTime: 20,
     targetAudience: "Teams",
     aiModelLabel: "Advanced",
-    limits: { monthlyCreditMnt: 60_000, rolloverEnabled: true },
+    /** $15 of model time inside a $20 plan. */
+    monthlyAllowance: fromMajor(15, "USD"),
+    limits: {},
     features: [],
-    featuresMn: [],
   },
 };
 
-/** Which plans grant which feature. An unregistered feature is denied. */
+/**
+ * Which plans grant which feature. An unregistered feature is denied —
+ * a registry item whose `featureKey` is missing here returns 403 on
+ * every request, so add the key when you install the item.
+ */
 export const FEATURES: Record<string, readonly string[]> = {
   assistant: ["free", "pro"],
+  // POST /api/chat (the `chat` registry item). Every plan, so a clean
+  // install can chat with no configuration; tighten to ["pro"] to put
+  // chat behind a paywall.
+  chat: ["free", "pro"],
+};
+
+/**
+ * Seats per plan: how many members a workspace on each plan may hold,
+ * the owner included. -1 is unlimited. A plan left out gets one seat,
+ * which refuses every invitation.
+ */
+export const TEAM_MEMBER_LIMITS: Record<string, number> = {
+  free: 3,
+  pro: 25,
 };

package/templates/app-scaffold/{middleware.ts.tpl → proxy.ts.tpl}

@@ -1,3 +1,9 @@
+/**
+ * Next 16 names this file `proxy.ts` (`middleware.ts` still resolves).
+ *
+ * Optimistic only: it redirects, and never touches the database. Every
+ * real check is server-side.
+ */
 import createIntlMiddleware from "next-intl/middleware";
 
 import { routing } from "./i18n/routing";

package/templates/app-scaffold/sonner.tsx.tpl

@@ -1,25 +1,24 @@
 "use client";
 
-/**
- * Toast host (shadcn's sonner wrapper) — mounted once by
- * `app/[locale]/layout.tsx`. Registry items call `toast(...)` from the
- * `sonner` package and rely on this being mounted; without it their
- * toasts silently never render.
- *
- * This is the stock shadcn `sonner` component; `pnpm dlx shadcn add
- * sonner` would produce the same file at the same path.
- */
-
+import { useTheme } from "next-themes";
+import { Toaster as Sonner, type ToasterProps } from "sonner";
 import {
   CircleCheckIcon,
   InfoIcon,
-  Loader2Icon,
-  OctagonXIcon,
   TriangleAlertIcon,
+  OctagonXIcon,
+  Loader2Icon,
+  XIcon,
 } from "lucide-react";
-import { useTheme } from "next-themes";
-import { Toaster as Sonner, type ToasterProps } from "sonner";
 
+/*
+ * Sonner, drawn as a stack of rounded cards: each toast behind the front
+ * one peeks out a little lower and a little smaller, the status sits in a
+ * tinted round chip, and every move settles on a long ease-out that reads
+ * as a spring. Toasts are unstyled so the classes below own the surface;
+ * Sonner still owns stacking, swipe and timing, and its own
+ * prefers-reduced-motion rule still turns the motion off.
+ */
 const Toaster = ({ ...props }: ToasterProps) => {
   const { theme = "system" } = useTheme();
 
@@ -27,21 +26,44 @@ const Toaster = ({ ...props }: ToasterProps) => {
     <Sonner
       theme={theme as ToasterProps["theme"]}
       className="toaster group"
+      gap={10}
       icons={{
-        success: <CircleCheckIcon className="size-4" />,
-        info: <InfoIcon className="size-4" />,
-        warning: <TriangleAlertIcon className="size-4" />,
-        error: <OctagonXIcon className="size-4" />,
-        loading: <Loader2Icon className="size-4 animate-spin" />,
+        success: <CircleCheckIcon className="size-4 text-success" />,
+        info: <InfoIcon className="size-4 text-info" />,
+        warning: <TriangleAlertIcon className="size-4 text-warning" />,
+        error: <OctagonXIcon className="size-4 text-destructive" />,
+        loading: <Loader2Icon className="size-4 animate-spin text-muted-foreground" />,
+        close: <XIcon className="size-3.5" />,
       }}
       style={
         {
           "--normal-bg": "var(--popover)",
           "--normal-text": "var(--popover-foreground)",
           "--normal-border": "var(--border)",
-          "--border-radius": "var(--radius)",
+          "--border-radius": "var(--radius-2xl)",
         } as React.CSSProperties
       }
+      toastOptions={{
+        unstyled: true,
+        style: {
+          transitionDuration: "450ms",
+          transitionTimingFunction: "cubic-bezier(0.16, 1, 0.3, 1)",
+        },
+        classNames: {
+          toast:
+            "cn-toast group/toast flex w-(--width) items-center gap-3 rounded-2xl border border-border bg-popover/95 p-3 font-sans text-popover-foreground shadow-2xl backdrop-blur-xl outline-none focus-visible:ring-2 focus-visible:ring-ring has-[[data-description]]:items-start data-[expanded=false]:data-[front=false]:*:opacity-0",
+          icon: "relative grid size-7 shrink-0 place-items-center rounded-full bg-muted text-muted-foreground group-data-[type=success]/toast:bg-success/10 group-data-[type=info]/toast:bg-info/10 group-data-[type=warning]/toast:bg-warning/10 group-data-[type=error]/toast:bg-destructive/10",
+          content: "flex min-w-0 flex-1 flex-col gap-0.5",
+          title: "text-sm leading-5 font-medium text-popover-foreground",
+          description: "line-clamp-2 text-xs leading-4 text-muted-foreground",
+          actionButton:
+            "inline-flex h-7 shrink-0 items-center rounded-full bg-primary px-3 text-xs font-medium text-primary-foreground transition-colors hover:bg-primary/88 focus-visible:ring-2 focus-visible:ring-ring outline-none",
+          cancelButton:
+            "inline-flex h-7 shrink-0 items-center rounded-full bg-muted px-3 text-xs font-medium text-foreground transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 focus-visible:ring-ring outline-none",
+          closeButton:
+            "order-last grid size-7 shrink-0 place-items-center rounded-full text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 focus-visible:ring-ring outline-none",
+        },
+      }}
       {...props}
     />
   );

package/templates/app-scaffold/stripe-webhook-route.ts.tpl

@@ -0,0 +1,24 @@
+/**
+ * Stripe webhook endpoint.
+ *
+ * Point Stripe at POST /api/webhooks/stripe and set
+ * STRIPE_WEBHOOK_SECRET. The handler verifies the signature, records
+ * every event in `finance_events` before processing it, runs the
+ * built-in handlers (checkout completed, invoice paid / failed,
+ * subscription updated / deleted), and answers 500 on a handler error
+ * so Stripe retries — see `createStripeWebhookHandler` in
+ * `@intelligo-dev/billing` for the exact contract.
+ *
+ * Pass `onEvent` to react to event types the framework does not.
+ */
+
+import { createStripeWebhookHandler } from "@intelligo-dev/billing";
+
+import { composeIntelligo } from "@/lib/intelligo";
+
+const handler = createStripeWebhookHandler();
+
+export async function POST(request: Request) {
+  composeIntelligo();
+  return handler(request);
+}

package/templates/app-scaffold/theme-provider.tsx.tpl

@@ -4,10 +4,12 @@
  * Theme provider — mounted by `app/[locale]/layout.tsx` so any theme
  * switcher (e.g. the app-shell item's user menu) actually works.
  *
- * The same file ships with the `app-shell` registry item at the same
- * path; installing app-shell simply overwrites this copy with an
- * identical one. Defaults: class-attribute strategy (Tailwind's `.dark`
- * tokens), system preference honored, no transition flash on switch.
+ * The `app-shell` registry item ships its own provider at this same
+ * path; installing app-shell (with --overwrite) replaces this starter
+ * copy, and the manifest will report the file as customized from then
+ * on — that is expected. Defaults: class-attribute strategy (Tailwind's
+ * `.dark` tokens), system preference honored, no transition flash on
+ * switch.
  */
 
 import { ThemeProvider as NextThemesProvider } from "next-themes";

package/templates/app-scaffold/tsconfig.json.tpl

@@ -1,12 +1,28 @@
 {
-  "extends": "../../tsconfig.base.json",
   "compilerOptions": {
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "target": "ES2020",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "incremental": true,
+    "noUncheckedIndexedAccess": true,
+    "forceConsistentCasingInFileNames": true,
     "lib": ["dom", "dom.iterable", "esnext"],
-    "jsx": "preserve",
+    "jsx": "react-jsx",
     "noEmit": true,
     "plugins": [{ "name": "next" }],
-    "paths": { "@/*": ["./*"] }
+    "paths": { "@/*": ["./*"] },
+    "allowJs": true
   },
-  "include": ["**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "include": [
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    ".next/dev/types/**/*.ts"
+  ],
   "exclude": ["node_modules", ".next"]
 }

package/templates/app-scaffold/use-mobile.ts.tpl

@@ -0,0 +1,19 @@
+import * as React from "react"
+
+const MOBILE_BREAKPOINT = 768
+
+export function useIsMobile() {
+  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)
+
+  React.useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
+    const onChange = () => {
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    }
+    mql.addEventListener("change", onChange)
+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    return () => mql.removeEventListener("change", onChange)
+  }, [])
+
+  return !!isMobile
+}