abckit 0.0.51 → 0.0.54

package/dist/module.d.mts

@@ -28,21 +28,11 @@ interface SetupConfig {
     };
 }
 interface AuthClientOptions {
-    /**
-     * Base URL for Better Auth client
-     * Required for Capacitor/mobile apps where the default URL is not http/https
-     * @example 'https://api.example.com'
-     */
-    baseURL?: string;
-    /**
-     * Base path for Better Auth API endpoints
-     * @default '/api/auth'
-     */
-    basePath?: string;
     /**
      * Enable Capacitor mode for mobile apps
-     * When enabled, uses Bearer token auth with @capacitor/preferences storage
-     * @default false
+     * Injects Capacitor plugin via better-auth:config:extend hook
+     * Uses Bearer token auth with @capacitor/preferences storage
+     * @default false (or true if MOBILE_BUILD env is set)
      */
     capacitor?: boolean;
     /**
@@ -197,8 +187,6 @@ declare module '@nuxt/schema' {
         abckit: {
             sentry: boolean;
             auth: {
-                baseURL?: string;
-                basePath?: string;
                 capacitor?: boolean;
                 oauthProvider?: boolean;
             };

package/dist/module.mjs

@@ -1,4 +1,4 @@
-import { updateRuntimeConfig, addTypeTemplate, addServerScanDir, addRouteMiddleware, defineNuxtModule, createResolver } from '@nuxt/kit';
+import { updateRuntimeConfig, addTypeTemplate, addServerScanDir, addPlugin, defineNuxtModule, createResolver } from '@nuxt/kit';
 import { defu } from 'defu';
 import { join } from 'node:path';
 import { networkInterfaces } from 'node:os';
@@ -28,6 +28,7 @@ function getModuleDependencies(nuxt) {
   const opts = nuxt.options.abckit;
   const isEnabled = createModuleChecker(opts);
   return {
+    "@onmax/nuxt-better-auth": { optional: false },
     "@nuxtjs/tailwindcss": { optional: !isEnabled("tailwindcss") },
     "notivue/nuxt": { optional: !isEnabled("notivue") },
     "@nuxt/icon": { optional: !isEnabled("icon") },
@@ -97,8 +98,8 @@ const ALIAS_PATHS = {
   "abckit/components": "./runtime/components",
   "abckit/shadcn": "./runtime/components/ui",
   "abckit/composables": "./runtime/composables",
-  "abckit/middleware": "./runtime/middleware",
   "abckit/plugins": "./runtime/plugins",
+  "abckit/plugins/capacitor": "./runtime/plugins/capacitor-client",
   "abckit/graphql": "./runtime/graphql",
   "abckit/stores": "./runtime/stores",
   "abckit/utils": "./runtime/utils",
@@ -115,6 +116,9 @@ const NPM_TS_PATHS = {
 const H3_TYPE_TEMPLATE = `
 declare module 'nitro/h3' {
   interface H3EventContext {
+    /**
+     * @deprecated Use getUserSession(event) or requireUserSession(event) from nuxt-better-auth
+     */
     auth: {
       user: {
         id: string
@@ -124,7 +128,7 @@ declare module 'nitro/h3' {
         image?: string
         createdAt: Date
         updatedAt: Date
-        role: string
+        role?: string
       }
       session: {
         id: string
@@ -141,8 +145,8 @@ declare module 'nitro/h3' {
       statusCode: number
       statusMessage: string
     }
-    isPremium: boolean
-    subscription: any | null
+    isPremium?: boolean
+    subscription?: any | null
   }
 }
 
@@ -169,9 +173,7 @@ async function setupRuntimeConfig(nuxt, options, isSentryEnabled) {
   nuxt.options.runtimeConfig.public.abckit = {
     sentry: isSentryEnabled,
     auth: {
-      baseURL: isMobileBuild ? mobileBaseURL : nuxt.options.runtimeConfig.public.abckit?.auth?.baseURL ?? options.auth?.baseURL,
-      basePath: nuxt.options.runtimeConfig.public.abckit?.auth?.basePath ?? options.auth?.basePath,
-      capacitor: isMobileBuild,
+      capacitor: options.auth?.capacitor ?? isMobileBuild,
       oauthProvider: options.auth?.oauthProvider ?? false
     }
   };
@@ -298,9 +300,9 @@ function setupColorMode(nuxt) {
 }
 function setupRouting(nuxt, resolve) {
   addServerScanDir(resolve("./runtime/server"));
-  addRouteMiddleware({
-    name: "auth",
-    path: resolve("./runtime/middleware/auth")
+  addPlugin({
+    src: resolve("./runtime/plugins/sentry-user.client"),
+    mode: "client"
   });
   nuxt.options.routeRules = nuxt.options.routeRules || {};
   nuxt.options.routeRules["/**"] = defu(nuxt.options.routeRules["/**"] || {}, { ssr: false });
@@ -328,6 +330,32 @@ function setupDevtools(nuxt) {
     enabled: false
   });
 }
+function setupBetterAuth(nuxt, options, _resolve) {
+  const isCapacitor = options.auth?.capacitor ?? isMobileBuild;
+  nuxt.options["nuxt-better-auth"] = defu(nuxt.options["nuxt-better-auth"] || {}, {
+    clientOnly: isCapacitor,
+    redirects: {
+      login: "/auth/login",
+      guest: "/"
+    }
+  });
+  nuxt.hook("better-auth:config:extend", async (config) => {
+    const plugins = config.plugins || [];
+    const { adminClient } = await import('better-auth/client/plugins');
+    plugins.push(adminClient());
+    if (isCapacitor) {
+      const { capacitorClient } = await import('../dist/runtime/plugins/capacitor-client.js');
+      plugins.push(capacitorClient({
+        storagePrefix: "better-auth"
+      }));
+    }
+    if (options.auth?.oauthProvider) {
+      const { oauthProviderClient } = await import('@better-auth/oauth-provider/client');
+      plugins.push(oauthProviderClient());
+    }
+    config.plugins = plugins;
+  });
+}
 
 const FEATURE_GROUPS = {
   core: {
@@ -475,8 +503,6 @@ const module$1 = defineNuxtModule({
       disk: false
     },
     auth: {
-      baseURL: isMobileBuild ? mobileBaseURL : void 0,
-      basePath: "/api/auth",
       capacitor: isMobileBuild
     },
     npm: false
@@ -512,6 +538,7 @@ const module$1 = defineNuxtModule({
     setupTypeScript(nuxt);
     setupColorMode(nuxt);
     setupRouting(nuxt, resolve);
+    setupBetterAuth(nuxt, options);
   }
 });
 

package/dist/runtime/components/ui/native-select/NativeSelectOptGroup.d.vue.ts

@@ -68,7 +68,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     'aria-expanded'?: (boolean | "true" | "false") | undefined;
     'aria-flowto'?: string | undefined | undefined;
     'aria-grabbed'?: (boolean | "true" | "false") | undefined;
-    'aria-haspopup'?: "dialog" | "menu" | (boolean | "true" | "false") | "listbox" | "tree" | "grid" | undefined;
+    'aria-haspopup'?: "dialog" | "menu" | "grid" | (boolean | "true" | "false") | "listbox" | "tree" | undefined;
     'aria-hidden'?: (boolean | "true" | "false") | undefined;
     'aria-invalid'?: (boolean | "true" | "false") | "grammar" | "spelling" | undefined;
     'aria-keyshortcuts'?: string | undefined | undefined;
@@ -262,7 +262,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     'aria-expanded'?: (boolean | "true" | "false") | undefined;
     'aria-flowto'?: string | undefined | undefined;
     'aria-grabbed'?: (boolean | "true" | "false") | undefined;
-    'aria-haspopup'?: "dialog" | "menu" | (boolean | "true" | "false") | "listbox" | "tree" | "grid" | undefined;
+    'aria-haspopup'?: "dialog" | "menu" | "grid" | (boolean | "true" | "false") | "listbox" | "tree" | undefined;
     'aria-hidden'?: (boolean | "true" | "false") | undefined;
     'aria-invalid'?: (boolean | "true" | "false") | "grammar" | "spelling" | undefined;
     'aria-keyshortcuts'?: string | undefined | undefined;

package/dist/runtime/components/ui/native-select/NativeSelectOptGroup.vue.d.ts

@@ -68,7 +68,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     'aria-expanded'?: (boolean | "true" | "false") | undefined;
     'aria-flowto'?: string | undefined | undefined;
     'aria-grabbed'?: (boolean | "true" | "false") | undefined;
-    'aria-haspopup'?: "dialog" | "menu" | (boolean | "true" | "false") | "listbox" | "tree" | "grid" | undefined;
+    'aria-haspopup'?: "dialog" | "menu" | "grid" | (boolean | "true" | "false") | "listbox" | "tree" | undefined;
     'aria-hidden'?: (boolean | "true" | "false") | undefined;
     'aria-invalid'?: (boolean | "true" | "false") | "grammar" | "spelling" | undefined;
     'aria-keyshortcuts'?: string | undefined | undefined;
@@ -262,7 +262,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     'aria-expanded'?: (boolean | "true" | "false") | undefined;
     'aria-flowto'?: string | undefined | undefined;
     'aria-grabbed'?: (boolean | "true" | "false") | undefined;
-    'aria-haspopup'?: "dialog" | "menu" | (boolean | "true" | "false") | "listbox" | "tree" | "grid" | undefined;
+    'aria-haspopup'?: "dialog" | "menu" | "grid" | (boolean | "true" | "false") | "listbox" | "tree" | undefined;
     'aria-hidden'?: (boolean | "true" | "false") | undefined;
     'aria-invalid'?: (boolean | "true" | "false") | "grammar" | "spelling" | undefined;
     'aria-keyshortcuts'?: string | undefined | undefined;

package/dist/runtime/components/ui/native-select/NativeSelectOption.d.vue.ts

@@ -70,7 +70,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     'aria-expanded'?: (boolean | "true" | "false") | undefined;
     'aria-flowto'?: string | undefined | undefined;
     'aria-grabbed'?: (boolean | "true" | "false") | undefined;
-    'aria-haspopup'?: "dialog" | "menu" | (boolean | "true" | "false") | "listbox" | "tree" | "grid" | undefined;
+    'aria-haspopup'?: "dialog" | "menu" | "grid" | (boolean | "true" | "false") | "listbox" | "tree" | undefined;
     'aria-hidden'?: (boolean | "true" | "false") | undefined;
     'aria-invalid'?: (boolean | "true" | "false") | "grammar" | "spelling" | undefined;
     'aria-keyshortcuts'?: string | undefined | undefined;
@@ -266,7 +266,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     'aria-expanded'?: (boolean | "true" | "false") | undefined;
     'aria-flowto'?: string | undefined | undefined;
     'aria-grabbed'?: (boolean | "true" | "false") | undefined;
-    'aria-haspopup'?: "dialog" | "menu" | (boolean | "true" | "false") | "listbox" | "tree" | "grid" | undefined;
+    'aria-haspopup'?: "dialog" | "menu" | "grid" | (boolean | "true" | "false") | "listbox" | "tree" | undefined;
     'aria-hidden'?: (boolean | "true" | "false") | undefined;
     'aria-invalid'?: (boolean | "true" | "false") | "grammar" | "spelling" | undefined;
     'aria-keyshortcuts'?: string | undefined | undefined;

package/dist/runtime/components/ui/native-select/NativeSelectOption.vue.d.ts

@@ -70,7 +70,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     'aria-expanded'?: (boolean | "true" | "false") | undefined;
     'aria-flowto'?: string | undefined | undefined;
     'aria-grabbed'?: (boolean | "true" | "false") | undefined;
-    'aria-haspopup'?: "dialog" | "menu" | (boolean | "true" | "false") | "listbox" | "tree" | "grid" | undefined;
+    'aria-haspopup'?: "dialog" | "menu" | "grid" | (boolean | "true" | "false") | "listbox" | "tree" | undefined;
     'aria-hidden'?: (boolean | "true" | "false") | undefined;
     'aria-invalid'?: (boolean | "true" | "false") | "grammar" | "spelling" | undefined;
     'aria-keyshortcuts'?: string | undefined | undefined;
@@ -266,7 +266,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     'aria-expanded'?: (boolean | "true" | "false") | undefined;
     'aria-flowto'?: string | undefined | undefined;
     'aria-grabbed'?: (boolean | "true" | "false") | undefined;
-    'aria-haspopup'?: "dialog" | "menu" | (boolean | "true" | "false") | "listbox" | "tree" | "grid" | undefined;
+    'aria-haspopup'?: "dialog" | "menu" | "grid" | (boolean | "true" | "false") | "listbox" | "tree" | undefined;
     'aria-hidden'?: (boolean | "true" | "false") | undefined;
     'aria-invalid'?: (boolean | "true" | "false") | "grammar" | "spelling" | undefined;
     'aria-keyshortcuts'?: string | undefined | undefined;

package/dist/runtime/error.d.vue.ts

@@ -1,11 +1,13 @@
-type __VLS_Props = {
-    error: {
-        statusCode: number;
-        statusMessage?: string;
-        message?: string;
-        stack?: string;
-    };
-};
-declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;
+declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    error: {
+        type: ObjectConstructor;
+        required: true;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    error: {
+        type: ObjectConstructor;
+        required: true;
+    };
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/runtime/error.vue

@@ -121,59 +121,59 @@ function switchUser() {
 </script>
 
 <template>
-  <div class="min-h-dvh bg-gradient-to-br from-background via-background to-muted/30 flex items-center justify-center p-6">
-    <div class="w-full max-w-md text-center space-y-8">
-      <!-- Main Content -->
-      <div class="space-y-6">
+  <div class="min-h-dvh bg-background flex flex-col safe-area-inset">
+    <!-- Mobile App Header -->
+    <header class="shrink-0 pt-safe-top border-b border-border/50">
+      <div class="h-14 flex items-center justify-between relative">
+        <!-- Back Button -->
+        <Button
+          variant="ghost"
+          size="icon"
+          class="size-14 rounded-none active:bg-muted transition-colors"
+          @click="goBack"
+        >
+          <Icon name="lucide:chevron-left" class="size-6" />
+        </Button>
+
+        <!-- Center: Error Code Badge -->
+        <div class="absolute left-1/2 -translate-x-1/2">
+          <span class="px-3 py-1 bg-destructive/10 text-destructive text-sm font-medium rounded-full">
+            {{ error.statusCode }}
+          </span>
+        </div>
+
+        <!-- Home Button -->
+        <Button
+          variant="ghost"
+          size="icon"
+          class="size-14 rounded-none active:bg-muted transition-colors"
+          @click="goHome"
+        >
+          <Icon name="lucide:home" class="size-5" />
+        </Button>
+      </div>
+    </header>
+
+    <!-- Main Content -->
+    <div class="flex-1 flex flex-col items-center justify-center px-6 pb-8">
+      <div class="w-full max-w-sm text-center space-y-6">
         <!-- Emoji Icon -->
-        <div class="text-8xl select-none">
+        <div class="text-7xl select-none animate-bounce-slow">
           {{ getErrorData().emoji }}
         </div>
 
         <!-- Title & Description -->
-        <div class="space-y-4">
-          <h1 class="text-3xl font-bold text-slate-900 dark:text-slate-100">
+        <div class="space-y-3">
+          <h1 class="text-2xl font-bold text-foreground">
             {{ getErrorData().title }}
           </h1>
-          <p class="text-lg text-slate-600 dark:text-slate-300 leading-relaxed">
+          <p class="text-base text-muted-foreground leading-relaxed">
             {{ getErrorData().description }}
           </p>
         </div>
 
-        <!-- Action Buttons -->
-        <div class="space-y-3 pt-4">
-          <Button
-            size="lg"
-            class="w-full h-12 text-base font-medium"
-            @click="getErrorData().primaryHandler"
-          >
-            {{ getErrorData().primaryAction }}
-          </Button>
-
-          <div class="flex gap-3">
-            <Button
-              variant="outline"
-              size="lg"
-              class="flex-1 h-12"
-              @click="goHome"
-            >
-              <Icon name="lucide:home" class="mr-2 size-4" />
-              Home
-            </Button>
-            <Button
-              variant="outline"
-              size="lg"
-              class="flex-1 h-12"
-              @click="goBack"
-            >
-              <Icon name="lucide:arrow-left" class="mr-2 size-4" />
-              Back
-            </Button>
-          </div>
-        </div>
-
-        <!-- Help Text -->
-        <div class="bg-white/60 dark:bg-slate-800/60 backdrop-blur-sm rounded-xl p-4 text-sm text-slate-600 dark:text-slate-400">
+        <!-- Help Text Card -->
+        <div class="bg-muted/50 rounded-2xl p-4 text-sm text-muted-foreground">
           <template v-if="error.statusCode === 401">
             Your session has ended for security purposes. Please sign in again.
           </template>
@@ -188,118 +188,78 @@ function switchUser() {
           </template>
         </div>
       </div>
+    </div>
+
+    <!-- Bottom Action Button (Mobile App Style) -->
+    <div class="flex-shrink-0 px-6 pb-6 pt-2 space-y-4">
+      <Button
+        size="lg"
+        class="w-full h-14 text-base font-semibold rounded-2xl"
+        @click="getErrorData().primaryHandler"
+      >
+        {{ getErrorData().primaryAction }}
+      </Button>
 
       <!-- Debug Panel (Development Only) -->
-      <div v-if="isDev" class="mt-8">
-        <details class="bg-slate-100 dark:bg-slate-800 rounded-xl border border-slate-200 dark:border-slate-700">
-          <summary class="cursor-pointer p-4 font-medium text-slate-700 dark:text-slate-300 flex items-center justify-between hover:bg-slate-50 dark:hover:bg-slate-750 rounded-xl">
-            <div class="flex items-center gap-2">
-              <Icon name="lucide:bug" class="size-4" />
-              Debug Information
-            </div>
-            <Button
-              size="sm"
-              variant="outline"
-              class="h-8 px-3 text-xs"
-              @click.stop="copyDebugInfo"
-            >
-              <Icon name="lucide:copy" class="size-3 mr-1" />
-              {{ copied ? "Copied!" : "Copy All" }}
-            </Button>
-          </summary>
-          <div class="p-4 pt-0 space-y-4 text-sm">
-            <!-- Quick Info -->
-            <div class="grid grid-cols-2 gap-4 p-3 bg-slate-50 dark:bg-slate-900 rounded-lg">
-              <div>
-                <div class="font-medium text-slate-500 dark:text-slate-400 text-xs mb-1">
-                  Status Code
-                </div>
-                <div class="font-mono text-slate-900 dark:text-slate-100">
-                  {{ error.statusCode }}
-                </div>
+      <details v-if="isDev" class="bg-muted rounded-2xl">
+        <summary class="cursor-pointer p-4 font-medium text-muted-foreground flex items-center justify-between rounded-2xl">
+          <div class="flex items-center gap-2">
+            <Icon name="lucide:bug" class="size-4" />
+            Debug
+          </div>
+          <Button
+            size="sm"
+            variant="outline"
+            class="h-8 px-3 text-xs rounded-xl"
+            @click.stop="copyDebugInfo"
+          >
+            <Icon name="lucide:copy" class="size-3 mr-1" />
+            {{ copied ? "Copied!" : "Copy" }}
+          </Button>
+        </summary>
+        <div class="px-4 pb-4 space-y-3 text-sm">
+          <div class="grid grid-cols-2 gap-3 p-3 bg-background rounded-xl">
+            <div>
+              <div class="text-muted-foreground text-xs mb-1">
+                Status
               </div>
-              <div>
-                <div class="font-medium text-slate-500 dark:text-slate-400 text-xs mb-1">
-                  Timestamp
-                </div>
-                <div class="font-mono text-slate-900 dark:text-slate-100 text-xs">
-                  {{ (/* @__PURE__ */ new Date()).toLocaleString() }}
-                </div>
+              <div class="font-mono text-foreground">
+                {{ error.statusCode }}
               </div>
             </div>
-
-            <!-- Error Details -->
-            <div class="space-y-3">
-              <div v-if="error.statusMessage">
-                <div class="flex items-center justify-between mb-2">
-                  <span class="font-medium text-slate-600 dark:text-slate-400">Status Message</span>
-                  <Button
-                    size="sm"
-                    variant="ghost"
-                    class="h-6 w-6 p-0"
-                    @click="copyToClipboard(error.statusMessage || '')"
-                  >
-                    <Icon name="lucide:copy" class="size-3" />
-                  </Button>
-                </div>
-                <div class="p-2 bg-slate-50 dark:bg-slate-900 rounded font-mono text-xs break-all">
-                  {{ error.statusMessage }}
-                </div>
+            <div>
+              <div class="text-muted-foreground text-xs mb-1">
+                Time
               </div>
-
-              <div v-if="error.message">
-                <div class="flex items-center justify-between mb-2">
-                  <span class="font-medium text-slate-600 dark:text-slate-400">Error Message</span>
-                  <Button
-                    size="sm"
-                    variant="ghost"
-                    class="h-6 w-6 p-0"
-                    @click="copyToClipboard(error.message || '')"
-                  >
-                    <Icon name="lucide:copy" class="size-3" />
-                  </Button>
-                </div>
-                <div class="p-2 bg-slate-50 dark:bg-slate-900 rounded font-mono text-xs break-all">
-                  {{ error.message }}
-                </div>
+              <div class="font-mono text-foreground text-xs">
+                {{ (/* @__PURE__ */ new Date()).toLocaleTimeString() }}
               </div>
+            </div>
+          </div>
 
-              <div v-if="error.stack">
-                <div class="flex items-center justify-between mb-2">
-                  <span class="font-medium text-slate-600 dark:text-slate-400">Stack Trace</span>
-                  <Button
-                    size="sm"
-                    variant="ghost"
-                    class="h-6 w-6 p-0"
-                    @click="copyToClipboard(error.stack || '')"
-                  >
-                    <Icon name="lucide:copy" class="size-3" />
-                  </Button>
-                </div>
-                <pre class="text-xs bg-slate-50 dark:bg-slate-900 rounded p-3 overflow-auto max-h-40 font-mono border">{{ error.stack }}</pre>
-              </div>
+          <div v-if="error.message" class="space-y-2">
+            <div class="flex items-center justify-between">
+              <span class="text-muted-foreground text-xs">Message</span>
+              <Button size="sm" variant="ghost" class="size-6 p-0" @click="copyToClipboard(error.message || '')">
+                <Icon name="lucide:copy" class="size-3" />
+              </Button>
+            </div>
+            <div class="p-2 bg-background rounded-xl font-mono text-xs break-all">
+              {{ error.message }}
+            </div>
+          </div>
 
-              <!-- URL Info -->
-              <div>
-                <div class="flex items-center justify-between mb-2">
-                  <span class="font-medium text-slate-600 dark:text-slate-400">Current URL</span>
-                  <Button
-                    size="sm"
-                    variant="ghost"
-                    class="h-6 w-6 p-0"
-                    @click="copyToClipboard(currentUrl)"
-                  >
-                    <Icon name="lucide:copy" class="size-3" />
-                  </Button>
-                </div>
-                <div class="p-2 bg-slate-50 dark:bg-slate-900 rounded font-mono text-xs break-all">
-                  {{ currentUrl }}
-                </div>
-              </div>
+          <div v-if="error.stack" class="space-y-2">
+            <div class="flex items-center justify-between">
+              <span class="text-muted-foreground text-xs">Stack</span>
+              <Button size="sm" variant="ghost" class="size-6 p-0" @click="copyToClipboard(error.stack || '')">
+                <Icon name="lucide:copy" class="size-3" />
+              </Button>
             </div>
+            <pre class="text-xs bg-background rounded-xl p-3 overflow-auto max-h-32 font-mono">{{ error.stack }}</pre>
           </div>
-        </details>
-      </div>
+        </div>
+      </details>
     </div>
   </div>
 </template>

package/dist/runtime/error.vue.d.ts

@@ -1,11 +1,13 @@
-type __VLS_Props = {
-    error: {
-        statusCode: number;
-        statusMessage?: string;
-        message?: string;
-        stack?: string;
-    };
-};
-declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;
+declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    error: {
+        type: ObjectConstructor;
+        required: true;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    error: {
+        type: ObjectConstructor;
+        required: true;
+    };
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/runtime/plugins/sentry-user.client.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Sentry user tracking plugin
+ * Sets user context in Sentry when authenticated
+ */
+declare const _default: import("#app").Plugin<Record<string, unknown>> & import("#app").ObjectPlugin<Record<string, unknown>>;
+export default _default;

package/dist/runtime/plugins/sentry-user.client.js

@@ -0,0 +1,13 @@
+import { defineNuxtPlugin, useRuntimeConfig } from "#app";
+import { useUserSession } from "#imports";
+import { watch } from "vue";
+export default defineNuxtPlugin(() => {
+  const config = useRuntimeConfig();
+  if (!config.public.abckit?.sentry)
+    return;
+  const { user } = useUserSession();
+  watch(user, async (currentUser) => {
+    const Sentry = await import("@sentry/nuxt");
+    Sentry.setUser(currentUser ? { id: currentUser.id } : null);
+  }, { immediate: true });
+});

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "abckit",
   "type": "module",
-  "version": "0.0.51",
+  "version": "0.0.54",
   "description": "Nuxt 4 module — UI components, auth, storage, GraphQL",
   "author": "productdevbook",
   "license": "MIT",
@@ -62,6 +62,10 @@
     "./colada": {
       "types": "./dist/runtime/colada.options.d.ts",
       "import": "./dist/runtime/colada.options.js"
+    },
+    "./plugins/capacitor": {
+      "types": "./dist/runtime/plugins/capacitor-client.d.ts",
+      "import": "./dist/runtime/plugins/capacitor-client.js"
     }
   },
   "types": "./dist/module.d.mts",
@@ -77,6 +81,7 @@
   },
   "peerDependencies": {
     "@better-auth/oauth-provider": "^1.4.12",
+    "@onmax/nuxt-better-auth": "^0.0.2-alpha.17",
     "@capacitor/android": "^8.0.1",
     "@capacitor/app": "^8.0.0",
     "@capacitor/browser": "^8.0.0",
@@ -154,6 +159,9 @@
     "@better-auth/oauth-provider": {
       "optional": true
     },
+    "@onmax/nuxt-better-auth": {
+      "optional": true
+    },
     "@capacitor/android": {
       "optional": true
     },