virastack 0.0.1 → 1.0.1

package/templates-i18n/tanstack/pnpm-workspace.yaml

@@ -0,0 +1,3 @@
+allowBuilds:
+  esbuild: true
+  lightningcss: true

package/templates-i18n/tanstack/project.inlang/README.md

@@ -0,0 +1,157 @@
+## What is this folder?
+
+This is an [unpacked (git-friendly)](https://inlang.com/docs/unpacked-project) inlang project.
+
+## At a glance
+
+Purpose:
+
+- This folder is the Git-friendly representation of an `.inlang` project.
+- The canonical `.inlang` format is a single binary file; this directory is the unpacked version for Git.
+- This folder stores project configuration and plugin cache data.
+- Translation files live outside this folder and are referenced from `settings.json`.
+
+Safe to edit:
+
+- `settings.json`
+
+Do not edit:
+
+- `cache/`
+- `.gitignore`
+
+Key files:
+
+- `settings.json` — locales, plugins, file patterns
+- `cache/` — plugin caches (safe to delete)
+- `.gitignore` — generated
+- `README.md` — generated, explains this folder
+- `.meta.json` — generated SDK metadata
+
+```
+*.inlang/
+├── settings.json    # Locales, plugins, and file patterns; kept in Git
+├── .gitignore       # Ignores everything except settings.json
+├── README.md        # Generated, explains this folder
+├── .meta.json       # Generated SDK metadata
+└── cache/           # Plugin caches, usually cache/plugins/
+```
+
+Translation files (like `messages/en.json`) live **outside** this folder and are referenced via plugins in `settings.json`.
+
+## What is inlang?
+
+[Inlang](https://inlang.com) is an open project file format for localization. An `.inlang` project is canonically a single binary file: a SQLite database with version control via [lix](https://lix.dev). Like `.sqlite` for relational data, `.inlang` packages localization data into one file that tools can share.
+
+For Git repositories, that binary file can be unpacked into a directory of plain files. The packed file is the canonical format; this directory is the Git-friendly representation.
+
+Use inlang when multiple tools, teams, automations, or agents need to use the same localization data. The `@inlang/sdk` is the reference implementation for reading and writing `.inlang` projects.
+
+`.inlang` is the canonical project format. Plugins import and export external translation files for compatibility with existing runtimes and workflows. Messages, variants, and locale data live in the `.inlang` database; translation files such as `messages/en.json` live outside this folder and are connected through plugins. Version control via lix adds file-level history, merging, and change proposals to `.inlang` projects.
+
+It provides:
+
+- **CRUD API** — Read and write translations programmatically via SQL
+- **Plugin system** — Import/export external translation files (JSON, XLIFF, etc.)
+- **Version control** — Version control via [lix](https://lix.dev)
+
+Core data model:
+
+- **Bundle** — one translatable unit across locales
+- **Message** — locale-specific translation for a bundle
+- **Variant** — text pattern plus selector matches
+
+```
+┌──────────┐        ┌───────────┐         ┌────────────┐
+│ i18n lib │        │Translation│         │   CI/CD    │
+│          │        │   Tool    │         │ Automation │
+└────┬─────┘        └─────┬─────┘         └─────┬──────┘
+     │                    │                     │
+     └─────────┐          │          ┌──────────┘
+               ▼          ▼          ▼
+           ┌──────────────────────────────────┐
+           │          *.inlang file           │
+           └──────────────────────────────────┘
+```
+
+## Quick start
+
+```bash
+npm install @inlang/sdk
+```
+
+```ts
+import fs from "node:fs";
+
+import { loadProjectFromDirectory, saveProjectToDirectory } from "@inlang/sdk";
+
+const project = await loadProjectFromDirectory({
+  path: "./project.inlang",
+  fs,
+});
+// Query messages with the SDK.
+const messages = await project.db.selectFrom("message").selectAll().execute();
+
+// Use project.db to update messages.
+await saveProjectToDirectory({
+  path: "./project.inlang",
+  fs,
+  project,
+});
+
+await project.close();
+```
+
+`loadProjectFromDirectory()` and `saveProjectToDirectory()` both accept `node:fs`. `saveProjectToDirectory()` writes translation files through import/export plugins. If no exporter plugin is configured, save the canonical packed file with `project.toBlob()` instead.
+
+## For coding agents and tool builders
+
+Target `.inlang` instead of inventing a custom JSON schema.
+
+Why target `.inlang`?
+
+- One file gives every tool the same data model for bundles, messages, variants, locales, metadata, and settings.
+- CRUD operations are available through the SDK instead of custom parsing and rewriting.
+- Version control via [lix](https://lix.dev) keeps localization changes reviewable and mergeable.
+- Plugins handle JSON, ICU, i18next, XLIFF, and other formats for compatibility.
+
+Do not:
+
+- Invent a custom `locales/en.json` schema as the project format.
+- Create a new localization config when a `.inlang` project already exists.
+- Edit generated or cached files in this directory.
+- Bypass `@inlang/sdk` when reading or writing `.inlang`.
+
+## Ideas for custom tooling
+
+- Translation health dashboard (missing/empty/stale messages)
+- Locale coverage report in CI
+- Auto-PR for new keys with placeholders
+- Migration tool between file formats via plugins
+- Glossary/term consistency checker
+
+## Data model ([docs](https://inlang.com/docs/data-model))
+
+```
+bundle (a concept, e.g., "welcome_header")
+  └── message (per locale, e.g., "en", "de")
+        └── variant (plural forms, gender, etc.)
+```
+
+- **bundle**: Groups messages by ID (e.g., `welcome_header`)
+- **message**: A translation for a specific locale
+- **variant**: Handles pluralization/selectors (most messages have one variant)
+
+## Common tasks
+
+- List bundles: `project.db.selectFrom("bundle").selectAll().execute()`
+- List messages for locale: `project.db.selectFrom("message").where("locale", "=", "en").selectAll().execute()`
+- Find missing translations: compare message counts across locales
+- Update a message: `project.db.updateTable("message").set({ ... }).where("id", "=", "...").execute()`
+
+## Links
+
+- [SDK documentation](https://inlang.com/docs)
+- [inlang.com](https://inlang.com)
+- [List of plugins](https://inlang.com/c/plugins)
+- [List of tools](https://inlang.com/c/tools)

package/templates-i18n/tanstack/project.inlang/settings.json

@@ -0,0 +1,9 @@
+{
+  "$schema": "https://inlang.com/schema/project-settings",
+  "sourceLanguageTag": "en",
+  "languageTags": ["en", "tr"],
+  "modules": ["https://cdn.jsdelivr.net/npm/@inlang/plugin-message-format@3/dist/index.js"],
+  "plugin.inlang.messageFormat": {
+    "pathPattern": "./messages/{languageTag}.json"
+  }
+}

package/templates-i18n/tanstack/public/llms.txt

@@ -0,0 +1,86 @@
+# ViraStack Start — TanStack Start Edition
+
+> Premium TanStack Start + React 19 + Tailwind CSS 4 boilerplate focused on clean architecture, UI/UX, and agent-ready developer experience. Auth, database/ORM, i18n, and testing are intentionally omitted — bring the solution that fits your project.
+
+Built on TanStack Router file-based routing with type-safe loaders, nested layouts, and SSR via TanStack Start. UI primitives use **Base UI** (unstyled, accessible) styled with Tailwind CSS 4 design tokens. State is split by job: TanStack Query for server state, Zustand for client state, `nuqs` for URL state. Forms use React Hook Form + Zod. The home route renders a deletable `features/landing` demo that follows the canonical ViraStack feature tree. **ViraStack AI** (`@virastack/ai`) adds agent rules on scaffold; design skills come from [emilkowalski/skills](https://github.com/emilkowalski/skills) and [make-interfaces-feel-better](https://github.com/jakubkrehel/make-interfaces-feel-better).
+
+- Tech stack: TanStack Start, TanStack Router, React 19, Tailwind CSS 4, TypeScript (strict + `noUncheckedIndexedAccess`), Node.js `>=20.9`
+- UI: Base UI, Framer Motion, Sonner, Lucide React, `next-themes`, `class-variance-authority`
+- Data & state: TanStack Query 5, Zustand, `nuqs`
+- Forms: React Hook Form + Zod (+ `@hookform/resolvers`)
+- API: Native `fetch` wrapper in `src/lib/api.ts` (`ApiError` with `message`, `status`, `data`); Axios is optional, not installed
+- Env: Hand-rolled Zod schema in `src/env.ts` (`VITE_*` public vars)
+- Tooling: ESLint 9, Prettier 3, Husky, Knip, Commitlint, Changesets, Vite 8
+- Quality scripts: `pnpm typecheck`, `pnpm lint` / `lint:ci`, `pnpm knip`, `pnpm build`
+- ViraStack AI (via `npx @virastack/ai init`): `AGENTS.md`, `CLAUDE.md`, `.cursor/rules/*.mdc`, `docs/*`
+- Not included by default: Auth, DB/ORM, i18n, test runner, CSP
+
+## Docs
+- [Repository (GitHub)](https://github.com/virastack/start): CLI and templates
+- [README](https://github.com/virastack/start/tree/main/templates/tanstack): Features, structure, and conventions
+- [Architecture guide](https://github.com/virastack/ai/blob/main/templates/core/docs/architecture-guide.md): Placement rules and import conventions
+- [Product docs](https://www.virastack.com/): ViraStack
+
+## Key Files & Entry Points
+- [`src/routes/__root.tsx`](https://github.com/virastack/start/blob/main/templates/tanstack/src/routes/__root.tsx): Root route, document shell, providers, SEO head
+- [`src/routes/index.tsx`](https://github.com/virastack/start/blob/main/templates/tanstack/src/routes/index.tsx): Home route → `<LandingPage />`
+- [`src/routes/robots[.]txt.ts`](https://github.com/virastack/start/blob/main/templates/tanstack/src/routes/robots%5B.%5Dtxt.ts): Dynamic robots.txt from `siteConfig`
+- [`src/routes/sitemap[.]xml.ts`](https://github.com/virastack/start/blob/main/templates/tanstack/src/routes/sitemap%5B.%5Dxml.ts): Dynamic sitemap from `siteConfig`
+- [`src/routes/site[.]webmanifest.ts`](https://github.com/virastack/start/blob/main/templates/tanstack/src/routes/site%5B.%5Dwebmanifest.ts): Dynamic web manifest from `siteConfig`
+- [`src/start.ts`](https://github.com/virastack/start/blob/main/templates/tanstack/src/start.ts): Global request middleware (baseline security headers)
+- [`src/router.tsx`](https://github.com/virastack/start/blob/main/templates/tanstack/src/router.tsx): Router factory + TanStack Query SSR integration
+- [`src/env.ts`](https://github.com/virastack/start/blob/main/templates/tanstack/src/env.ts): Zod-validated environment schema (`VITE_*` public vars)
+- [`src/config/site.config.ts`](https://github.com/virastack/start/blob/main/templates/tanstack/src/config/site.config.ts): Site config (name, URL, links)
+- [`src/config/seo.config.ts`](https://github.com/virastack/start/blob/main/templates/tanstack/src/config/seo.config.ts): Default SEO meta helpers
+- [`src/lib/api.ts`](https://github.com/virastack/start/blob/main/templates/tanstack/src/lib/api.ts): Native `fetch` wrapper with retry & typed `ApiError`
+- [`src/lib/query-client.ts`](https://github.com/virastack/start/blob/main/templates/tanstack/src/lib/query-client.ts): QueryClient factory & defaults
+- [`src/providers/Providers.tsx`](https://github.com/virastack/start/blob/main/templates/tanstack/src/providers/Providers.tsx): App-wide providers (Theme, Nuqs, Toaster)
+- [`vite.config.ts`](https://github.com/virastack/start/blob/main/templates/tanstack/vite.config.ts): Vite + TanStack Start + Tailwind
+
+## Landing Feature (demo — delete when building)
+Canonical tree under `src/features/landing/`. Home route composes `LandingPage`.
+
+- [`src/features/landing/index.ts`](https://github.com/virastack/start/blob/main/templates/tanstack/src/features/landing/index.ts): Public export (`LandingPage`)
+- [`src/features/landing/components/LandingPage.tsx`](https://github.com/virastack/start/blob/main/templates/tanstack/src/features/landing/components/LandingPage.tsx): Page composition (Header + sections + Footer)
+- [`src/features/landing/components/Hero.tsx`](https://github.com/virastack/start/blob/main/templates/tanstack/src/features/landing/components/Hero.tsx): Hero section
+- [`src/features/landing/components/Features.tsx`](https://github.com/virastack/start/blob/main/templates/tanstack/src/features/landing/components/Features.tsx): Feature grid
+- [`src/features/landing/components/Showcase.tsx`](https://github.com/virastack/start/blob/main/templates/tanstack/src/features/landing/components/Showcase.tsx): Stack demos host (Query, Zustand, forms, nuqs)
+- [`src/features/landing/components/UsersDemo.tsx`](https://github.com/virastack/start/blob/main/templates/tanstack/src/features/landing/components/UsersDemo.tsx): TanStack Query + `nuqs` demo
+- [`src/features/landing/components/CartDemo.tsx`](https://github.com/virastack/start/blob/main/templates/tanstack/src/features/landing/components/CartDemo.tsx): Zustand demo
+- [`src/features/landing/components/ProjectFormDemo.tsx`](https://github.com/virastack/start/blob/main/templates/tanstack/src/features/landing/components/ProjectFormDemo.tsx): RHF + Zod demo
+
+Quick start: delete `src/features/landing`, replace `src/routes/index.tsx`, keep `components/layout` if you still want chrome.
+
+## UI & Shared Layers
+- [`src/components/ui`](https://github.com/virastack/start/tree/main/templates/tanstack/src/components/ui): Base UI primitives (Button, Input, Field, Dialog, Tabs, Skeleton, Label, Avatar, Table)
+- [`src/components/layout`](https://github.com/virastack/start/tree/main/templates/tanstack/src/components/layout): Header / Footer (reusable; Header accepts optional `links`)
+- [`src/components/shared`](https://github.com/virastack/start/tree/main/templates/tanstack/src/components/shared): Cross-feature components (ThemeToggle, NotFound, DefaultCatchBoundary)
+- [`src/hooks`](https://github.com/virastack/start/tree/main/templates/tanstack/src/hooks), [`src/stores`](https://github.com/virastack/start/tree/main/templates/tanstack/src/stores), [`src/schemas`](https://github.com/virastack/start/tree/main/templates/tanstack/src/schemas): Shared barrels (promote via Rule of Three)
+- [`src/helpers`](https://github.com/virastack/start/tree/main/templates/tanstack/src/helpers): Shared helpers
+- [`src/styles/tailwind.css`](https://github.com/virastack/start/blob/main/templates/tanstack/src/styles/tailwind.css): Tailwind v4 entry + design tokens
+- Assets: [`public/logo.webp`](https://github.com/virastack/start/blob/main/templates/tanstack/public/logo.webp), [`public/og.png`](https://github.com/virastack/start/blob/main/templates/tanstack/public/og.png), [`public/favicon.ico`](https://github.com/virastack/start/blob/main/templates/tanstack/public/favicon.ico)
+
+## Customization & Imports
+- Search the project for `FIXME:` (site config, auth attachment on the API client).
+- Prefer short path aliases: `@/ui`, `@/hooks`, `@/schemas`, `@/layout` over long forms. Prefer feature-local imports under `@/features/[feature]/…` for demo-scoped code.
+- Default scope is `features/[feature]/` — promote to global `src/` only when a second feature needs it. No cross-feature imports.
+
+## ViraStack AI
+- Install or refresh: `npx @virastack/ai init --force`
+- `AGENTS.md`: Agent operating guide (all agents)
+- `CLAUDE.md`: Claude Code entry point (`@AGENTS.md`)
+- `.cursor/rules/*.mdc`: Scoped coding rules (Cursor auto-loads)
+- `docs/architecture-guide.md`, `docs/MEMORIES.md`: Architecture and project memory
+- Skills: [emilkowalski/skills](https://github.com/emilkowalski/skills) (7 design-engineering skills) + [make-interfaces-feel-better](https://github.com/jakubkrehel/make-interfaces-feel-better)
+- Package: [`@virastack/ai`](https://github.com/virastack/ai)
+
+## External References
+- [TanStack Start Docs](https://tanstack.com/start/latest): Routing, SSR, server functions
+- [TanStack Router](https://tanstack.com/router/latest): File-based routing, loaders, type safety
+- [React](https://react.dev/): Modern React APIs
+- [Tailwind CSS v4](https://tailwindcss.com/): Design tokens & utility-first styling
+- [Base UI](https://base-ui.com/): Unstyled, accessible React components
+- [TanStack Query](https://tanstack.com/query/latest): Server-state syncing & caching
+- [nuqs](https://nuqs.dev/): Type-safe URL search param state
+- [Zod](https://zod.dev/): Runtime validation and parsing
+- [ViraStack AI](https://github.com/virastack/ai): Shared agent rules package (`@virastack/ai`)

package/templates-i18n/tanstack/src/components/shared/DefaultCatchBoundary.tsx

@@ -0,0 +1,36 @@
+import type { ErrorComponentProps } from "@tanstack/react-router";
+import { Link, rootRouteId, useMatch, useRouter } from "@tanstack/react-router";
+
+import { Button } from "@/components/ui/button";
+
+export function DefaultCatchBoundary({ error }: ErrorComponentProps) {
+  const router = useRouter();
+  const isRoot = useMatch({
+    strict: false,
+    select: (state) => state.id === rootRouteId,
+  });
+
+  console.error(error);
+
+  return (
+    <div className="mx-auto flex flex-1 flex-col items-center justify-center gap-4 px-6 py-24 text-center">
+      <h1 className="text-2xl font-semibold tracking-tight">Something went wrong</h1>
+      <p className="max-w-md text-sm text-muted-foreground">
+        An unexpected error occurred while rendering this page. You can try again, or head back to
+        the homepage.
+      </p>
+      <div className="flex gap-3">
+        <Button onClick={() => router.invalidate()}>Try again</Button>
+        {isRoot ? (
+          <Button variant="outline" nativeButton={false} render={<Link to="/" />}>
+            Go home
+          </Button>
+        ) : (
+          <Button variant="outline" onClick={() => window.history.back()}>
+            Go back
+          </Button>
+        )}
+      </div>
+    </div>
+  );
+}

package/templates-i18n/tanstack/src/components/shared/LanguageSwitcher.tsx

@@ -0,0 +1,57 @@
+import { useRouter } from "@tanstack/react-router";
+
+import { getLocale, setLocale } from "@/paraglide/runtime.js";
+
+export function LanguageSwitcher() {
+  const router = useRouter();
+  const currentLang = getLocale();
+
+  const onChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
+    const nextLocale = e.target.value as "en" | "tr";
+
+    // Geçici olarak as-needed kapatıldı. Her dil için prefix eklenecek.
+    // Issue çözüldüğünde eski localizeUrl mantığına dönülebilir.
+    const url = new URL(window.location.href);
+    const pathSegments = url.pathname.split("/").filter(Boolean);
+
+    if (pathSegments.length > 0 && (pathSegments[0] === "en" || pathSegments[0] === "tr")) {
+      pathSegments[0] = nextLocale;
+    } else {
+      pathSegments.unshift(nextLocale);
+    }
+
+    const newPath = "/" + pathSegments.join("/");
+
+    setLocale(nextLocale, { reload: false });
+    void router.navigate({
+      to: `${newPath}${url.search}${url.hash}`,
+      replace: true,
+    });
+  };
+
+  return (
+    <div className="relative">
+      <select
+        value={currentLang}
+        onChange={onChange}
+        className="h-10 cursor-pointer appearance-none rounded-md border border-input bg-background pr-8 pl-3 text-sm text-foreground focus:border-primary focus:ring-1 focus:ring-primary focus:outline-none disabled:opacity-50"
+      >
+        <option value="en">EN</option>
+        <option value="tr">TR</option>
+      </select>
+      <div className="pointer-events-none absolute top-[11px] right-2.5 h-4 w-4 text-muted-foreground">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        >
+          <path d="m6 9 6 6 6-6" />
+        </svg>
+      </div>
+    </div>
+  );
+}

package/templates-i18n/tanstack/src/components/shared/NotFound.tsx

@@ -0,0 +1,18 @@
+import { Link } from "@tanstack/react-router";
+
+import { Button } from "@/components/ui/button";
+
+export function NotFound() {
+  return (
+    <div className="mx-auto flex flex-1 flex-col items-center justify-center gap-4 px-6 py-24 text-center">
+      <p className="text-sm font-medium text-muted-foreground">404</p>
+      <h1 className="text-2xl font-semibold tracking-tight">Page not found</h1>
+      <p className="max-w-md text-sm text-muted-foreground">
+        The page you&apos;re looking for doesn&apos;t exist or has been moved.
+      </p>
+      <Button nativeButton={false} render={<Link to="/" />}>
+        Go home
+      </Button>
+    </div>
+  );
+}

package/templates-i18n/tanstack/src/components/shared/Pending.tsx

@@ -0,0 +1,13 @@
+import { Skeleton } from "@/components/ui/skeleton";
+
+/** Route-level pending UI (TanStack equivalent of Next.js `loading.tsx`). */
+export function Pending() {
+  return (
+    <div className="mx-auto flex w-full max-w-3xl flex-1 flex-col items-center gap-4 px-6 py-24">
+      <Skeleton className="h-10 w-2/3" />
+      <Skeleton className="h-4 w-full" />
+      <Skeleton className="h-4 w-5/6" />
+      <Skeleton className="mt-6 h-40 w-full" />
+    </div>
+  );
+}

package/templates-i18n/tanstack/src/components/shared/ThemeToggle.tsx

@@ -0,0 +1,31 @@
+"use client";
+
+import { MoonIcon, SunIcon } from "lucide-react";
+import { useIsClient } from "usehooks-ts";
+
+import { useTheme } from "@/providers/ThemeProvider";
+
+import { Button } from "@/components/ui/button";
+
+export function ThemeToggle() {
+  const { resolvedTheme, setTheme } = useTheme();
+  const isClient = useIsClient();
+
+  if (!isClient) {
+    return <Button variant="outline" size="icon" aria-hidden className="size-8 opacity-0" />;
+  }
+
+  const isDark = resolvedTheme === "dark";
+
+  return (
+    <Button
+      variant="outline"
+      size="icon"
+      className="size-8"
+      aria-label={isDark ? "Switch to light theme" : "Switch to dark theme"}
+      onClick={() => setTheme(isDark ? "light" : "dark")}
+    >
+      {isDark ? <SunIcon className="size-3.5" /> : <MoonIcon className="size-3.5" />}
+    </Button>
+  );
+}

package/templates-i18n/tanstack/src/components/ui/avatar.tsx

@@ -0,0 +1,52 @@
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+const Avatar = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn("relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full", className)}
+      {...props}
+    />
+  ),
+);
+Avatar.displayName = "Avatar";
+
+const AvatarImage = React.forwardRef<
+  HTMLImageElement,
+  React.ImgHTMLAttributes<HTMLImageElement> & {
+    onLoadingStatusChange?: (status: "loading" | "loaded" | "error") => void;
+  }
+>(({ className, src, alt = "", ...props }, ref) => {
+  const [status, setStatus] = React.useState<"loading" | "loaded" | "error">("loading");
+
+  return (
+    <img
+      ref={ref}
+      src={src}
+      alt={alt}
+      className={cn("aspect-square h-full w-full", status !== "loaded" && "hidden", className)}
+      onLoad={() => setStatus("loaded")}
+      onError={() => setStatus("error")}
+      {...props}
+    />
+  );
+});
+AvatarImage.displayName = "AvatarImage";
+
+const AvatarFallback = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn(
+        "flex h-full w-full items-center justify-center rounded-full bg-muted text-xs",
+        className,
+      )}
+      {...props}
+    />
+  ),
+);
+AvatarFallback.displayName = "AvatarFallback";
+
+export { Avatar, AvatarImage, AvatarFallback };

package/templates-i18n/tanstack/src/components/ui/button.tsx

@@ -0,0 +1,47 @@
+import type { ComponentProps } from "react";
+
+import { Button as BaseButton } from "@base-ui/react/button";
+import { cva } from "class-variance-authority";
+import type { VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+
+export const buttonVariants = cva(
+  "inline-flex shrink-0 items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-all outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20",
+        outline:
+          "border border-input bg-background shadow-xs hover:bg-accent hover:text-accent-foreground",
+        secondary: "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        sm: "h-8 gap-1.5 rounded-md px-3 has-[>svg]:px-2.5",
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        icon: "size-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+);
+
+export type ButtonProps = ComponentProps<typeof BaseButton> & VariantProps<typeof buttonVariants>;
+
+export function Button({ className, variant, size, ...props }: ButtonProps) {
+  return (
+    <BaseButton
+      data-slot="button"
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  );
+}

package/templates-i18n/tanstack/src/components/ui/dialog.tsx

@@ -0,0 +1,107 @@
+import type { ComponentProps } from "react";
+
+import { XIcon } from "lucide-react";
+import { Dialog as BaseDialog } from "@base-ui/react/dialog";
+
+import { cn } from "@/lib/utils";
+
+export function Dialog(props: ComponentProps<typeof BaseDialog.Root>) {
+  return <BaseDialog.Root data-slot="dialog" {...props} />;
+}
+
+export function DialogTrigger(props: ComponentProps<typeof BaseDialog.Trigger>) {
+  return <BaseDialog.Trigger data-slot="dialog-trigger" {...props} />;
+}
+
+export function DialogClose(props: ComponentProps<typeof BaseDialog.Close>) {
+  return <BaseDialog.Close data-slot="dialog-close" {...props} />;
+}
+
+export function DialogContent({
+  className,
+  children,
+  showCloseButton = true,
+  ...props
+}: ComponentProps<typeof BaseDialog.Popup> & { showCloseButton?: boolean }) {
+  return (
+    <BaseDialog.Portal>
+      <BaseDialog.Backdrop
+        data-slot="dialog-backdrop"
+        className={cn(
+          "fixed inset-0 z-50 bg-black/50",
+          "data-[ending-style]:opacity-0 data-[starting-style]:opacity-0",
+          "transition-opacity duration-150",
+        )}
+      />
+      <BaseDialog.Popup
+        data-slot="dialog-content"
+        className={cn(
+          "fixed top-1/2 left-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4",
+          "rounded-lg border border-border bg-background p-6 shadow-lg",
+          "data-[starting-style]:scale-95 data-[starting-style]:opacity-0",
+          "data-[ending-style]:scale-95 data-[ending-style]:opacity-0",
+          "transition-all duration-150",
+          className,
+        )}
+        {...props}
+      >
+        {children}
+        {showCloseButton && (
+          <BaseDialog.Close
+            data-slot="dialog-close"
+            className={cn(
+              "absolute top-4 right-4 rounded-xs opacity-70 transition-opacity outline-none",
+              "hover:opacity-100 focus-visible:ring-[3px] focus-visible:ring-ring/50",
+            )}
+          >
+            <XIcon className="size-4" />
+            <span className="sr-only">Close</span>
+          </BaseDialog.Close>
+        )}
+      </BaseDialog.Popup>
+    </BaseDialog.Portal>
+  );
+}
+
+export function DialogHeader({ className, ...props }: ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="dialog-header"
+      className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
+      {...props}
+    />
+  );
+}
+
+export function DialogFooter({ className, ...props }: ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="dialog-footer"
+      className={cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className)}
+      {...props}
+    />
+  );
+}
+
+export function DialogTitle({ className, ...props }: ComponentProps<typeof BaseDialog.Title>) {
+  return (
+    <BaseDialog.Title
+      data-slot="dialog-title"
+      className={cn("text-lg leading-none font-semibold", className)}
+      {...props}
+    />
+  );
+}
+
+export function DialogDescription({
+  className,
+  ...props
+}: ComponentProps<typeof BaseDialog.Description>) {
+  return (
+    <BaseDialog.Description
+      data-slot="dialog-description"
+      className={cn("text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  );
+}