create-nala 3.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 candrasp
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,58 @@
+# create-nala
+
+> The official scaffolding CLI for **Nala** — A modern, production-ready enterprise admin dashboard template built with Vue 3, Vite, TypeScript, and Tailwind CSS v4.
+
+---
+
+## 🚀 Quick Start
+
+Create a new Nala admin application in seconds:
+
+### with `pnpm` (Recommended)
+```bash
+pnpm create nala my-admin-app
+```
+
+### with `npm`
+```bash
+npm create nala@latest my-admin-app
+```
+
+### with `yarn`
+```bash
+yarn create nala my-admin-app
+```
+
+### with `bun`
+```bash
+bun create nala my-admin-app
+```
+
+---
+
+## 📦 What's Included
+
+- ⚡ **Vue 3.5+ & Vite 8+** — Blazing fast Hot Module Replacement (<100ms)
+- 🎨 **Tailwind CSS v4** — High-performance CSS engine with OKLCH design tokens
+- 🧩 **34+ Reka UI Primitives** — Accessible, headless UI components (shadcn-vue compatible)
+- 🔒 **Full Auth Views Suite** — Login, Register, Forgot/Reset Password, 6-box OTP input, Confirm Email, Lock Screen
+- 📡 **Axios Service Layer** — Typed API client with auto token injection & error toast interceptors
+- 🍍 **Pinia Store** — Typed state management
+- 🌓 **Dynamic Theme Switcher** — Dark, Light, System themes out of the box
+- 📱 **Mobile & Desktop Layouts** — Collapsible sidebar, mobile drawer, command search palette (`Ctrl+K`)
+
+---
+
+## 🛠️ Development
+
+```bash
+cd my-admin-app
+pnpm install
+pnpm dev
+```
+
+---
+
+## 📄 License
+
+[MIT](https://github.com/candrasp/Nala/blob/main/LICENSE) © [candrasp](https://github.com/candrasp)

package/dist/index.js

@@ -0,0 +1,227 @@
+#!/usr/bin/env node
+
+// src/index.ts
+import path2 from "path";
+import { fileURLToPath } from "url";
+import {
+  intro,
+  outro,
+  text,
+  select,
+  confirm,
+  spinner,
+  isCancel,
+  cancel,
+  log
+} from "@clack/prompts";
+import { cyan, green, dim, bold, red } from "kolorist";
+
+// src/utils.ts
+import fs from "fs";
+import path from "path";
+function formatTargetDir(targetDir) {
+  return targetDir?.trim().replace(/\/+$/g, "");
+}
+function isEmptyDir(dirPath) {
+  if (!fs.existsSync(dirPath)) {
+    return true;
+  }
+  const files = fs.readdirSync(dirPath);
+  return files.length === 0 || files.length === 1 && files[0] === ".git";
+}
+function emptyDir(dir) {
+  if (!fs.existsSync(dir)) {
+    return;
+  }
+  for (const file of fs.readdirSync(dir)) {
+    if (file === ".git") {
+      continue;
+    }
+    fs.rmSync(path.resolve(dir, file), { recursive: true, force: true });
+  }
+}
+function pkgFromUserAgent(userAgent) {
+  if (!userAgent) return "pnpm";
+  const pkgSpec = userAgent.split(" ")[0];
+  const pkgName = pkgSpec.split("/")[0];
+  if (["pnpm", "npm", "yarn", "bun"].includes(pkgName)) {
+    return pkgName;
+  }
+  return "pnpm";
+}
+var TEXT_FILE_EXTENSIONS = /* @__PURE__ */ new Set([
+  ".json",
+  ".html",
+  ".md",
+  ".ts",
+  ".js",
+  ".vue",
+  ".css",
+  ".svg",
+  ".example",
+  ".yaml",
+  ".yml"
+]);
+function copyDir(srcDir, destDir, replacements = {}) {
+  fs.mkdirSync(destDir, { recursive: true });
+  for (const file of fs.readdirSync(srcDir)) {
+    const srcFile = path.resolve(srcDir, file);
+    let destFileName = file;
+    if (file === "_gitignore") {
+      destFileName = ".gitignore";
+    }
+    const destFile = path.resolve(destDir, destFileName);
+    const stat = fs.statSync(srcFile);
+    if (stat.isDirectory()) {
+      copyDir(srcFile, destFile, replacements);
+    } else {
+      const ext = path.extname(file).toLowerCase();
+      if (TEXT_FILE_EXTENSIONS.has(ext) || file.startsWith(".env") || file === "_gitignore" || file === "LICENSE") {
+        let content = fs.readFileSync(srcFile, "utf-8");
+        for (const [search, replace] of Object.entries(replacements)) {
+          content = content.replaceAll(search, replace);
+        }
+        fs.writeFileSync(destFile, content, "utf-8");
+      } else {
+        fs.copyFileSync(srcFile, destFile);
+      }
+    }
+  }
+}
+
+// src/index.ts
+var __dirname2 = path2.dirname(fileURLToPath(import.meta.url));
+async function run() {
+  const isTTY = Boolean(process.stdin.isTTY && process.stdout.isTTY);
+  const argv = process.argv.slice(2);
+  const flags = {
+    force: argv.includes("--force") || argv.includes("-f"),
+    pnpm: argv.includes("--pnpm"),
+    npm: argv.includes("--npm"),
+    yarn: argv.includes("--yarn"),
+    bun: argv.includes("--bun")
+  };
+  const nonFlagArgs = argv.filter((arg) => !arg.startsWith("-"));
+  let targetDir = formatTargetDir(nonFlagArgs[0]);
+  const defaultProjectName = targetDir || "nala-admin-app";
+  if (isTTY) {
+    console.log();
+    intro(bold(cyan("\u2726 create-nala \u2014 Scaffold a Modern Vue 3 Admin Dashboard \u2726")));
+  } else {
+    console.log(bold(cyan("\n\u2726 create-nala (Non-interactive mode) \u2726\n")));
+  }
+  if (!targetDir) {
+    if (isTTY) {
+      const projectDirInput = await text({
+        message: "Project name / directory:",
+        placeholder: defaultProjectName,
+        defaultValue: defaultProjectName,
+        validate(value) {
+          if (!value || value.trim().length === 0) {
+            return "Project name cannot be empty.";
+          }
+          if (/[<>:"/\\|?*]/.test(value)) {
+            return "Directory name contains invalid characters.";
+          }
+        }
+      });
+      if (isCancel(projectDirInput)) {
+        cancel("Scaffolding cancelled.");
+        process.exit(0);
+      }
+      targetDir = formatTargetDir(projectDirInput) || defaultProjectName;
+    } else {
+      targetDir = defaultProjectName;
+    }
+  }
+  const root = path2.resolve(process.cwd(), targetDir);
+  const appSlug = path2.basename(root);
+  const appName = appSlug.split(/[-_]+/).map((word) => word.charAt(0).toUpperCase() + word.slice(1)).join(" ");
+  if (!isEmptyDir(root)) {
+    if (flags.force) {
+      emptyDir(root);
+    } else if (isTTY) {
+      const shouldOverwrite = await confirm({
+        message: `Target directory "${targetDir}" is not empty. Remove existing files and continue?`,
+        initialValue: false
+      });
+      if (isCancel(shouldOverwrite) || !shouldOverwrite) {
+        cancel("Operation cancelled.");
+        process.exit(0);
+      }
+      emptyDir(root);
+    } else {
+      console.error(red(`Error: Target directory "${targetDir}" is not empty. Use --force to overwrite.`));
+      process.exit(1);
+    }
+  }
+  const detectedPkgManager = pkgFromUserAgent(process.env.npm_config_user_agent);
+  let pkgManager = detectedPkgManager;
+  if (flags.pnpm) pkgManager = "pnpm";
+  else if (flags.npm) pkgManager = "npm";
+  else if (flags.yarn) pkgManager = "yarn";
+  else if (flags.bun) pkgManager = "bun";
+  else if (isTTY) {
+    const pkgManagerSelection = await select({
+      message: "Select package manager:",
+      initialValue: detectedPkgManager,
+      options: [
+        { value: "pnpm", label: "pnpm", hint: "recommended" },
+        { value: "npm", label: "npm" },
+        { value: "yarn", label: "yarn" },
+        { value: "bun", label: "bun" }
+      ]
+    });
+    if (isCancel(pkgManagerSelection)) {
+      cancel("Scaffolding cancelled.");
+      process.exit(0);
+    }
+    pkgManager = String(pkgManagerSelection);
+  }
+  const templateDir = path2.resolve(__dirname2, "../template");
+  if (isTTY) {
+    const s = spinner();
+    s.start(`Scaffolding project in ${cyan(root)}...`);
+    try {
+      copyDir(templateDir, root, {
+        NALA_APP_NAME: appName,
+        NALA_APP_SLUG: appSlug
+      });
+      s.stop(`Scaffolded project in ${green(root)}`);
+    } catch (err) {
+      const errorMsg = err instanceof Error ? err.message : String(err);
+      s.stop(red("Failed to scaffold project."));
+      log.error(errorMsg);
+      process.exit(1);
+    }
+  } else {
+    console.log(`Scaffolding project in ${cyan(root)}...`);
+    copyDir(templateDir, root, {
+      NALA_APP_NAME: appName,
+      NALA_APP_SLUG: appSlug
+    });
+    console.log(`Scaffolded project in ${green(root)}`);
+  }
+  const cdCmd = targetDir === "." ? "" : `cd ${targetDir}
+  `;
+  const installCmd = pkgManager === "yarn" ? "yarn" : `${pkgManager} install`;
+  const devCmd = pkgManager === "npm" ? "npm run dev" : `${pkgManager} dev`;
+  console.log();
+  if (isTTY) {
+    log.success(green("Project initialized successfully! \u{1F389}"));
+  } else {
+    console.log(green("\u2713 Project initialized successfully! \u{1F389}"));
+  }
+  console.log();
+  console.log(bold("Next steps:"));
+  console.log(dim(`  ${cdCmd}${installCmd}
+  ${devCmd}`));
+  console.log();
+  if (isTTY) {
+    outro(cyan("Happy coding with Nala! \u2728"));
+  }
+}
+run().catch((err) => {
+  console.error(err);
+  process.exit(1);
+});

package/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "create-nala",
+  "version": "3.0.0",
+  "description": "Scaffolding CLI tool for Nala Admin Dashboard Template",
+  "author": "candrasp",
+  "license": "MIT",
+  "type": "module",
+  "bin": {
+    "create-nala": "./dist/index.js"
+  },
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist",
+    "template"
+  ],
+  "keywords": [
+    "nala",
+    "vue3",
+    "admin",
+    "dashboard",
+    "template",
+    "scaffold",
+    "create",
+    "starter",
+    "tailwind-v4",
+    "reka-ui",
+    "shadcn-vue"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/candrasp/Nala.git",
+    "directory": "packages/create-nala"
+  },
+  "dependencies": {
+    "@clack/prompts": "^0.9.1",
+    "kolorist": "^1.8.0"
+  },
+  "devDependencies": {
+    "@types/node": "^24.13.3",
+    "tsup": "^8.4.0",
+    "typescript": "~6.0.2"
+  },
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch"
+  }
+}

