create-strayl-web-app 1.0.0

package/dist/index.js

@@ -0,0 +1,59 @@
+#!/usr/bin/env node
+
+
+// src/index.ts
+import { Command } from "commander";
+import pc from "picocolors";
+import { cpSync, existsSync, readFileSync, writeFileSync } from "fs";
+import { resolve, dirname, join } from "path";
+import { fileURLToPath } from "url";
+var __dirname = dirname(fileURLToPath(import.meta.url));
+var templateDir = resolve(__dirname, "..", "template");
+var program = new Command();
+program.name("create-strayl-web-app").description("Scaffold a new Strayl web application").requiredOption("--name <name>", "Name of the new project").action((opts) => {
+  const name = opts.name.trim();
+  if (!name) {
+    console.error(pc.red("Error: --name must not be empty."));
+    process.exit(1);
+  }
+  if (!/^[a-zA-Z0-9_@\/-][a-zA-Z0-9_.\-@\/]*$/.test(name)) {
+    console.error(
+      pc.red(
+        "Error: Invalid project name. Use only alphanumeric characters, hyphens, underscores, dots, and slashes."
+      )
+    );
+    process.exit(1);
+  }
+  const targetDir = resolve(process.cwd(), name);
+  if (existsSync(targetDir)) {
+    console.error(
+      pc.red(`Error: Directory "${name}" already exists.`)
+    );
+    process.exit(1);
+  }
+  if (!existsSync(templateDir)) {
+    console.error(
+      pc.red("Error: Template directory not found. The package may be corrupted.")
+    );
+    process.exit(1);
+  }
+  console.log(pc.cyan(`Creating project "${name}"...`));
+  cpSync(templateDir, targetDir, { recursive: true });
+  const pkgJsonPath = join(targetDir, "package.json");
+  if (existsSync(pkgJsonPath)) {
+    const pkgJson = JSON.parse(readFileSync(pkgJsonPath, "utf-8"));
+    pkgJson.name = name;
+    delete pkgJson.private;
+    writeFileSync(pkgJsonPath, JSON.stringify(pkgJson, null, 2) + "\n");
+  }
+  console.log(pc.green(`
+Project "${name}" created successfully!
+`));
+  console.log("Next steps:");
+  console.log(pc.cyan(`  cd ${name}`));
+  console.log(pc.cyan("  npm install"));
+  console.log(pc.cyan("  npm run dev"));
+  console.log();
+});
+program.parse();
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts"],"sourcesContent":["import { Command } from \"commander\";\nimport pc from \"picocolors\";\nimport { cpSync, existsSync, readFileSync, writeFileSync } from \"node:fs\";\nimport { resolve, dirname, join } from \"node:path\";\nimport { fileURLToPath } from \"node:url\";\n\nconst __dirname = dirname(fileURLToPath(import.meta.url));\nconst templateDir = resolve(__dirname, \"..\", \"template\");\n\nconst program = new Command();\n\nprogram\n  .name(\"create-strayl-web-app\")\n  .description(\"Scaffold a new Strayl web application\")\n  .requiredOption(\"--name <name>\", \"Name of the new project\")\n  .action((opts: { name: string }) => {\n    const name = opts.name.trim();\n\n    if (!name) {\n      console.error(pc.red(\"Error: --name must not be empty.\"));\n      process.exit(1);\n    }\n\n    if (!/^[a-zA-Z0-9_@\\/-][a-zA-Z0-9_.\\-@\\/]*$/.test(name)) {\n      console.error(\n        pc.red(\n          \"Error: Invalid project name. Use only alphanumeric characters, hyphens, underscores, dots, and slashes.\"\n        )\n      );\n      process.exit(1);\n    }\n\n    const targetDir = resolve(process.cwd(), name);\n\n    if (existsSync(targetDir)) {\n      console.error(\n        pc.red(`Error: Directory \"${name}\" already exists.`)\n      );\n      process.exit(1);\n    }\n\n    if (!existsSync(templateDir)) {\n      console.error(\n        pc.red(\"Error: Template directory not found. The package may be corrupted.\")\n      );\n      process.exit(1);\n    }\n\n    console.log(pc.cyan(`Creating project \"${name}\"...`));\n\n    cpSync(templateDir, targetDir, { recursive: true });\n\n    const pkgJsonPath = join(targetDir, \"package.json\");\n    if (existsSync(pkgJsonPath)) {\n      const pkgJson = JSON.parse(readFileSync(pkgJsonPath, \"utf-8\"));\n      pkgJson.name = name;\n      delete pkgJson.private;\n      writeFileSync(pkgJsonPath, JSON.stringify(pkgJson, null, 2) + \"\\n\");\n    }\n\n    console.log(pc.green(`\\nProject \"${name}\" created successfully!\\n`));\n    console.log(\"Next steps:\");\n    console.log(pc.cyan(`  cd ${name}`));\n    console.log(pc.cyan(\"  npm install\"));\n    console.log(pc.cyan(\"  npm run dev\"));\n    console.log();\n  });\n\nprogram.parse();\n"],"mappings":";;;;AAAA,SAAS,eAAe;AACxB,OAAO,QAAQ;AACf,SAAS,QAAQ,YAAY,cAAc,qBAAqB;AAChE,SAAS,SAAS,SAAS,YAAY;AACvC,SAAS,qBAAqB;AAE9B,IAAM,YAAY,QAAQ,cAAc,YAAY,GAAG,CAAC;AACxD,IAAM,cAAc,QAAQ,WAAW,MAAM,UAAU;AAEvD,IAAM,UAAU,IAAI,QAAQ;AAE5B,QACG,KAAK,uBAAuB,EAC5B,YAAY,uCAAuC,EACnD,eAAe,iBAAiB,yBAAyB,EACzD,OAAO,CAAC,SAA2B;AAClC,QAAM,OAAO,KAAK,KAAK,KAAK;AAE5B,MAAI,CAAC,MAAM;AACT,YAAQ,MAAM,GAAG,IAAI,kCAAkC,CAAC;AACxD,YAAQ,KAAK,CAAC;AAAA,EAChB;AAEA,MAAI,CAAC,wCAAwC,KAAK,IAAI,GAAG;AACvD,YAAQ;AAAA,MACN,GAAG;AAAA,QACD;AAAA,MACF;AAAA,IACF;AACA,YAAQ,KAAK,CAAC;AAAA,EAChB;AAEA,QAAM,YAAY,QAAQ,QAAQ,IAAI,GAAG,IAAI;AAE7C,MAAI,WAAW,SAAS,GAAG;AACzB,YAAQ;AAAA,MACN,GAAG,IAAI,qBAAqB,IAAI,mBAAmB;AAAA,IACrD;AACA,YAAQ,KAAK,CAAC;AAAA,EAChB;AAEA,MAAI,CAAC,WAAW,WAAW,GAAG;AAC5B,YAAQ;AAAA,MACN,GAAG,IAAI,oEAAoE;AAAA,IAC7E;AACA,YAAQ,KAAK,CAAC;AAAA,EAChB;AAEA,UAAQ,IAAI,GAAG,KAAK,qBAAqB,IAAI,MAAM,CAAC;AAEpD,SAAO,aAAa,WAAW,EAAE,WAAW,KAAK,CAAC;AAElD,QAAM,cAAc,KAAK,WAAW,cAAc;AAClD,MAAI,WAAW,WAAW,GAAG;AAC3B,UAAM,UAAU,KAAK,MAAM,aAAa,aAAa,OAAO,CAAC;AAC7D,YAAQ,OAAO;AACf,WAAO,QAAQ;AACf,kBAAc,aAAa,KAAK,UAAU,SAAS,MAAM,CAAC,IAAI,IAAI;AAAA,EACpE;AAEA,UAAQ,IAAI,GAAG,MAAM;AAAA,WAAc,IAAI;AAAA,CAA2B,CAAC;AACnE,UAAQ,IAAI,aAAa;AACzB,UAAQ,IAAI,GAAG,KAAK,QAAQ,IAAI,EAAE,CAAC;AACnC,UAAQ,IAAI,GAAG,KAAK,eAAe,CAAC;AACpC,UAAQ,IAAI,GAAG,KAAK,eAAe,CAAC;AACpC,UAAQ,IAAI;AACd,CAAC;AAEH,QAAQ,MAAM;","names":[]}

