falak-app-duo 1.1.5 → 1.3.0

package/bin/falak-app-duo

@@ -540,6 +540,11 @@ async function main() {
       : "1 (normal demo user)"
     : "none";
 
+  // Data mode: demo apps are wired fully to the bundled demo data (auth +
+  // profile/settings + entity lists) and need no backend; everything else
+  // goes straight to the Laravel API.
+  const dataMode = demoAccounts || (demoEntities && demoEntities.length) ? "demo" : "live";
+
   console.log(
     chalk.gray(`  Languages wired: ${locales.map((l) => LOCALE_LABELS[l]).join(", ")}${hasRtl ? " (RTL default)" : ""}`)
   );
@@ -548,11 +553,13 @@ async function main() {
       `  Roles: ${roles && roles.length ? roles.join(", ") : "none"} | Demo accounts: ${demoAccountsSummary} | Demo data: ${demoEntities && demoEntities.length ? demoEntities.join(", ") : "none"}`
     )
   );
+  console.log(chalk.gray(`  Data mode: ${dataMode}${dataMode === "demo" ? " (no backend needed)" : " (Laravel API)"}`));
 
   // Generate a real .env from .env.example with a fresh encryption key
   const envExamplePath = path.join(targetDir, ".env.example");
   let envContent = await fs.readFile(envExamplePath, "utf-8");
   envContent = envContent
+    .replace("__DATA_MODE__", dataMode)
     .replace("__API_BASE_URL__", answers.apiBaseUrl || "http://localhost:8000/api")
     .replace("__AES_KEY__", randomHex(32)) // 256-bit key, hex-encoded
     .replace("__AES_IV__", randomHex(16)); // 128-bit IV, hex-encoded