package/template/.env.example

@@ -0,0 +1,45 @@
+# ─── App Configuration ────────────────────────────────────────────────────────
+# Application brand name (used in page titles, header branding, and notifications)
+VITE_APP_NAME=Nala
+
+# ─── API Service Layer ────────────────────────────────────────────────────────
+# Backend REST / GraphQL API base URL (no trailing slash)
+# When unreachable in development (DEV mode), services automatically fall back to mock data
+# Examples:
+#   - Local development: http://localhost:8000/api/v1
+#   - Production server: https://api.yourdomain.com/v1
+VITE_API_BASE_URL=http://localhost:3000
+
+# ─── Internationalization & Data Formatting ──────────────────────────────────
+# Default locale used by formatters (date, number, currency, relative time)
+# Formatter supports standard BCP 47 language tags:
+#   - en-US (United States)
+#   - id-ID (Indonesia)
+#   - de-DE (Germany)
+#   - ja-JP (Japan)
+#   - fr-FR (France)
+VITE_DEFAULT_LOCALE=en-US
+
+# Default ISO 4217 currency code for formatCurrency()
+# Examples: USD ($) | IDR (Rp) | EUR (€) | JPY (¥) | GBP (£)
+VITE_DEFAULT_CURRENCY=USD
+
+# Default IANA timezone string for date/time formatters
+# Examples:
+#   - Indonesia: Asia/Jakarta (WIB) | Asia/Makassar (WITA) | Asia/Jayapura (WIT)
+#   - Global: UTC | America/New_York | Europe/London | Asia/Tokyo | Australia/Sydney
+VITE_DEFAULT_TIMEZONE=Asia/Jakarta
+
+# Default clock time format system
+# Options:
+#   - '24h'  : 24-hour military clock (e.g. 14:30)
+#   - '12h'  : 12-hour clock with AM/PM (e.g. 02:30 PM)
+#   - 'auto' : Automatically determined by user's locale setting
+VITE_DEFAULT_TIME_FORMAT=24h
+
+# ─── Theme & Layout Customizer ───────────────────────────────────────────────
+# Enable/disable the interactive live Theme Customizer drawer and navbar trigger
+# Set to 'false' in production if you wish to lock your branding permanently
+# Options: 'true' | 'false' (defaults to 'true')
+VITE_SHOW_THEME_CUSTOMIZER=true
+