package/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "create-strayl-web-app",
+  "version": "1.0.0",
+  "description": "Scaffold a new Strayl web application",
+  "type": "module",
+  "bin": {
+    "create-strayl-web-app": "./dist/index.js"
+  },
+  "files": [
+    "dist",
+    "template"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "typecheck": "tsc --noEmit",
+    "prepublishOnly": "npm run build"
+  },
+  "dependencies": {
+    "commander": "^12.1.0",
+    "picocolors": "^1.1.1"
+  },
+  "devDependencies": {
+    "@types/node": "^22.10.0",
+    "tsup": "^8.3.5",
+    "typescript": "^5.7.2"
+  },
+  "engines": {
+    "node": ">=18"
+  },
+  "keywords": [
+    "strayl",
+    "create",
+    "web-app",
+    "scaffold"
+  ],
+  "author": "Strayl Inc",
+  "license": "MIT"
+}

package/template/README.md

@@ -0,0 +1,290 @@
+Welcome to your new TanStack app! 
+
+# Getting Started
+
+To run this application:
+
+```bash
+npm install
+npm run dev
+```
+
+# Building For Production
+
+To build this application for production:
+
+```bash
+npm run build
+```
+
+## Testing
+
+This project uses [Vitest](https://vitest.dev/) for testing. You can run the tests with:
+
+```bash
+npm run test
+```
+
+## Styling
+
+This project uses [Tailwind CSS](https://tailwindcss.com/) for styling.
+
+
+
+
+## Routing
+This project uses [TanStack Router](https://tanstack.com/router). The initial setup is a file based router. Which means that the routes are managed as files in `src/routes`.
+
+### Adding A Route
+
+To add a new route to your application just add another a new file in the `./src/routes` directory.
+
+TanStack will automatically generate the content of the route file for you.
+
+Now that you have two routes you can use a `Link` component to navigate between them.
+
+### Adding Links
+
+To use SPA (Single Page Application) navigation you will need to import the `Link` component from `@tanstack/react-router`.
+
+```tsx
+import { Link } from "@tanstack/react-router";
+```
+
+Then anywhere in your JSX you can use it like so:
+
+```tsx
+<Link to="/about">About</Link>
+```
+
+This will create a link that will navigate to the `/about` route.
+
+More information on the `Link` component can be found in the [Link documentation](https://tanstack.com/router/v1/docs/framework/react/api/router/linkComponent).
+
+### Using A Layout
+
+In the File Based Routing setup the layout is located in `src/routes/__root.tsx`. Anything you add to the root route will appear in all the routes. The route content will appear in the JSX where you use the `<Outlet />` component.
+
+Here is an example layout that includes a header:
+
+```tsx
+import { Outlet, createRootRoute } from '@tanstack/react-router'
+import { TanStackRouterDevtools } from '@tanstack/react-router-devtools'
+
+import { Link } from "@tanstack/react-router";
+
+export const Route = createRootRoute({
+  component: () => (
+    <>
+      <header>
+        <nav>
+          <Link to="/">Home</Link>
+          <Link to="/about">About</Link>
+        </nav>
+      </header>
+      <Outlet />
+      <TanStackRouterDevtools />
+    </>
+  ),
+})
+```
+
+The `<TanStackRouterDevtools />` component is not required so you can remove it if you don't want it in your layout.
+
+More information on layouts can be found in the [Layouts documentation](https://tanstack.com/router/latest/docs/framework/react/guide/routing-concepts#layouts).
+
+
+## Data Fetching
+
+There are multiple ways to fetch data in your application. You can use TanStack Query to fetch data from a server. But you can also use the `loader` functionality built into TanStack Router to load the data for a route before it's rendered.
+
+For example:
+
+```tsx
+const peopleRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: "/people",
+  loader: async () => {
+    const response = await fetch("https://swapi.dev/api/people");
+    return response.json() as Promise<{
+      results: {
+        name: string;
+      }[];
+    }>;
+  },
+  component: () => {
+    const data = peopleRoute.useLoaderData();
+    return (
+      <ul>
+        {data.results.map((person) => (
+          <li key={person.name}>{person.name}</li>
+        ))}
+      </ul>
+    );
+  },
+});
+```
+
+Loaders simplify your data fetching logic dramatically. Check out more information in the [Loader documentation](https://tanstack.com/router/latest/docs/framework/react/guide/data-loading#loader-parameters).
+
+### React-Query
+
+React-Query is an excellent addition or alternative to route loading and integrating it into you application is a breeze.
+
+First add your dependencies:
+
+```bash
+npm install @tanstack/react-query @tanstack/react-query-devtools
+```
+
+Next we'll need to create a query client and provider. We recommend putting those in `main.tsx`.
+
+```tsx
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+
+// ...
+
+const queryClient = new QueryClient();
+
+// ...
+
+if (!rootElement.innerHTML) {
+  const root = ReactDOM.createRoot(rootElement);
+
+  root.render(
+    <QueryClientProvider client={queryClient}>
+      <RouterProvider router={router} />
+    </QueryClientProvider>
+  );
+}
+```
+
+You can also add TanStack Query Devtools to the root route (optional).
+
+```tsx
+import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
+
+const rootRoute = createRootRoute({
+  component: () => (
+    <>
+      <Outlet />
+      <ReactQueryDevtools buttonPosition="top-right" />
+      <TanStackRouterDevtools />
+    </>
+  ),
+});
+```
+
+Now you can use `useQuery` to fetch your data.
+
+```tsx
+import { useQuery } from "@tanstack/react-query";
+
+import "./App.css";
+
+function App() {
+  const { data } = useQuery({
+    queryKey: ["people"],
+    queryFn: () =>
+      fetch("https://swapi.dev/api/people")
+        .then((res) => res.json())
+        .then((data) => data.results as { name: string }[]),
+    initialData: [],
+  });
+
+  return (
+    <div>
+      <ul>
+        {data.map((person) => (
+          <li key={person.name}>{person.name}</li>
+        ))}
+      </ul>
+    </div>
+  );
+}
+
+export default App;
+```
+
+You can find out everything you need to know on how to use React-Query in the [React-Query documentation](https://tanstack.com/query/latest/docs/framework/react/overview).
+
+## State Management
+
+Another common requirement for React applications is state management. There are many options for state management in React. TanStack Store provides a great starting point for your project.
+
+First you need to add TanStack Store as a dependency:
+
+```bash
+npm install @tanstack/store
+```
+
+Now let's create a simple counter in the `src/App.tsx` file as a demonstration.
+
+```tsx
+import { useStore } from "@tanstack/react-store";
+import { Store } from "@tanstack/store";
+import "./App.css";
+
+const countStore = new Store(0);
+
+function App() {
+  const count = useStore(countStore);
+  return (
+    <div>
+      <button onClick={() => countStore.setState((n) => n + 1)}>
+        Increment - {count}
+      </button>
+    </div>
+  );
+}
+
+export default App;
+```
+
+One of the many nice features of TanStack Store is the ability to derive state from other state. That derived state will update when the base state updates.
+
+Let's check this out by doubling the count using derived state.
+
+```tsx
+import { useStore } from "@tanstack/react-store";
+import { Store, Derived } from "@tanstack/store";
+import "./App.css";
+
+const countStore = new Store(0);
+
+const doubledStore = new Derived({
+  fn: () => countStore.state * 2,
+  deps: [countStore],
+});
+doubledStore.mount();
+
+function App() {
+  const count = useStore(countStore);
+  const doubledCount = useStore(doubledStore);
+
+  return (
+    <div>
+      <button onClick={() => countStore.setState((n) => n + 1)}>
+        Increment - {count}
+      </button>
+      <div>Doubled - {doubledCount}</div>
+    </div>
+  );
+}
+
+export default App;
+```
+
+We use the `Derived` class to create a new store that is derived from another store. The `Derived` class has a `mount` method that will start the derived store updating.
+
+Once we've created the derived store we can use it in the `App` component just like we would any other store using the `useStore` hook.
+
+You can find out everything you need to know on how to use TanStack Store in the [TanStack Store documentation](https://tanstack.com/store/latest).
+
+# Demo files
+
+Files prefixed with `demo` can be safely deleted. They are there to provide a starting point for you to play around with the features you've installed.
+
+# Learn More
+
+You can learn more about all of the offerings from TanStack in the [TanStack documentation](https://tanstack.com).

package/template/components.json

@@ -0,0 +1,24 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "src/styles.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "iconLibrary": "lucide",
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "registries": {
+    "@coss": "https://coss.com/ui/r/{name}.json"
+  }
+}

package/template/package.json

@@ -0,0 +1,56 @@
+{
+  "name": "strayl-web",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite dev --port 3000",
+    "build": "vite build",
+    "preview": "vite preview",
+    "test": "vitest run"
+  },
+  "dependencies": {
+    "@base-ui/react": "^1.1.0",
+    "@fontsource-variable/bitcount-prop-single": "^5.2.2",
+    "@fontsource-variable/geist": "^5.2.8",
+    "@fontsource-variable/geist-mono": "^5.2.7",
+    "@radix-ui/react-dialog": "^1.1.4",
+    "@radix-ui/react-dropdown-menu": "^2.1.4",
+    "@radix-ui/react-navigation-menu": "^1.2.3",
+    "@radix-ui/react-slot": "^1.1.1",
+    "@tailwindcss/vite": "^4.0.6",
+    "@tanstack/react-devtools": "^0.7.0",
+    "@tanstack/react-router": "^1.132.0",
+    "@tanstack/react-router-devtools": "^1.132.0",
+    "@tanstack/react-router-ssr-query": "^1.131.7",
+    "@tanstack/react-start": "^1.132.0",
+    "@tanstack/router-plugin": "^1.132.0",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "i18next": "^25.8.0",
+    "i18next-browser-languagedetector": "^8.2.0",
+    "lucide-react": "^0.561.0",
+    "next-themes": "^0.4.6",
+    "nitro": "npm:nitro-nightly@latest",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "react-i18next": "^16.5.3",
+    "tailwind-merge": "^2.6.0",
+    "tailwindcss": "^4.0.6",
+    "tw-animate-css": "^1.4.0",
+    "vite-tsconfig-paths": "^6.0.2"
+  },
+  "devDependencies": {
+    "@tanstack/devtools-vite": "^0.3.11",
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/react": "^16.2.0",
+    "@types/node": "^22.10.2",
+    "@types/react": "^19.2.0",
+    "@types/react-dom": "^19.2.0",
+    "@vitejs/plugin-react": "^5.0.4",
+    "jsdom": "^27.0.0",
+    "typescript": "^5.7.2",
+    "vite": "^7.1.7",
+    "vitest": "^3.0.5",
+    "web-vitals": "^5.1.0"
+  }
+}

package/template/public/google-logo.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
+  <path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"/>
+  <path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/>
+  <path fill="#FBBC05" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"/>
+  <path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"/>
+</svg>

package/template/public/manifest.json

@@ -0,0 +1,16 @@
+{
+  "name": "Strayl",
+  "short_name": "Strayl",
+  "description": "Build end to end",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#171717",
+  "background_color": "#f5f5f5"
+}

package/template/public/robots.txt

@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:

package/template/src/components/Header.tsx

@@ -0,0 +1,76 @@
+import { Link } from '@tanstack/react-router'
+import { useTheme } from 'next-themes'
+import { useEffect, useState } from 'react'
+import { Home, Menu, Moon, Sun } from 'lucide-react'
+import { ThemedLogo } from './themed-logo'
+import { Button } from '@/components/ui/button'
+import {
+  Sheet,
+  SheetTrigger,
+  SheetPopup,
+  SheetHeader,
+  SheetTitle,
+  SheetPanel,
+  SheetClose,
+} from '@/components/ui/sheet'
+
+export default function Header() {
+  const { resolvedTheme, setTheme } = useTheme()
+  const [mounted, setMounted] = useState(false)
+
+  useEffect(() => {
+    setMounted(true)
+  }, [])
+
+  return (
+    <header className="p-4 flex items-center justify-between bg-card border-b border-border">
+      <div className="flex items-center">
+        <Sheet>
+          <SheetTrigger render={<Button variant="ghost" size="icon" />}>
+            <Menu size={24} />
+          </SheetTrigger>
+          <SheetPopup side="left">
+            <SheetHeader>
+              <SheetTitle>Navigation</SheetTitle>
+            </SheetHeader>
+            <SheetPanel>
+              <nav className="flex flex-col gap-2">
+                <SheetClose
+                  render={
+                    <Link
+                      to="/"
+                      className="flex items-center gap-3 p-3 rounded-lg hover:bg-muted transition-colors"
+                      activeProps={{
+                        className:
+                          'flex items-center gap-3 p-3 rounded-lg bg-primary text-primary-foreground hover:bg-primary/90 transition-colors',
+                      }}
+                    />
+                  }
+                >
+                  <Home size={20} />
+                  <span className="font-medium">Home</span>
+                </SheetClose>
+              </nav>
+            </SheetPanel>
+          </SheetPopup>
+        </Sheet>
+        <Link to="/" className="ml-4 flex items-center gap-2">
+          <ThemedLogo width={32} height={32} />
+          <span className="text-xl font-semibold">Strayl</span>
+        </Link>
+      </div>
+      <Button
+        variant="ghost"
+        size="icon"
+        onClick={() => setTheme(resolvedTheme === 'dark' ? 'light' : 'dark')}
+        aria-label="Toggle theme"
+      >
+        {mounted ? (
+          resolvedTheme === 'dark' ? <Sun size={20} /> : <Moon size={20} />
+        ) : (
+          <div className="w-5 h-5" />
+        )}
+      </Button>
+    </header>
+  )
+}

package/template/src/components/language-switcher.tsx

@@ -0,0 +1,38 @@
+import { useTranslation } from 'react-i18next'
+import { Languages } from 'lucide-react'
+import {
+  Select,
+  SelectTrigger,
+  SelectValue,
+  SelectPopup,
+  SelectItem,
+} from '@/components/ui/select'
+
+const languages = [
+  { code: 'ru', label: 'Русский' },
+  { code: 'en', label: 'English' },
+  { code: 'kk', label: 'Қазақша' },
+]
+
+export function LanguageSwitcher() {
+  const { i18n } = useTranslation()
+
+  return (
+    <Select
+      value={i18n.language}
+      onValueChange={(value) => i18n.changeLanguage(value)}
+    >
+      <SelectTrigger size="sm" className="w-auto min-w-0 gap-1.5">
+        <Languages className="size-4" />
+        <SelectValue placeholder="Language" />
+      </SelectTrigger>
+      <SelectPopup>
+        {languages.map((lang) => (
+          <SelectItem key={lang.code} value={lang.code}>
+            {lang.label}
+          </SelectItem>
+        ))}
+      </SelectPopup>
+    </Select>
+  )
+}

package/template/src/components/theme-provider.tsx

@@ -0,0 +1,14 @@
+import { ThemeProvider as NextThemesProvider } from "next-themes"
+
+export function ThemeProvider({ children }: { children: React.ReactNode }) {
+  return (
+    <NextThemesProvider
+      attribute="class"
+      defaultTheme="system"
+      enableSystem
+      disableTransitionOnChange
+    >
+      {children}
+    </NextThemesProvider>
+  )
+}