@@ -561,9 +568,15 @@ async function main() {
   console.log(chalk.green(`\n  Scaffolded ./${projectName} successfully.\n`));
   console.log(
     chalk.gray(
-      "  Fill in VITE_API_KEY, VITE_ABLY_PUBLIC_KEY, Brevo backend routes, and review .env before shipping.\n"
+      "  Fill in VITE_API_KEY, VITE_ABLY_PUBLIC_KEY, Brevo backend routes, and review .env before shipping."
     )
   );
+  if (dataMode === "demo") {
+    console.log(chalk.gray("  Data mode: demo — the app runs on bundled demo data (no API keys needed)."));
+    console.log(chalk.gray("  Flip VITE_DATA_MODE=live in .env to wire the app to your Laravel backend.\n"));
+  } else {
+    console.log(chalk.gray("\n  Data mode: live — the app calls your Laravel backend.\n"));
+  }
 
   const runChoice = opts.yes || hasFeatureFlags
     ? "install"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "falak-app-duo",
-  "version": "1.1.5",
+  "version": "1.3.0",
   "description": "Vue 3 boilerplate scaffolder — Ably (realtime), Brevo, AES-256, Arabic/RTL, and a Laravel API client (API key + user token auth). No Firebase, no Groq/Paymob on the frontend (Groq is backend-only; Paymob dropped).",
   "type": "module",
   "bin": {

package/templates/default/.env.example

@@ -1,5 +1,12 @@
+# --- Data source ---
+# demo: the app runs entirely on bundled demo data (auth, profile, settings and
+#       entity lists) with no backend required.
+# live: every request goes to the Laravel API below.
+# The scaffolder sets this to "demo" when demo accounts/demo data were selected.
+VITE_DATA_MODE=__DATA_MODE__
+
 # --- Laravel API (Falak Bridge or your own backend) ---
-# Base URL of your Laravel API
+# Base URL of your Laravel API (not used in demo mode)
 VITE_API_BASE_URL=__API_BASE_URL__
 # Static API key issued to this client app (sent as X-API-Key on every request)
 VITE_API_KEY=replace-with-your-app-api-key

package/templates/default/index.html

@@ -4,6 +4,25 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Falak App</title>
+    <script>
+      // FOUC guard: paint with the right theme before the app mounts.
+      // Mirrors src/theme.js.getTheme() — keep in sync.
+      (function () {
+        var s;
+        try {
+          s = localStorage.getItem("falak_theme");
+        } catch (e) {}
+        if (s === "light") {
+          document.documentElement.classList.add("light");
+        } else if (s !== "dark") {
+          try {
+            if (window.matchMedia("(prefers-color-scheme: light)").matches) {
+              document.documentElement.classList.add("light");
+            }
+          } catch (e) {}
+        }
+      })();
+    </script>
   </head>
   <body>
     <div id="app"></div>

package/templates/default/package.json

@@ -14,9 +14,11 @@
     "axios": "^1.7.7",
     "crypto-js": "^4.2.0",
     "laravel-echo": "^1.16.1",
+    "otplib": "^12.0.1",
     "pinia": "^2.2.2",
     "primeicons": "^7.0.0",
     "primevue": "^4.5.5",
+    "qrcode": "^1.5.4",
     "vue": "^3.5.0",
     "vue-i18n": "^9.14.0",
     "vue-router": "^4.4.5"

package/templates/default/src/App.vue

@@ -1,9 +1,10 @@
 <script setup>
-import { computed } from "vue";
+import { computed, ref } from "vue";
 import { useI18n } from "vue-i18n";
 import { useRoute, useRouter, RouterLink, RouterView } from "vue-router";
 import { setLocale, SUPPORTED_LOCALES } from "@/i18n";
 import { useAuthStore } from "@/stores/auth";
+import { getTheme, toggleTheme } from "@/theme";
 import AppBackdrop from "@/components/AppBackdrop.vue";
 
 const { t, locale } = useI18n();
@@ -11,6 +12,7 @@ const locales = SUPPORTED_LOCALES;
 const auth = useAuthStore();
 const route = useRoute();
 const router = useRouter();
+const theme = ref(getTheme());
 
 // Auth pages hide the app chrome and go full-screen.
 const authPageNames = ["login", "register", "forgot-password"];
@@ -34,7 +36,7 @@ async function logout() {
     <div class="relative z-10 flex min-h-screen flex-col">
       <header
         v-if="!isAuthPage"
-        class="sticky top-0 z-30 border-b border-white/10 bg-[#0b0f19]/70 backdrop-blur-xl"
+        class="sticky top-0 z-30 border-b border-edge bg-page/70 backdrop-blur-xl"
       >
         <nav class="mx-auto flex w-full max-w-6xl flex-wrap items-center justify-between gap-x-6 gap-y-3 px-4 py-3 sm:px-6">
           <RouterLink to="/" class="group flex items-center gap-2.5">
@@ -43,14 +45,14 @@ async function logout() {
             >
               F
             </span>
-            <span class="text-lg font-bold text-white">{{ t("app.name") }}</span>
+            <span class="text-lg font-bold text-ink">{{ t("app.name") }}</span>
           </RouterLink>
 
           <div class="flex flex-1 flex-wrap items-center justify-end gap-1.5 text-sm">
             <RouterLink
               to="/"
               class="rounded-full px-3 py-1.5 font-medium transition"
-              :class="route.name === 'home' ? 'bg-emerald-500/15 text-emerald-200 ring-1 ring-emerald-300/30' : 'text-gray-300 hover:bg-white/5 hover:text-white'"
+              :class="route.name === 'home' ? 'bg-emerald-500/15 text-emerald-200 ring-1 ring-emerald-300/30' : 'text-ink2 hover:bg-glass hover:text-ink'"
             >
               {{ t("nav.home") }}
             </RouterLink>
@@ -60,7 +62,7 @@ async function logout() {
                 :key="link.to"
                 :to="link.to"
                 class="rounded-full px-3 py-1.5 font-medium transition"
-                :class="route.path === link.to ? 'bg-emerald-500/15 text-emerald-200 ring-1 ring-emerald-300/30' : 'text-gray-300 hover:bg-white/5 hover:text-white'"
+                :class="route.path === link.to ? 'bg-emerald-500/15 text-emerald-200 ring-1 ring-emerald-300/30' : 'text-ink2 hover:bg-glass hover:text-ink'"
               >
                 {{ link.label }}
               </RouterLink>
@@ -68,6 +70,21 @@ async function logout() {
           </div>
 
           <div class="flex items-center gap-2.5">
+            <button
+              type="button"
+              :title="t(theme === 'light' ? 'theme.light' : 'theme.dark')"
+              :aria-label="t(theme === 'light' ? 'theme.light' : 'theme.dark')"
+              class="grid h-9 w-9 place-items-center rounded-full border border-edge2 bg-glass text-ink2 transition hover:bg-glass3 hover:text-ink"
+              @click="theme = toggleTheme()"
+            >
+              <svg v-if="theme === 'light'" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-4.5 w-4.5">
+                <circle cx="12" cy="12" r="4" />
+                <path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41" />
+              </svg>
+              <svg v-else viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-4.5 w-4.5">
+                <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79Z" />
+              </svg>
+            </button>
             <RouterLink
               v-if="!auth.userToken"
               to="/login"
@@ -82,7 +99,7 @@ async function logout() {
               v-if="locales.length > 1"
               :value="locale"
               @change="setLocale($event.target.value)"
-              class="rounded-full border border-white/15 bg-white/5 px-2.5 py-1.5 text-sm font-medium text-gray-300 outline-none transition hover:bg-white/10 hover:text-white"
+              class="rounded-full border border-edge2 bg-glass px-2.5 py-1.5 text-sm font-medium text-ink2 outline-none transition hover:bg-glass3 hover:text-ink"
             >
               <option v-for="l in locales" :key="l.code" :value="l.code">{{ l.label }}</option>
             </select>

package/templates/default/src/assets/main.css

@@ -2,6 +2,82 @@
 @tailwind components;
 @tailwind utilities;
 
+/* ============================================================
+   Theme tokens
+   Dark is the default (no class on <html>); light is applied by
+   toggling `.light` on <html> (see src/theme.js + the FOUC guard
+   in index.html). Components use ONLY these semantic tokens — never
+   hardcoded dark-palette utilities — so a single var flip re-themes
+   the whole app. Keep `html { }` (dark) and `html.light { }` in sync.
+   ============================================================ */
+
+:root {
+  --c-page: 11 15 25; /* #0b0f19 body/backdrop base */
+  --c-page-2: 13 21 32; /* #0d1520 raised surface */
+  --glass-a: 0.05;
+  --glass-a-2: 0.08;
+  --glass-a-3: 0.1;
+  --c-ink: 243 244 246; /* gray-100 primary text */
+  --c-ink-2: 229 231 235; /* gray-200 secondary text */
+  --c-ink-3: 156 163 175; /* gray-400 muted text */
+  --c-mute: 107 114 128; /* gray-500 faint text */
+  --c-edge: rgba(255, 255, 255, 0.1);
+  --c-edge-2: rgba(255, 255, 255, 0.15);
+  --c-edge-3: rgba(255, 255, 255, 0.2);
+  /* Pale "soft accent" text tones (glow-y on dark, deepened on light) */
+  --c-em-200: 167 243 208; /* emerald-200 */
+  --c-em-300: 110 231 183; /* emerald-300 */
+  --c-teal-200: 153 246 228; /* teal-200 */
+  --c-teal-300: 94 234 212; /* teal-300 */
+  --c-cyan-200: 165 243 252; /* cyan-200 */
+  --c-cyan-300: 103 232 249; /* cyan-300 */
+  --c-sky-200: 186 230 253; /* sky-200 */
+  --c-amber-200: 254 240 138; /* amber-200 */
+  --c-amber-300: 252 211 77; /* amber-300 */
+  --c-orange-300: 253 186 116; /* orange-300 */
+  --c-rose-200: 254 205 211; /* rose-200 */
+  --c-rose-300: 253 164 175; /* rose-300 */
+  --c-rose-400: 251 113 133; /* rose-400 */
+  --glass-shine: rgba(255, 255, 255, 0.08);
+  --ripple: rgba(255, 255, 255, 0.4);
+  --grid-dot: rgba(255, 255, 255, 0.06);
+  --vignette: rgba(5, 8, 15, 0.55);
+  --scroll-thumb: rgba(255, 255, 255, 0.14);
+}
+
+html.light {
+  --c-page: 248 250 252; /* slate-50 */
+  --c-page-2: 226 232 240; /* slate-200 */
+  --glass-a: 0.72;
+  --glass-a-2: 0.8;
+  --glass-a-3: 0.85;
+  --c-ink: 30 41 59; /* slate-800 */
+  --c-ink-2: 51 65 85; /* slate-700 */
+  --c-ink-3: 71 85 105; /* slate-600 */
+  --c-mute: 100 116 139; /* slate-500 */
+  --c-edge: rgba(15, 23, 42, 0.08);
+  --c-edge-2: rgba(15, 23, 42, 0.14);
+  --c-edge-3: rgba(15, 23, 42, 0.2);
+  --c-em-200: 6 95 70; /* emerald-800 */
+  --c-em-300: 4 120 87; /* emerald-700 */
+  --c-teal-200: 19 78 74; /* teal-800 */
+  --c-teal-300: 15 118 110; /* teal-700 */
+  --c-cyan-200: 21 94 117; /* cyan-800 */
+  --c-cyan-300: 14 116 144; /* cyan-700 */
+  --c-sky-200: 20 83 136; /* sky-800 */
+  --c-amber-200: 146 64 14; /* amber-800 */
+  --c-amber-300: 180 83 9; /* amber-700 */
+  --c-orange-300: 194 65 12; /* orange-700 */
+  --c-rose-200: 159 18 57; /* rose-800 */
+  --c-rose-300: 190 18 60; /* rose-700 */
+  --c-rose-400: 225 29 72; /* rose-600 */
+  --glass-shine: rgba(255, 255, 255, 0.35);
+  --ripple: rgba(2, 6, 23, 0.14);
+  --grid-dot: rgba(2, 6, 23, 0.09);
+  --vignette: rgba(100, 116, 139, 0.18);
+  --scroll-thumb: rgba(2, 6, 23, 0.22);
+}
+
 /* Registered once for the animated gradient-border effect (Tailwind v3 has no
    @property in config, so it lives here in plain CSS next to the keyframes). */
 @property --tw-border-angle {
@@ -27,10 +103,10 @@
   html,
   body {
     font-family: "Almarai", "IBM Plex Sans Arabic", sans-serif;
-    background-color: #0b0f19;
+    background-color: rgb(var(--c-page));
   }
   body {
-    color: rgb(243 244 246 / 1);
+    color: rgb(var(--c-ink));
   }
   ::selection {
     background: rgb(16 185 129 / 0.35);
@@ -38,7 +114,7 @@
   }
   * {
     scrollbar-width: thin;
-    scrollbar-color: rgb(255 255 255 / 0.14) transparent;
+    scrollbar-color: var(--scroll-thumb) transparent;
   }
   *::-webkit-scrollbar {
     width: 8px;
@@ -46,17 +122,17 @@
   }
   *::-webkit-scrollbar-thumb {
     border-radius: 9999px;
-    background: rgb(255 255 255 / 0.14);
+    background: var(--scroll-thumb);
   }
 }
 
 @layer components {
   /* Reusable glass surfaces — the app's core visual language */
   .glass-card {
-    @apply relative rounded-2xl border border-white/10 bg-white/[0.05] shadow-2xl shadow-black/30 backdrop-blur-xl backdrop-saturate-150;
+    @apply relative rounded-2xl border border-edge bg-glass shadow-2xl shadow-black/30 backdrop-blur-xl backdrop-saturate-150;
   }
   .glass-card-hover {
-    @apply transition-all duration-300 ease-out hover:-translate-y-1 hover:border-white/20 hover:bg-white/[0.08] hover:shadow-emerald-500/10;
+    @apply transition-all duration-300 ease-out hover:-translate-y-1 hover:border-edge3 hover:bg-glass2 hover:shadow-emerald-500/10;
   }
 
   /* Fine hairline top highlight so glass reads as "lit" from above */
@@ -68,16 +144,12 @@
     position: absolute;
     inset: 0;
     border-radius: inherit;
-    background: linear-gradient(
-      180deg,
-      rgb(255 255 255 / 0.08) 0%,
-      rgb(255 255 255 / 0) 32%
-    );
+    background: linear-gradient(180deg, var(--glass-shine) 0%, rgba(0, 0, 0, 0) 32%);
     pointer-events: none;
   }
 
   .glass-input {
-    @apply w-full rounded-xl border border-white/10 bg-white/[0.05] px-4 py-2.5 text-sm text-gray-100 placeholder-gray-500 outline-none ring-1 ring-transparent transition focus:border-emerald-400/50 focus:bg-white/[0.08] focus:ring-2 focus:ring-emerald-400/20;
+    @apply w-full rounded-xl border border-edge bg-glass px-4 py-2.5 text-sm text-ink placeholder-mute outline-none ring-1 ring-transparent transition focus:border-emerald-400/50 focus:bg-glass2 focus:ring-2 focus:ring-emerald-400/20 caret-emerald-500;
   }
   .glass-select {
     @apply glass-input appearance-none pe-10;
@@ -88,11 +160,11 @@
   }
 
   .btn-primary {
-    @apply inline-flex items-center justify-center gap-2 rounded-xl bg-gradient-to-r from-emerald-500 via-teal-500 to-cyan-500 bg-[length:200%_200%] px-4 py-2.5 text-sm font-semibold text-white shadow-lg shadow-emerald-500/25 ring-1 ring-white/10 transition-all duration-200 hover:brightness-110 hover:shadow-emerald-400/40 hover:ring-white/20 animate-gradient-pan motion-reduce:animate-none disabled:cursor-not-allowed disabled:opacity-50 active:translate-y-px;
+    @apply inline-flex items-center justify-center gap-2 rounded-xl bg-gradient-to-r from-emerald-500 via-teal-500 to-cyan-500 bg-[length:200%_200%] px-4 py-2.5 text-sm font-semibold text-white shadow-lg shadow-emerald-500/25 ring-1 ring-edge transition-all duration-200 hover:brightness-110 hover:shadow-emerald-400/40 hover:ring-edge3 animate-gradient-pan motion-reduce:animate-none disabled:cursor-not-allowed disabled:opacity-50 active:translate-y-px;
   }
 
   .btn-ghost {
-    @apply inline-flex items-center justify-center gap-2 rounded-xl border border-white/15 bg-white/5 px-4 py-2.5 text-sm font-semibold text-gray-200 shadow-sm backdrop-blur transition-all duration-200 hover:bg-white/10 hover:text-white disabled:cursor-not-allowed disabled:opacity-50;
+    @apply inline-flex items-center justify-center gap-2 rounded-xl border border-edge2 bg-glass px-4 py-2.5 text-sm font-semibold text-ink2 shadow-sm backdrop-blur transition-all duration-200 hover:bg-glass3 hover:text-ink disabled:cursor-not-allowed disabled:opacity-50;
   }
 
   /* Bright brand accent button — CTA on auth/settings pages */
@@ -105,16 +177,17 @@
     @apply relative isolate overflow-hidden;
   }
   .ripple {
-    @apply pointer-events-none absolute rounded-full bg-white/40;
+    @apply pointer-events-none absolute rounded-full;
+    background: var(--ripple);
     transform: translate(-50%, -50%) scale(0);
     animation: ripple-expand 0.6s ease-out forwards;
   }
 
   .field-label {
-    @apply mb-1.5 block text-sm font-medium text-gray-300;
+    @apply mb-1.5 block text-sm font-medium text-ink;
   }
   .field-hint {
-    @apply mt-1 block text-xs text-gray-500;
+    @apply mt-1 block text-xs text-mute;
   }
 
   /* Two-stop gradient headline text (2 stops only — 3+ reads muddy at text size) */
@@ -127,7 +200,7 @@
 
   /* Small pill / chip */
   .chip {
-    @apply inline-flex items-center gap-1.5 rounded-full border border-white/10 bg-white/5 px-3 py-1 text-xs font-medium text-gray-300;
+    @apply inline-flex items-center gap-1.5 rounded-full border border-edge bg-glass px-3 py-1 text-xs font-medium text-ink2;
   }
 
   /* Section heading with gradient marker bar */
@@ -141,7 +214,7 @@
 
   /* Fine dotted grid used by the backdrop and hero */
   .bg-grid {
-    background-image: radial-gradient(rgb(255 255 255 / 0.06) 1px, transparent 1px);
+    background-image: radial-gradient(var(--grid-dot) 1px, transparent 1px);
     background-size: 26px 26px;
   }
 }

package/templates/default/src/components/AppBackdrop.vue

@@ -8,7 +8,7 @@ defineOptions({ name: "AppBackdrop" });
 <template>
   <div
     aria-hidden="true"
-    class="pointer-events-none fixed inset-0 -z-10 overflow-hidden bg-[#0b0f19]"
+    class="pointer-events-none fixed inset-0 -z-10 overflow-hidden bg-page"
   >
     <!-- Aurora mesh base -->
     <div
@@ -38,6 +38,6 @@ defineOptions({ name: "AppBackdrop" });
     ></div>
 
     <!-- Vignette so content keeps contrast -->
-    <div class="absolute inset-0 bg-[radial-gradient(ellipse_at_center,transparent_55%,rgba(5,8,15,0.55))]"></div>
+    <div class="absolute inset-0 bg-[radial-gradient(ellipse_at_center,transparent_55%,var(--vignette))]"></div>
   </div>
 </template>

package/templates/default/src/components/AuthLayout.vue

@@ -33,7 +33,7 @@ const highlights = computed(() => [
 <template>
   <div class="grid min-h-screen lg:grid-cols-2">
     <!-- Brand panel (large screens) -->
-    <aside class="relative hidden overflow-hidden border-e border-white/10 lg:flex lg:flex-col lg:justify-between lg:p-14">
+    <aside class="relative hidden overflow-hidden border-e border-edge lg:flex lg:flex-col lg:justify-between lg:p-14">
       <div class="absolute -start-24 -top-24 h-80 w-80 rounded-full bg-emerald-500/20 blur-[100px] animate-float motion-reduce:animate-none"></div>
       <div class="absolute -end-20 bottom-10 h-72 w-72 rounded-full bg-rose-500/15 blur-[100px] animate-float motion-reduce:animate-none" style="animation-delay: -3.5s"></div>
 
@@ -41,7 +41,7 @@ const highlights = computed(() => [
         <span class="grid h-11 w-11 place-items-center rounded-2xl bg-gradient-to-br from-emerald-400 to-teal-500 text-xl font-black text-emerald-950 shadow-lg shadow-emerald-500/30">
           F
         </span>
-        <span class="text-xl font-bold text-white">{{ t("app.name") }}</span>
+        <span class="text-xl font-bold text-ink">{{ t("app.name") }}</span>
       </div>
 
       <div class="relative">
@@ -53,11 +53,11 @@ const highlights = computed(() => [
           <span class="text-xs font-medium tracking-wide text-emerald-300 uppercase">{{ t("auth.brand.badge") }}</span>
         </div>
 
-        <h1 class="text-4xl font-extrabold leading-tight tracking-tight text-white">
+        <h1 class="text-4xl font-extrabold leading-tight tracking-tight text-ink">
           {{ t("auth.brand.headline1") }}
           <span class="text-gradient">{{ t("auth.brand.headline2") }}</span>
         </h1>
-        <p class="mt-4 max-w-md text-sm leading-relaxed text-gray-400">
+        <p class="mt-4 max-w-md text-sm leading-relaxed text-mute">
           {{ t("auth.brand.tagline") }}
         </p>
 
@@ -65,9 +65,9 @@ const highlights = computed(() => [
           <li
             v-for="h in highlights"
             :key="h.title"
-            class="flex items-start gap-3 rounded-xl border border-white/10 bg-white/[0.03] p-3.5 backdrop-blur"
+            class="flex items-start gap-3 rounded-xl border border-edge bg-glass p-3.5 backdrop-blur"
           >
-            <span class="grid h-9 w-9 shrink-0 place-items-center rounded-lg bg-gradient-to-br from-emerald-400/20 to-teal-500/20 text-emerald-200 ring-1 ring-white/10">
+            <span class="grid h-9 w-9 shrink-0 place-items-center rounded-lg bg-gradient-to-br from-emerald-400/20 to-teal-500/20 text-emerald-200 ring-1 ring-edge">
               <svg v-if="h.icon === 'realtime'" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-5 w-5">
                 <circle cx="12" cy="12" r="9" />
                 <path d="M12 3a9 9 0 0 1 9 9" opacity=".4" />
@@ -84,14 +84,14 @@ const highlights = computed(() => [
               </svg>
             </span>
             <div>
-              <p class="text-sm font-semibold text-white">{{ h.title }}</p>
-              <p class="mt-0.5 text-xs text-gray-500">{{ h.desc }}</p>
+              <p class="text-sm font-semibold text-ink">{{ h.title }}</p>
+              <p class="mt-0.5 text-xs text-mute">{{ h.desc }}</p>
             </div>
           </li>
         </ul>
       </div>
 
-      <p class="relative text-xs text-gray-500">
+      <p class="relative text-xs text-mute">
         {{ t("auth.brand.footer") }}
       </p>
     </aside>
@@ -103,8 +103,8 @@ const highlights = computed(() => [
           <div class="mx-auto mb-5 grid h-12 w-12 place-items-center rounded-2xl bg-gradient-to-br from-emerald-400 to-teal-500 text-2xl font-black text-emerald-950 shadow-lg shadow-emerald-500/30 lg:hidden">
             F
           </div>
-          <h1 class="text-2xl font-bold text-white">{{ title }}</h1>
-          <p v-if="subtitle" class="mt-2 text-sm text-gray-400">{{ subtitle }}</p>
+          <h1 class="text-2xl font-bold text-ink">{{ title }}</h1>
+          <p v-if="subtitle" class="mt-2 text-sm text-mute">{{ subtitle }}</p>
         </div>
         <GlassCard spotlight class="p-6 sm:p-8">
           <slot />

package/templates/default/src/components/ToggleSwitch.vue

@@ -19,7 +19,7 @@ function toggle() {
     :class="
       modelValue
         ? 'border-emerald-300/40 bg-gradient-to-r from-emerald-500 to-teal-500'
-        : 'border-white/15 bg-white/10'
+        : 'border-edge2 bg-glass'
     "
     @click="toggle"
   >

package/templates/default/src/components/settings/AIAgentDialog.vue

@@ -23,7 +23,6 @@ const form = ref({
   model: user?.ai_agent?.model ?? "llama-3.3-70b-versatile",
   temperature: user?.ai_agent?.temperature ?? 0.7,
   reasoning: user?.ai_agent?.reasoning ?? false,
-  system_prompt: user?.ai_agent?.system_prompt ?? "",
 });
 
 const models = [
@@ -63,8 +62,8 @@ async function save() {
           AI
         </span>
         <div>
-          <h2 class="text-base font-semibold text-white">{{ t("aiAgent.key.title") }}</h2>
-          <p class="text-xs text-gray-500">{{ t("aiAgent.key.subtitle") }}</p>
+          <h2 class="text-base font-semibold text-ink">{{ t("aiAgent.key.title") }}</h2>
+          <p class="text-xs text-mute">{{ t("aiAgent.key.subtitle") }}</p>
         </div>
         <span class="ms-auto inline-flex items-center gap-1.5 rounded-full bg-emerald-500/15 px-2.5 py-1 text-[10px] font-semibold uppercase tracking-wide text-emerald-300">
           <span class="relative inline-flex h-1.5 w-1.5">
@@ -75,16 +74,16 @@ async function save() {
         </span>
       </div>
 
-      <ol class="mt-5 flex flex-col gap-3">
-        <li
+      <div class="mt-5 flex flex-col gap-3 rounded-xl border border-edge bg-glass p-4">
+        <div
           v-for="(step, i) in steps"
           :key="step.num"
-          class="group flex items-start gap-3.5 rounded-xl border border-white/10 bg-white/[0.03] p-4 transition hover:border-emerald-300/25 hover:bg-white/[0.05]"
+          class="flex items-start gap-3.5"
         >
           <span class="relative grid h-8 w-8 shrink-0 place-items-center rounded-full bg-gradient-to-br from-emerald-500/20 to-teal-500/20 font-bold text-emerald-300 ring-1 ring-emerald-300/30">
             {{ step.num }}
           </span>
-          <span class="grid h-8 w-8 shrink-0 place-items-center rounded-lg bg-white/5 text-gray-400 ring-1 ring-white/10 transition group-hover:text-emerald-300">
+          <span class="grid h-8 w-8 shrink-0 place-items-center rounded-lg bg-glass text-mute ring-1 ring-edge">
             <svg v-if="step.icon === 'account'" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4">
               <circle cx="12" cy="8" r="4" />
               <path d="M4 21a8 8 0 0 1 16 0" />
@@ -101,9 +100,9 @@ async function save() {
               <path d="M12 16v4M8 20h8" />
             </svg>
           </span>
-          <span class="flex-1 pt-0.5 text-sm leading-relaxed text-gray-300">{{ t(`aiAgent.key.steps.${step.num}`) }}</span>
-        </li>
-      </ol>
+          <span class="flex-1 pt-0.5 text-sm leading-relaxed text-ink2">{{ t(`aiAgent.key.steps.${step.num}`) }}</span>
+        </div>
+      </div>
 
       <div class="mt-4 flex items-start gap-2.5 rounded-xl border border-amber-300/20 bg-amber-500/10 p-3.5 text-xs leading-relaxed text-amber-200">
         <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mt-0.5 h-4 w-4 shrink-0">
@@ -118,8 +117,8 @@ async function save() {
     <GlassCard spotlight class="p-4 sm:p-6">
       <div class="flex items-center justify-between gap-4">
         <div>
-          <h2 class="text-base font-semibold text-white">{{ t("aiAgent.settings.title") }}</h2>
-          <p class="mt-1 text-sm text-gray-400">{{ t("aiAgent.settings.hint") }}</p>
+          <h2 class="text-base font-semibold text-ink">{{ t("aiAgent.settings.title") }}</h2>
+          <p class="mt-1 text-sm text-mute">{{ t("aiAgent.settings.hint") }}</p>
         </div>
         <ToggleSwitch v-model="form.enabled" />
       </div>
@@ -133,15 +132,15 @@ async function save() {
               :key="m.id"
               type="button"
               class="flex items-center gap-3 rounded-xl border px-3.5 py-3 text-start transition"
-              :class="form.model === m.id ? 'border-emerald-300/50 bg-emerald-500/15 shadow-lg shadow-emerald-500/10' : 'border-white/10 bg-white/[0.03] hover:bg-white/[0.07]'"
+              :class="form.model === m.id ? 'border-emerald-300/50 bg-emerald-500/15 shadow-lg shadow-emerald-500/10' : 'border-edge bg-glass hover:bg-glass2'"
               @click="form.model = m.id"
             >
-              <span class="grid h-7 w-7 shrink-0 place-items-center rounded-lg text-[10px] font-black" :class="form.model === m.id ? 'bg-emerald-400/20 text-emerald-300' : 'bg-white/5 text-gray-500'">
+              <span class="grid h-7 w-7 shrink-0 place-items-center rounded-lg text-[10px] font-black" :class="form.model === m.id ? 'bg-emerald-400/20 text-emerald-300' : 'bg-glass text-mute'">
                 {{ m.tag.slice(0, 2) }}
               </span>
               <span class="min-w-0">
-                <span class="block truncate font-mono text-xs font-medium text-gray-200">{{ m.id }}</span>
-                <span class="mt-0.5 flex items-center gap-1 text-[10px] text-gray-500">
+                <span class="block truncate font-mono text-xs font-medium text-ink2">{{ m.id }}</span>
+                <span class="mt-0.5 flex items-center gap-1 text-[10px] text-mute">
                   <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-3 w-3">
                     <path d="M13 2 3 14h9l-1 8 10-12h-9l1-8z" />
                   </svg>
@@ -168,26 +167,16 @@ async function save() {
             step="0.1"
             class="mt-2 w-full accent-emerald-500"
           />
-          <div class="flex justify-between text-xs text-gray-500">
+          <div class="flex justify-between text-xs text-mute">
             <span>{{ t("aiAgent.temperatureLow") }}</span>
             <span>{{ t("aiAgent.temperatureHigh") }}</span>
           </div>
         </label>
 
-        <label class="block">
-          <span class="field-label">{{ t("aiAgent.systemPrompt") }}</span>
-          <textarea
-            v-model="form.system_prompt"
-            rows="4"
-            class="glass-input resize-y font-mono text-xs"
-            :placeholder="t('aiAgent.systemPromptPlaceholder')"
-          ></textarea>
-        </label>
-
-        <label class="flex cursor-pointer items-center gap-3 rounded-xl border border-white/10 bg-white/[0.03] p-4">
+        <label class="flex cursor-pointer items-center gap-3 rounded-xl border border-edge bg-glass p-4">
           <ToggleSwitch v-model="form.reasoning" />
-          <span class="text-sm text-gray-300">{{ t("aiAgent.reasoning") }}</span>
-          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="ms-auto h-4 w-4 text-gray-500">
+          <span class="text-sm text-ink2">{{ t("aiAgent.reasoning") }}</span>
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="ms-auto h-4 w-4 text-mute">
             <circle cx="12" cy="12" r="10" />
             <path d="M9.1 9a3 3 0 0 1 5.8 1c0 2-3 3-3 3" />
             <path d="M12 17h.01" />