package/template/_gitignore

@@ -0,0 +1,33 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+!.vscode/settings.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+# Auto-generated TypeScript declarations
+src/auto-imports.d.ts
+src/components.d.ts
+
+# Environment
+.env.local
+.env.*.local

package/template/components.json

@@ -0,0 +1,24 @@
+{
+  "$schema": "https://shadcn-vue.com/schema.json",
+  "style": "new-york",
+  "font": "inter",
+  "typescript": true,
+  "tailwind": {
+    "config": "",
+    "css": "src/style.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "iconLibrary": "lucide",
+  "rtl": false,
+  "pointer": false,
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "composables": "@/composables"
+  },
+  "registries": {}
+}

package/template/index.html

@@ -0,0 +1,30 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg?v=2" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    
+    <!-- Primary Meta Tags -->
+    <title>Nala — Modern Vue 3 Admin Dashboard Template</title>
+    <meta name="title" content="Nala — Modern Vue 3 Admin Dashboard Template" />
+    <meta name="description" content="A modern, production-ready enterprise admin dashboard template built with Vue 3, Vite, TypeScript, and Tailwind CSS v4." />
+    <meta name="theme-color" content="#10b981" />
+
+    <!-- Open Graph / Facebook / LinkedIn -->
+    <meta property="og:type" content="website" />
+    <meta property="og:title" content="Nala — Modern Vue 3 Admin Dashboard Template" />
+    <meta property="og:description" content="A modern, production-ready enterprise admin dashboard template built with Vue 3, Vite, TypeScript, and Tailwind CSS v4." />
+    <meta property="og:image" content="/screenshot.png" />
+
+    <!-- Twitter -->
+    <meta property="twitter:card" content="summary_large_image" />
+    <meta property="twitter:title" content="Nala — Modern Vue 3 Admin Dashboard Template" />
+    <meta property="twitter:description" content="A modern, production-ready enterprise admin dashboard template built with Vue 3, Vite, TypeScript, and Tailwind CSS v4." />
+    <meta property="twitter:image" content="/screenshot.png" />
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

package/template/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "NALA_APP_SLUG",
+  "version": "0.1.0",
+  "description": "Production-ready admin dashboard built with Vue 3, Vite, TypeScript, and Tailwind CSS v4.",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite --host",
+    "build": "vue-tsc -b && vite build",
+    "preview": "vite preview",
+    "test": "vitest",
+    "test:run": "vitest run"
+  },
+  "dependencies": {
+    "@lucide/vue": "^1.29.0",
+    "@tailwindcss/vite": "^4.3.3",
+    "@vee-validate/zod": "^4.15.1",
+    "@vueuse/core": "^14.4.0",
+    "axios": "^1.19.0",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "pinia": "^4.0.2",
+    "reka-ui": "^2.10.1",
+    "tailwind-merge": "^3.6.0",
+    "tailwindcss": "^4.3.3",
+    "vee-validate": "^4.15.1",
+    "vue": "^3.5.40",
+    "vue-router": "^5.2.0",
+    "vue-sonner": "^2.0.9",
+    "zod": "^3.24.0"
+  },
+  "devDependencies": {
+    "@types/node": "^24.13.3",
+    "@vitejs/plugin-vue": "^6.0.8",
+    "@vue/test-utils": "^2.4.11",
+    "@vue/tsconfig": "^0.9.1",
+    "happy-dom": "^20.11.6",
+    "tw-animate-css": "^1.4.0",
+    "typescript": "~6.0.2",
+    "unplugin-auto-import": "^21.1.0",
+    "unplugin-vue-components": "^32.1.0",
+    "vite": "^8.2.0",
+    "vitest": "^4.1.11",
+    "vue-tsc": "^3.3.8"
+  },
+  "pnpm": {
+    "ignoredBuiltDependencies": [
+      "vue-demi"
+    ]
+  }
+}

package/template/public/favicon.svg

@@ -0,0 +1,15 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000">
+  <rect x="0" y="0" width="1000" height="1000" rx="225" fill="#0A0A0E"/>
+  <defs>
+    <linearGradient id="nalaFaviconGrad" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="#53F5AC" />
+      <stop offset="50%" stop-color="#3ECF8E" />
+      <stop offset="100%" stop-color="#24B47E" />
+    </linearGradient>
+  </defs>
+  <g transform="translate(500,500) scale(1.22) translate(-509.75,-495.8)">
+    <g transform="translate(0,1000) scale(0.1,-0.1)" fill="url(#nalaFaviconGrad)" stroke="none">
+      <path d="M6600 7929 c-127 -13 -224 -35 -287 -64 -30 -15 -74 -33 -97 -41 -22 -8 -58 -26 -79 -40 -21 -14 -49 -29 -64 -35 -42 -16 -173 -113 -242 -178 -35 -34 -77 -71 -95 -84 -17 -12 -58 -47 -91 -78 -178 -167 -310 -288 -348 -318 -48 -38 -153 -132 -347 -309 -74 -68 -156 -143 -181 -166 -74 -67 -94 -114 -94 -221 0 -80 3 -95 27 -137 60 -100 174 -167 304 -176 59 -4 85 0 150 22 44 14 91 34 105 44 55 36 177 140 279 238 58 55 145 133 193 172 48 39 159 136 245 215 246 227 449 391 528 428 57 26 85 33 160 37 106 5 138 -3 221 -57 47 -30 68 -53 102 -110 24 -40 47 -86 52 -103 4 -17 9 -596 10 -1288 0 -975 -2 -1263 -11 -1281 -30 -58 -105 -131 -164 -161 -53 -28 -71 -32 -141 -32 -75 -1 -85 2 -162 41 -57 30 -118 75 -203 150 -66 59 -151 133 -188 163 -38 30 -139 118 -226 195 -87 77 -197 174 -246 215 -48 41 -150 129 -226 195 -76 66 -150 130 -164 141 -14 12 -101 88 -193 170 -93 82 -200 176 -239 209 -98 82 -334 290 -383 336 -22 20 -78 70 -125 110 -47 40 -143 126 -215 190 -233 209 -338 264 -589 309 -111 20 -396 7 -517 -24 -162 -41 -321 -134 -417 -244 -64 -74 -149 -212 -163 -266 -6 -23 -21 -75 -34 -117 -13 -42 -29 -114 -35 -160 -7 -58 -10 -526 -8 -1524 l3 -1440 41 -108 c45 -116 72 -161 149 -245 83 -92 265 -212 375 -247 30 -10 72 -26 92 -36 63 -32 143 -48 297 -60 182 -14 377 6 476 48 33 14 88 36 123 49 35 13 80 35 100 49 20 14 42 25 48 25 19 0 166 108 247 182 44 40 90 80 103 88 20 14 254 225 384 347 30 28 98 89 151 135 234 203 449 402 473 436 38 55 48 90 49 162 0 103 -16 147 -82 211 -80 79 -146 104 -271 104 -166 0 -217 -30 -492 -280 -84 -78 -198 -177 -253 -222 -55 -44 -111 -93 -125 -108 -53 -58 -271 -247 -503 -436 -21 -17 -75 -47 -120 -67 -140 -61 -271 -48 -384 38 -38 28 -57 55 -95 130 l-47 95 -3 1255 c-2 1160 -1 1257 14 1285 42 75 95 129 156 162 57 30 72 33 147 33 76 0 89 -3 152 -36 83 -44 143 -90 287 -218 61 -54 131 -115 156 -135 58 -46 192 -163 300 -261 47 -43 121 -108 165 -146 44 -37 126 -109 182 -159 56 -49 123 -109 150 -131 113 -97 323 -282 384 -339 36 -34 97 -86 135 -117 38 -30 110 -92 159 -138 160 -146 191 -174 290 -255 54 -44 155 -130 225 -192 70 -62 156 -132 191 -156 69 -46 212 -109 294 -127 144 -33 462 -28 605 9 216 55 395 186 514 375 57 92 122 285 137 411 14 121 12 2900 -2 2967 -20 91 -91 239 -153 317 -92 116 -227 210 -391 276 -44 17 -94 39 -111 48 -47 24 -106 35 -280 52 -87 8 -158 14 -158 14 -1 -1 -39 -6 -86 -10z"/>
+    </g>
+  </g>
+</svg>

package/template/public/icons.svg

@@ -0,0 +1,24 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+  <symbol id="bluesky-icon" viewBox="0 0 16 17">
+    <g clip-path="url(#bluesky-clip)"><path fill="#08060d" d="M7.75 7.735c-.693-1.348-2.58-3.86-4.334-5.097-1.68-1.187-2.32-.981-2.74-.79C.188 2.065.1 2.812.1 3.251s.241 3.602.398 4.13c.52 1.744 2.367 2.333 4.07 2.145-2.495.37-4.71 1.278-1.805 4.512 3.196 3.309 4.38-.71 4.987-2.746.608 2.036 1.307 5.91 4.93 2.746 2.72-2.746.747-4.143-1.747-4.512 1.702.189 3.55-.4 4.07-2.145.156-.528.397-3.691.397-4.13s-.088-1.186-.575-1.406c-.42-.19-1.06-.395-2.741.79-1.755 1.24-3.64 3.752-4.334 5.099"/></g>
+    <defs><clipPath id="bluesky-clip"><path fill="#fff" d="M.1.85h15.3v15.3H.1z"/></clipPath></defs>
+  </symbol>
+  <symbol id="discord-icon" viewBox="0 0 20 19">
+    <path fill="#08060d" d="M16.224 3.768a14.5 14.5 0 0 0-3.67-1.153c-.158.286-.343.67-.47.976a13.5 13.5 0 0 0-4.067 0c-.128-.306-.317-.69-.476-.976A14.4 14.4 0 0 0 3.868 3.77C1.546 7.28.916 10.703 1.231 14.077a14.7 14.7 0 0 0 4.5 2.306q.545-.748.965-1.587a9.5 9.5 0 0 1-1.518-.74q.191-.14.372-.293c2.927 1.369 6.107 1.369 8.999 0q.183.152.372.294-.723.437-1.52.74.418.838.963 1.588a14.6 14.6 0 0 0 4.504-2.308c.37-3.911-.63-7.302-2.644-10.309m-9.13 8.234c-.878 0-1.599-.82-1.599-1.82 0-.998.705-1.82 1.6-1.82.894 0 1.614.82 1.599 1.82.001 1-.705 1.82-1.6 1.82m5.91 0c-.878 0-1.599-.82-1.599-1.82 0-.998.705-1.82 1.6-1.82.893 0 1.614.82 1.599 1.82 0 1-.706 1.82-1.6 1.82"/>
+  </symbol>
+  <symbol id="documentation-icon" viewBox="0 0 21 20">
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="m15.5 13.333 1.533 1.322c.645.555.967.833.967 1.178s-.322.623-.967 1.179L15.5 18.333m-3.333-5-1.534 1.322c-.644.555-.966.833-.966 1.178s.322.623.966 1.179l1.534 1.321"/>
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M17.167 10.836v-4.32c0-1.41 0-2.117-.224-2.68-.359-.906-1.118-1.621-2.08-1.96-.599-.21-1.349-.21-2.848-.21-2.623 0-3.935 0-4.983.369-1.684.591-3.013 1.842-3.641 3.428C3 6.449 3 7.684 3 10.154v2.122c0 2.558 0 3.838.706 4.726q.306.383.713.671c.76.536 1.79.64 3.581.66"/>
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M3 10a2.78 2.78 0 0 1 2.778-2.778c.555 0 1.209.097 1.748-.047.48-.129.854-.503.982-.982.145-.54.048-1.194.048-1.749a2.78 2.78 0 0 1 2.777-2.777"/>
+  </symbol>
+  <symbol id="github-icon" viewBox="0 0 19 19">
+    <path fill="#08060d" fill-rule="evenodd" d="M9.356 1.85C5.05 1.85 1.57 5.356 1.57 9.694a7.84 7.84 0 0 0 5.324 7.44c.387.079.528-.168.528-.376 0-.182-.013-.805-.013-1.454-2.165.467-2.616-.935-2.616-.935-.349-.91-.864-1.143-.864-1.143-.71-.48.051-.48.051-.48.787.051 1.2.805 1.2.805.695 1.194 1.817.857 2.268.649.064-.507.27-.857.49-1.052-1.728-.182-3.545-.857-3.545-3.87 0-.857.31-1.558.8-2.104-.078-.195-.349-1 .077-2.078 0 0 .657-.208 2.14.805a7.5 7.5 0 0 1 1.946-.26c.657 0 1.328.092 1.946.26 1.483-1.013 2.14-.805 2.14-.805.426 1.078.155 1.883.078 2.078.502.546.799 1.247.799 2.104 0 3.013-1.818 3.675-3.558 3.87.284.247.528.714.528 1.454 0 1.052-.012 1.896-.012 2.156 0 .208.142.455.528.377a7.84 7.84 0 0 0 5.324-7.441c.013-4.338-3.48-7.844-7.773-7.844" clip-rule="evenodd"/>
+  </symbol>
+  <symbol id="social-icon" viewBox="0 0 20 20">
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M12.5 6.667a4.167 4.167 0 1 0-8.334 0 4.167 4.167 0 0 0 8.334 0"/>
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M2.5 16.667a5.833 5.833 0 0 1 8.75-5.053m3.837.474.513 1.035c.07.144.257.282.414.309l.93.155c.596.1.736.536.307.965l-.723.73a.64.64 0 0 0-.152.531l.207.903c.164.715-.213.991-.84.618l-.872-.52a.63.63 0 0 0-.577 0l-.872.52c-.624.373-1.003.094-.84-.618l.207-.903a.64.64 0 0 0-.152-.532l-.723-.729c-.426-.43-.289-.864.306-.964l.93-.156a.64.64 0 0 0 .412-.31l.513-1.034c.28-.562.735-.562 1.012 0"/>
+  </symbol>
+  <symbol id="x-icon" viewBox="0 0 19 19">
+    <path fill="#08060d" fill-rule="evenodd" d="M1.893 1.98c.052.072 1.245 1.769 2.653 3.77l2.892 4.114c.183.261.333.48.333.486s-.068.089-.152.183l-.522.593-.765.867-3.597 4.087c-.375.426-.734.834-.798.905a1 1 0 0 0-.118.148c0 .01.236.017.664.017h.663l.729-.83c.4-.457.796-.906.879-.999a692 692 0 0 0 1.794-2.038c.034-.037.301-.34.594-.675l.551-.624.345-.392a7 7 0 0 1 .34-.374c.006 0 .93 1.306 2.052 2.903l2.084 2.965.045.063h2.275c1.87 0 2.273-.003 2.266-.021-.008-.02-1.098-1.572-3.894-5.547-2.013-2.862-2.28-3.246-2.273-3.266.008-.019.282-.332 2.085-2.38l2-2.274 1.567-1.782c.022-.028-.016-.03-.65-.03h-.674l-.3.342a871 871 0 0 1-1.782 2.025c-.067.075-.405.458-.75.852a100 100 0 0 1-.803.91c-.148.172-.299.344-.99 1.127-.304.343-.32.358-.345.327-.015-.019-.904-1.282-1.976-2.808L6.365 1.85H1.8zm1.782.91 8.078 11.294c.772 1.08 1.413 1.973 1.425 1.984.016.017.241.02 1.05.017l1.03-.004-2.694-3.766L7.796 5.75 5.722 2.852l-1.039-.004-1.039-.004z" clip-rule="evenodd"/>
+  </symbol>
+</svg>

package/template/src/App.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import { RouterView } from 'vue-router'
+import { Toaster } from '@/components/ui/sonner'
+import { LoadingBar } from '@/components/ui/loading-bar'
+import { useThemeConfig } from '@/composables/useThemeConfig'
+
+// Initialize dynamic theme & layout variables globally
+useThemeConfig()
+</script>
+
+<template>
+  <LoadingBar />
+  <RouterView />
+  <Toaster position="top-right" rich-colors close-button />
+</template>