@authon/nuxt 0.1.19 → 0.2.1

package/dist/index.cjs

@@ -24,6 +24,7 @@ __export(index_exports, {
   createAuthMiddleware: () => createAuthMiddleware,
   createAuthonPlugin: () => createAuthonPlugin,
   default: () => authonModule,
+  renderSocialButtons: () => renderSocialButtons,
   useAuthon: () => useAuthon,
   useUser: () => useUser
 });
@@ -92,11 +93,121 @@ function createAuthMiddleware(authon, redirectTo = "/sign-in") {
     return void 0;
   };
 }
+
+// src/SocialButtons.ts
+var import_shared = require("@authon/shared");
+var import_js2 = require("@authon/js");
+function renderSocialButtons(options) {
+  const {
+    client,
+    container,
+    onSuccess,
+    onError,
+    compact = false,
+    gap,
+    labels,
+    iconSize,
+    borderRadius = 10,
+    height = 48,
+    size = 48
+  } = options;
+  const resolvedGap = gap ?? (compact ? 12 : 10);
+  const resolvedIconSize = iconSize ?? (compact ? 24 : 20);
+  let loadingProvider = null;
+  let buttons = [];
+  const handleClick = async (provider, btn) => {
+    if (loadingProvider) return;
+    loadingProvider = provider;
+    btn.innerHTML = '<span style="display:inline-block;width:16px;height:16px;border:2px solid currentColor;border-top-color:transparent;border-radius:50%;animation:authon-spin 0.6s linear infinite"></span>';
+    buttons.forEach((b) => b.disabled = true);
+    try {
+      await client.signInWithOAuth(provider);
+      onSuccess?.();
+    } catch (e) {
+      const error = e instanceof Error ? e : new Error(String(e));
+      onError?.(error);
+    } finally {
+      loadingProvider = null;
+      renderButtons(providers);
+    }
+  };
+  let providers = [];
+  function renderButtons(providerList) {
+    container.innerHTML = "";
+    buttons = [];
+    if (!document.getElementById("authon-spin-style")) {
+      const style = document.createElement("style");
+      style.id = "authon-spin-style";
+      style.textContent = "@keyframes authon-spin{to{transform:rotate(360deg)}}";
+      document.head.appendChild(style);
+    }
+    const wrapper = document.createElement("div");
+    wrapper.style.display = "flex";
+    wrapper.style.gap = `${resolvedGap}px`;
+    if (compact) {
+      wrapper.style.flexDirection = "row";
+      wrapper.style.flexWrap = "wrap";
+      wrapper.style.justifyContent = "center";
+    } else {
+      wrapper.style.flexDirection = "column";
+    }
+    for (const provider of providerList) {
+      const colors = import_shared.PROVIDER_COLORS[provider] || { bg: "#333", text: "#fff" };
+      const displayName = import_shared.PROVIDER_DISPLAY_NAMES[provider] || provider;
+      const config = (0, import_js2.getProviderButtonConfig)(provider);
+      const iconSvg = config.iconSvg.replace(/width="\d+"/, `width="${resolvedIconSize}"`).replace(/height="\d+"/, `height="${resolvedIconSize}"`);
+      const needsBorder = colors.bg.toLowerCase() === "#ffffff";
+      const btn = document.createElement("button");
+      btn.setAttribute("aria-label", `Sign in with ${displayName}`);
+      btn.style.display = "flex";
+      btn.style.alignItems = "center";
+      btn.style.justifyContent = "center";
+      btn.style.border = needsBorder ? "1px solid #dadce0" : "none";
+      btn.style.cursor = "pointer";
+      btn.style.backgroundColor = colors.bg;
+      btn.style.color = colors.text;
+      btn.style.borderRadius = `${borderRadius}px`;
+      btn.style.transition = "opacity 0.15s";
+      btn.style.fontFamily = "inherit";
+      if (compact) {
+        btn.style.width = `${size}px`;
+        btn.style.height = `${size}px`;
+        btn.style.padding = "0";
+        btn.innerHTML = `<span style="display:flex;align-items:center">${iconSvg}</span>`;
+      } else {
+        btn.style.width = "100%";
+        btn.style.height = `${height}px`;
+        btn.style.gap = "10px";
+        btn.style.paddingLeft = "16px";
+        btn.style.paddingRight = "16px";
+        const buttonLabel = labels?.[provider] ?? `Continue with ${displayName}`;
+        btn.innerHTML = `<span style="display:flex;align-items:center;flex-shrink:0">${iconSvg}</span><span style="font-size:15px;font-weight:600;white-space:nowrap">${buttonLabel}</span>`;
+      }
+      btn.addEventListener("click", () => handleClick(provider, btn));
+      btn.addEventListener("mouseenter", () => btn.style.opacity = "0.85");
+      btn.addEventListener("mouseleave", () => btn.style.opacity = "1");
+      buttons.push(btn);
+      wrapper.appendChild(btn);
+    }
+    container.appendChild(wrapper);
+  }
+  client.getProviders().then((p) => {
+    providers = p;
+    if (providers.length > 0) {
+      renderButtons(providers);
+    }
+  });
+  return () => {
+    container.innerHTML = "";
+    buttons = [];
+  };
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   authonModule,
   createAuthMiddleware,
   createAuthonPlugin,
+  renderSocialButtons,
   useAuthon,
   useUser
 });

package/dist/index.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts","../src/module.ts","../src/plugin.ts","../src/composables.ts","../src/middleware.ts"],"sourcesContent":["export { authonModule as default } from './module';\nexport { authonModule } from './module';\nexport type { AuthonModuleOptions } from './module';\nexport { createAuthonPlugin } from './plugin';\nexport type { AuthonPluginState } from './plugin';\nexport { useAuthon, useUser } from './composables';\nexport { createAuthMiddleware } from './middleware';\n","import type { AuthonConfig } from '@authon/js';\n\nexport interface AuthonModuleOptions {\n  publishableKey: string;\n  config?: Omit<AuthonConfig, 'mode'>;\n  globalMiddleware?: boolean;\n}\n\n/**\n * Nuxt 3 module definition for Authon.\n *\n * Usage in nuxt.config.ts:\n * ```ts\n * export default defineNuxtConfig({\n *   modules: ['@authon/nuxt'],\n *   authon: {\n *     publishableKey: 'pk_live_...',\n *     globalMiddleware: false,\n *   }\n * })\n * ```\n *\n * Since tsup can't process Nuxt module macros (defineNuxtModule, etc.),\n * this module exports a setup function that users call in their Nuxt plugin.\n */\nexport function authonModule(options: AuthonModuleOptions) {\n  return {\n    name: '@authon/nuxt',\n    options,\n  };\n}\n","import { Authon } from '@authon/js';\nimport type { AuthonConfig } from '@authon/js';\nimport type { AuthonUser } from '@authon/shared';\n\nexport interface AuthonPluginState {\n  client: Authon;\n  user: AuthonUser | null;\n  isSignedIn: boolean;\n  isLoading: boolean;\n}\n\n/**\n * Creates an Authon client instance for use as a Nuxt plugin.\n *\n * Usage in plugins/authon.client.ts:\n * ```ts\n * import { createAuthonPlugin } from '@authon/nuxt'\n *\n * export default defineNuxtPlugin(() => {\n *   const authon = createAuthonPlugin('pk_live_...', { theme: 'auto' })\n *   return { provide: { authon } }\n * })\n * ```\n */\nexport function createAuthonPlugin(\n  publishableKey: string,\n  config?: Omit<AuthonConfig, 'mode'>,\n): AuthonPluginState {\n  const client = new Authon(publishableKey, config);\n  const state: AuthonPluginState = {\n    client,\n    user: null,\n    isSignedIn: false,\n    isLoading: true,\n  };\n\n  client.on('signedIn', (user) => {\n    state.user = user as AuthonUser;\n    state.isSignedIn = true;\n    state.isLoading = false;\n  });\n\n  client.on('signedOut', () => {\n    state.user = null;\n    state.isSignedIn = false;\n  });\n\n  client.on('error', () => {\n    state.isLoading = false;\n  });\n\n  const existingUser = client.getUser();\n  if (existingUser) {\n    state.user = existingUser;\n    state.isSignedIn = true;\n  }\n  state.isLoading = false;\n\n  return state;\n}\n","import type { AuthonUser } from '@authon/shared';\nimport type { AuthonPluginState } from './plugin';\n\n/**\n * Access the Authon client and auth state.\n *\n * Requires the Authon plugin to be installed via `createAuthonPlugin`.\n *\n * Usage:\n * ```ts\n * const { isSignedIn, user, client } = useAuthon()\n * await client.openSignIn()\n * ```\n */\nexport function useAuthon(): AuthonPluginState {\n  // In a real Nuxt app, users access this via useNuxtApp().$authon\n  // This composable is a convenience wrapper that users should adapt\n  // to their own plugin setup.\n  throw new Error(\n    'useAuthon() must be used within a Nuxt app with the Authon plugin installed. ' +\n    'Access the client via useNuxtApp().$authon instead.',\n  );\n}\n\n/**\n * Get the current user and loading state.\n *\n * Usage:\n * ```ts\n * const { user, isLoading } = useUser()\n * ```\n */\nexport function useUser(): { user: AuthonUser | null; isLoading: boolean } {\n  const { user, isLoading } = useAuthon();\n  return { user, isLoading };\n}\n","import type { AuthonPluginState } from './plugin';\n\n/**\n * Route middleware factory for protecting authenticated routes.\n *\n * Usage in middleware/auth.ts:\n * ```ts\n * import { createAuthMiddleware } from '@authon/nuxt'\n *\n * export default defineNuxtRouteMiddleware((to, from) => {\n *   const { $authon } = useNuxtApp()\n *   return createAuthMiddleware($authon, '/login')(to, from)\n * })\n * ```\n */\nexport function createAuthMiddleware(\n  authon: AuthonPluginState,\n  redirectTo = '/sign-in',\n) {\n  return (\n    to: { path: string; fullPath: string },\n    _from: { path: string },\n  ): { path: string; query: { redirect: string } } | undefined => {\n    if (to.path === redirectTo) return undefined;\n\n    if (!authon.isSignedIn) {\n      return {\n        path: redirectTo,\n        query: { redirect: to.fullPath },\n      };\n    }\n\n    return undefined;\n  };\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACyBO,SAAS,aAAa,SAA8B;AACzD,SAAO;AAAA,IACL,MAAM;AAAA,IACN;AAAA,EACF;AACF;;;AC9BA,gBAAuB;AAwBhB,SAAS,mBACd,gBACA,QACmB;AACnB,QAAM,SAAS,IAAI,iBAAO,gBAAgB,MAAM;AAChD,QAAM,QAA2B;AAAA,IAC/B;AAAA,IACA,MAAM;AAAA,IACN,YAAY;AAAA,IACZ,WAAW;AAAA,EACb;AAEA,SAAO,GAAG,YAAY,CAAC,SAAS;AAC9B,UAAM,OAAO;AACb,UAAM,aAAa;AACnB,UAAM,YAAY;AAAA,EACpB,CAAC;AAED,SAAO,GAAG,aAAa,MAAM;AAC3B,UAAM,OAAO;AACb,UAAM,aAAa;AAAA,EACrB,CAAC;AAED,SAAO,GAAG,SAAS,MAAM;AACvB,UAAM,YAAY;AAAA,EACpB,CAAC;AAED,QAAM,eAAe,OAAO,QAAQ;AACpC,MAAI,cAAc;AAChB,UAAM,OAAO;AACb,UAAM,aAAa;AAAA,EACrB;AACA,QAAM,YAAY;AAElB,SAAO;AACT;;;AC7CO,SAAS,YAA+B;AAI7C,QAAM,IAAI;AAAA,IACR;AAAA,EAEF;AACF;AAUO,SAAS,UAA2D;AACzE,QAAM,EAAE,MAAM,UAAU,IAAI,UAAU;AACtC,SAAO,EAAE,MAAM,UAAU;AAC3B;;;ACpBO,SAAS,qBACd,QACA,aAAa,YACb;AACA,SAAO,CACL,IACA,UAC8D;AAC9D,QAAI,GAAG,SAAS,WAAY,QAAO;AAEnC,QAAI,CAAC,OAAO,YAAY;AACtB,aAAO;AAAA,QACL,MAAM;AAAA,QACN,OAAO,EAAE,UAAU,GAAG,SAAS;AAAA,MACjC;AAAA,IACF;AAEA,WAAO;AAAA,EACT;AACF;","names":[]}
+{"version":3,"sources":["../src/index.ts","../src/module.ts","../src/plugin.ts","../src/composables.ts","../src/middleware.ts","../src/SocialButtons.ts"],"sourcesContent":["export { authonModule as default } from './module';\nexport { authonModule } from './module';\nexport type { AuthonModuleOptions } from './module';\nexport { createAuthonPlugin } from './plugin';\nexport type { AuthonPluginState } from './plugin';\nexport { useAuthon, useUser } from './composables';\nexport { createAuthMiddleware } from './middleware';\nexport { renderSocialButtons } from './SocialButtons';\nexport type { SocialButtonsConfig } from './SocialButtons';\n","import type { AuthonConfig } from '@authon/js';\n\nexport interface AuthonModuleOptions {\n  publishableKey: string;\n  config?: Omit<AuthonConfig, 'mode'>;\n  globalMiddleware?: boolean;\n}\n\n/**\n * Nuxt 3 module definition for Authon.\n *\n * Usage in nuxt.config.ts:\n * ```ts\n * export default defineNuxtConfig({\n *   modules: ['@authon/nuxt'],\n *   authon: {\n *     publishableKey: 'pk_live_...',\n *     globalMiddleware: false,\n *   }\n * })\n * ```\n *\n * Since tsup can't process Nuxt module macros (defineNuxtModule, etc.),\n * this module exports a setup function that users call in their Nuxt plugin.\n */\nexport function authonModule(options: AuthonModuleOptions) {\n  return {\n    name: '@authon/nuxt',\n    options,\n  };\n}\n","import { Authon } from '@authon/js';\nimport type { AuthonConfig } from '@authon/js';\nimport type { AuthonUser } from '@authon/shared';\n\nexport interface AuthonPluginState {\n  client: Authon;\n  user: AuthonUser | null;\n  isSignedIn: boolean;\n  isLoading: boolean;\n}\n\n/**\n * Creates an Authon client instance for use as a Nuxt plugin.\n *\n * Usage in plugins/authon.client.ts:\n * ```ts\n * import { createAuthonPlugin } from '@authon/nuxt'\n *\n * export default defineNuxtPlugin(() => {\n *   const authon = createAuthonPlugin('pk_live_...', { theme: 'auto' })\n *   return { provide: { authon } }\n * })\n * ```\n */\nexport function createAuthonPlugin(\n  publishableKey: string,\n  config?: Omit<AuthonConfig, 'mode'>,\n): AuthonPluginState {\n  const client = new Authon(publishableKey, config);\n  const state: AuthonPluginState = {\n    client,\n    user: null,\n    isSignedIn: false,\n    isLoading: true,\n  };\n\n  client.on('signedIn', (user) => {\n    state.user = user as AuthonUser;\n    state.isSignedIn = true;\n    state.isLoading = false;\n  });\n\n  client.on('signedOut', () => {\n    state.user = null;\n    state.isSignedIn = false;\n  });\n\n  client.on('error', () => {\n    state.isLoading = false;\n  });\n\n  const existingUser = client.getUser();\n  if (existingUser) {\n    state.user = existingUser;\n    state.isSignedIn = true;\n  }\n  state.isLoading = false;\n\n  return state;\n}\n","import type { AuthonUser } from '@authon/shared';\nimport type { AuthonPluginState } from './plugin';\n\n/**\n * Access the Authon client and auth state.\n *\n * Requires the Authon plugin to be installed via `createAuthonPlugin`.\n *\n * Usage:\n * ```ts\n * const { isSignedIn, user, client } = useAuthon()\n * await client.openSignIn()\n * ```\n */\nexport function useAuthon(): AuthonPluginState {\n  // In a real Nuxt app, users access this via useNuxtApp().$authon\n  // This composable is a convenience wrapper that users should adapt\n  // to their own plugin setup.\n  throw new Error(\n    'useAuthon() must be used within a Nuxt app with the Authon plugin installed. ' +\n    'Access the client via useNuxtApp().$authon instead.',\n  );\n}\n\n/**\n * Get the current user and loading state.\n *\n * Usage:\n * ```ts\n * const { user, isLoading } = useUser()\n * ```\n */\nexport function useUser(): { user: AuthonUser | null; isLoading: boolean } {\n  const { user, isLoading } = useAuthon();\n  return { user, isLoading };\n}\n","import type { AuthonPluginState } from './plugin';\n\n/**\n * Route middleware factory for protecting authenticated routes.\n *\n * Usage in middleware/auth.ts:\n * ```ts\n * import { createAuthMiddleware } from '@authon/nuxt'\n *\n * export default defineNuxtRouteMiddleware((to, from) => {\n *   const { $authon } = useNuxtApp()\n *   return createAuthMiddleware($authon, '/login')(to, from)\n * })\n * ```\n */\nexport function createAuthMiddleware(\n  authon: AuthonPluginState,\n  redirectTo = '/sign-in',\n) {\n  return (\n    to: { path: string; fullPath: string },\n    _from: { path: string },\n  ): { path: string; query: { redirect: string } } | undefined => {\n    if (to.path === redirectTo) return undefined;\n\n    if (!authon.isSignedIn) {\n      return {\n        path: redirectTo,\n        query: { redirect: to.fullPath },\n      };\n    }\n\n    return undefined;\n  };\n}\n","import { PROVIDER_COLORS, PROVIDER_DISPLAY_NAMES, type OAuthProviderType } from '@authon/shared';\nimport { getProviderButtonConfig, type Authon } from '@authon/js';\n\nexport interface SocialButtonsConfig {\n  compact?: boolean;\n  gap?: number;\n  labels?: Partial<Record<OAuthProviderType, string>>;\n  iconSize?: number;\n  borderRadius?: number;\n  height?: number;\n  size?: number;\n}\n\n/**\n * Render social login buttons into a container element.\n *\n * Usage in Nuxt page:\n * ```vue\n * <template>\n *   <div ref=\"socialContainer\" />\n * </template>\n *\n * <script setup>\n * const { $authon } = useNuxtApp()\n * const socialContainer = ref<HTMLElement>()\n *\n * let cleanup: (() => void) | undefined\n * onMounted(async () => {\n *   const { renderSocialButtons } = await import('@authon/nuxt')\n *   cleanup = renderSocialButtons({\n *     client: $authon.client,\n *     container: socialContainer.value!,\n *     compact: true,\n *   })\n * })\n * onUnmounted(() => cleanup?.())\n * </script>\n * ```\n */\nexport function renderSocialButtons(options: {\n  client: Authon;\n  container: HTMLElement;\n  onSuccess?: () => void;\n  onError?: (error: Error) => void;\n} & SocialButtonsConfig): () => void {\n  const {\n    client,\n    container,\n    onSuccess,\n    onError,\n    compact = false,\n    gap,\n    labels,\n    iconSize,\n    borderRadius = 10,\n    height = 48,\n    size = 48,\n  } = options;\n\n  const resolvedGap = gap ?? (compact ? 12 : 10);\n  const resolvedIconSize = iconSize ?? (compact ? 24 : 20);\n  let loadingProvider: string | null = null;\n  let buttons: HTMLButtonElement[] = [];\n\n  const handleClick = async (provider: OAuthProviderType, btn: HTMLButtonElement) => {\n    if (loadingProvider) return;\n    loadingProvider = provider;\n    btn.innerHTML = '<span style=\"display:inline-block;width:16px;height:16px;border:2px solid currentColor;border-top-color:transparent;border-radius:50%;animation:authon-spin 0.6s linear infinite\"></span>';\n    buttons.forEach((b) => (b.disabled = true));\n\n    try {\n      await client.signInWithOAuth(provider);\n      onSuccess?.();\n    } catch (e: any) {\n      const error = e instanceof Error ? e : new Error(String(e));\n      onError?.(error);\n    } finally {\n      loadingProvider = null;\n      renderButtons(providers);\n    }\n  };\n\n  let providers: OAuthProviderType[] = [];\n\n  function renderButtons(providerList: OAuthProviderType[]) {\n    container.innerHTML = '';\n    buttons = [];\n\n    if (!document.getElementById('authon-spin-style')) {\n      const style = document.createElement('style');\n      style.id = 'authon-spin-style';\n      style.textContent = '@keyframes authon-spin{to{transform:rotate(360deg)}}';\n      document.head.appendChild(style);\n    }\n\n    const wrapper = document.createElement('div');\n    wrapper.style.display = 'flex';\n    wrapper.style.gap = `${resolvedGap}px`;\n\n    if (compact) {\n      wrapper.style.flexDirection = 'row';\n      wrapper.style.flexWrap = 'wrap';\n      wrapper.style.justifyContent = 'center';\n    } else {\n      wrapper.style.flexDirection = 'column';\n    }\n\n    for (const provider of providerList) {\n      const colors = PROVIDER_COLORS[provider] || { bg: '#333', text: '#fff' };\n      const displayName = PROVIDER_DISPLAY_NAMES[provider] || provider;\n      const config = getProviderButtonConfig(provider);\n      const iconSvg = config.iconSvg\n        .replace(/width=\"\\d+\"/, `width=\"${resolvedIconSize}\"`)\n        .replace(/height=\"\\d+\"/, `height=\"${resolvedIconSize}\"`);\n      const needsBorder = colors.bg.toLowerCase() === '#ffffff';\n\n      const btn = document.createElement('button');\n      btn.setAttribute('aria-label', `Sign in with ${displayName}`);\n      btn.style.display = 'flex';\n      btn.style.alignItems = 'center';\n      btn.style.justifyContent = 'center';\n      btn.style.border = needsBorder ? '1px solid #dadce0' : 'none';\n      btn.style.cursor = 'pointer';\n      btn.style.backgroundColor = colors.bg;\n      btn.style.color = colors.text;\n      btn.style.borderRadius = `${borderRadius}px`;\n      btn.style.transition = 'opacity 0.15s';\n      btn.style.fontFamily = 'inherit';\n\n      if (compact) {\n        btn.style.width = `${size}px`;\n        btn.style.height = `${size}px`;\n        btn.style.padding = '0';\n        btn.innerHTML = `<span style=\"display:flex;align-items:center\">${iconSvg}</span>`;\n      } else {\n        btn.style.width = '100%';\n        btn.style.height = `${height}px`;\n        btn.style.gap = '10px';\n        btn.style.paddingLeft = '16px';\n        btn.style.paddingRight = '16px';\n        const buttonLabel = labels?.[provider] ?? `Continue with ${displayName}`;\n        btn.innerHTML = `<span style=\"display:flex;align-items:center;flex-shrink:0\">${iconSvg}</span><span style=\"font-size:15px;font-weight:600;white-space:nowrap\">${buttonLabel}</span>`;\n      }\n\n      btn.addEventListener('click', () => handleClick(provider, btn));\n      btn.addEventListener('mouseenter', () => (btn.style.opacity = '0.85'));\n      btn.addEventListener('mouseleave', () => (btn.style.opacity = '1'));\n\n      buttons.push(btn);\n      wrapper.appendChild(btn);\n    }\n\n    container.appendChild(wrapper);\n  }\n\n  client.getProviders().then((p: OAuthProviderType[]) => {\n    providers = p;\n    if (providers.length > 0) {\n      renderButtons(providers);\n    }\n  });\n\n  return () => {\n    container.innerHTML = '';\n    buttons = [];\n  };\n}\n"],"mappings":"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","names":["import_js"]}

package/dist/index.d.cts

@@ -1,5 +1,5 @@
 import { AuthonConfig, Authon } from '@authon/js';
-import { AuthonUser } from '@authon/shared';
+import { AuthonUser, OAuthProviderType } from '@authon/shared';
 
 interface AuthonModuleOptions {
     publishableKey: string;
@@ -99,4 +99,46 @@ declare function createAuthMiddleware(authon: AuthonPluginState, redirectTo?: st
     };
 } | undefined;
 
-export { type AuthonModuleOptions, type AuthonPluginState, authonModule, createAuthMiddleware, createAuthonPlugin, authonModule as default, useAuthon, useUser };
+interface SocialButtonsConfig {
+    compact?: boolean;
+    gap?: number;
+    labels?: Partial<Record<OAuthProviderType, string>>;
+    iconSize?: number;
+    borderRadius?: number;
+    height?: number;
+    size?: number;
+}
+/**
+ * Render social login buttons into a container element.
+ *
+ * Usage in Nuxt page:
+ * ```vue
+ * <template>
+ *   <div ref="socialContainer" />
+ * </template>
+ *
+ * <script setup>
+ * const { $authon } = useNuxtApp()
+ * const socialContainer = ref<HTMLElement>()
+ *
+ * let cleanup: (() => void) | undefined
+ * onMounted(async () => {
+ *   const { renderSocialButtons } = await import('@authon/nuxt')
+ *   cleanup = renderSocialButtons({
+ *     client: $authon.client,
+ *     container: socialContainer.value!,
+ *     compact: true,
+ *   })
+ * })
+ * onUnmounted(() => cleanup?.())
+ * </script>
+ * ```
+ */
+declare function renderSocialButtons(options: {
+    client: Authon;
+    container: HTMLElement;
+    onSuccess?: () => void;
+    onError?: (error: Error) => void;
+} & SocialButtonsConfig): () => void;
+
+export { type AuthonModuleOptions, type AuthonPluginState, type SocialButtonsConfig, authonModule, createAuthMiddleware, createAuthonPlugin, authonModule as default, renderSocialButtons, useAuthon, useUser };

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import { AuthonConfig, Authon } from '@authon/js';
-import { AuthonUser } from '@authon/shared';
+import { AuthonUser, OAuthProviderType } from '@authon/shared';
 
 interface AuthonModuleOptions {
     publishableKey: string;
@@ -99,4 +99,46 @@ declare function createAuthMiddleware(authon: AuthonPluginState, redirectTo?: st
     };
 } | undefined;
 
-export { type AuthonModuleOptions, type AuthonPluginState, authonModule, createAuthMiddleware, createAuthonPlugin, authonModule as default, useAuthon, useUser };
+interface SocialButtonsConfig {
+    compact?: boolean;
+    gap?: number;
+    labels?: Partial<Record<OAuthProviderType, string>>;
+    iconSize?: number;
+    borderRadius?: number;
+    height?: number;
+    size?: number;
+}
+/**
+ * Render social login buttons into a container element.
+ *
+ * Usage in Nuxt page:
+ * ```vue
+ * <template>
+ *   <div ref="socialContainer" />
+ * </template>
+ *
+ * <script setup>
+ * const { $authon } = useNuxtApp()
+ * const socialContainer = ref<HTMLElement>()
+ *
+ * let cleanup: (() => void) | undefined
+ * onMounted(async () => {
+ *   const { renderSocialButtons } = await import('@authon/nuxt')
+ *   cleanup = renderSocialButtons({
+ *     client: $authon.client,
+ *     container: socialContainer.value!,
+ *     compact: true,
+ *   })
+ * })
+ * onUnmounted(() => cleanup?.())
+ * </script>
+ * ```
+ */
+declare function renderSocialButtons(options: {
+    client: Authon;
+    container: HTMLElement;
+    onSuccess?: () => void;
+    onError?: (error: Error) => void;
+} & SocialButtonsConfig): () => void;
+
+export { type AuthonModuleOptions, type AuthonPluginState, type SocialButtonsConfig, authonModule, createAuthMiddleware, createAuthonPlugin, authonModule as default, renderSocialButtons, useAuthon, useUser };

package/dist/index.js

@@ -61,11 +61,121 @@ function createAuthMiddleware(authon, redirectTo = "/sign-in") {
     return void 0;
   };
 }
+
+// src/SocialButtons.ts
+import { PROVIDER_COLORS, PROVIDER_DISPLAY_NAMES } from "@authon/shared";
+import { getProviderButtonConfig } from "@authon/js";
+function renderSocialButtons(options) {
+  const {
+    client,
+    container,
+    onSuccess,
+    onError,
+    compact = false,
+    gap,
+    labels,
+    iconSize,
+    borderRadius = 10,
+    height = 48,
+    size = 48
+  } = options;
+  const resolvedGap = gap ?? (compact ? 12 : 10);
+  const resolvedIconSize = iconSize ?? (compact ? 24 : 20);
+  let loadingProvider = null;
+  let buttons = [];
+  const handleClick = async (provider, btn) => {
+    if (loadingProvider) return;
+    loadingProvider = provider;
+    btn.innerHTML = '<span style="display:inline-block;width:16px;height:16px;border:2px solid currentColor;border-top-color:transparent;border-radius:50%;animation:authon-spin 0.6s linear infinite"></span>';
+    buttons.forEach((b) => b.disabled = true);
+    try {
+      await client.signInWithOAuth(provider);
+      onSuccess?.();
+    } catch (e) {
+      const error = e instanceof Error ? e : new Error(String(e));
+      onError?.(error);
+    } finally {
+      loadingProvider = null;
+      renderButtons(providers);
+    }
+  };
+  let providers = [];
+  function renderButtons(providerList) {
+    container.innerHTML = "";
+    buttons = [];
+    if (!document.getElementById("authon-spin-style")) {
+      const style = document.createElement("style");
+      style.id = "authon-spin-style";
+      style.textContent = "@keyframes authon-spin{to{transform:rotate(360deg)}}";
+      document.head.appendChild(style);
+    }
+    const wrapper = document.createElement("div");
+    wrapper.style.display = "flex";
+    wrapper.style.gap = `${resolvedGap}px`;
+    if (compact) {
+      wrapper.style.flexDirection = "row";
+      wrapper.style.flexWrap = "wrap";
+      wrapper.style.justifyContent = "center";
+    } else {
+      wrapper.style.flexDirection = "column";
+    }
+    for (const provider of providerList) {
+      const colors = PROVIDER_COLORS[provider] || { bg: "#333", text: "#fff" };
+      const displayName = PROVIDER_DISPLAY_NAMES[provider] || provider;
+      const config = getProviderButtonConfig(provider);
+      const iconSvg = config.iconSvg.replace(/width="\d+"/, `width="${resolvedIconSize}"`).replace(/height="\d+"/, `height="${resolvedIconSize}"`);
+      const needsBorder = colors.bg.toLowerCase() === "#ffffff";
+      const btn = document.createElement("button");
+      btn.setAttribute("aria-label", `Sign in with ${displayName}`);
+      btn.style.display = "flex";
+      btn.style.alignItems = "center";
+      btn.style.justifyContent = "center";
+      btn.style.border = needsBorder ? "1px solid #dadce0" : "none";
+      btn.style.cursor = "pointer";
+      btn.style.backgroundColor = colors.bg;
+      btn.style.color = colors.text;
+      btn.style.borderRadius = `${borderRadius}px`;
+      btn.style.transition = "opacity 0.15s";
+      btn.style.fontFamily = "inherit";
+      if (compact) {
+        btn.style.width = `${size}px`;
+        btn.style.height = `${size}px`;
+        btn.style.padding = "0";
+        btn.innerHTML = `<span style="display:flex;align-items:center">${iconSvg}</span>`;
+      } else {
+        btn.style.width = "100%";
+        btn.style.height = `${height}px`;
+        btn.style.gap = "10px";
+        btn.style.paddingLeft = "16px";
+        btn.style.paddingRight = "16px";
+        const buttonLabel = labels?.[provider] ?? `Continue with ${displayName}`;
+        btn.innerHTML = `<span style="display:flex;align-items:center;flex-shrink:0">${iconSvg}</span><span style="font-size:15px;font-weight:600;white-space:nowrap">${buttonLabel}</span>`;
+      }
+      btn.addEventListener("click", () => handleClick(provider, btn));
+      btn.addEventListener("mouseenter", () => btn.style.opacity = "0.85");
+      btn.addEventListener("mouseleave", () => btn.style.opacity = "1");
+      buttons.push(btn);
+      wrapper.appendChild(btn);
+    }
+    container.appendChild(wrapper);
+  }
+  client.getProviders().then((p) => {
+    providers = p;
+    if (providers.length > 0) {
+      renderButtons(providers);
+    }
+  });
+  return () => {
+    container.innerHTML = "";
+    buttons = [];
+  };
+}
 export {
   authonModule,
   createAuthMiddleware,
   createAuthonPlugin,
   authonModule as default,
+  renderSocialButtons,
   useAuthon,
   useUser
 };

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/module.ts","../src/plugin.ts","../src/composables.ts","../src/middleware.ts"],"sourcesContent":["import type { AuthonConfig } from '@authon/js';\n\nexport interface AuthonModuleOptions {\n  publishableKey: string;\n  config?: Omit<AuthonConfig, 'mode'>;\n  globalMiddleware?: boolean;\n}\n\n/**\n * Nuxt 3 module definition for Authon.\n *\n * Usage in nuxt.config.ts:\n * ```ts\n * export default defineNuxtConfig({\n *   modules: ['@authon/nuxt'],\n *   authon: {\n *     publishableKey: 'pk_live_...',\n *     globalMiddleware: false,\n *   }\n * })\n * ```\n *\n * Since tsup can't process Nuxt module macros (defineNuxtModule, etc.),\n * this module exports a setup function that users call in their Nuxt plugin.\n */\nexport function authonModule(options: AuthonModuleOptions) {\n  return {\n    name: '@authon/nuxt',\n    options,\n  };\n}\n","import { Authon } from '@authon/js';\nimport type { AuthonConfig } from '@authon/js';\nimport type { AuthonUser } from '@authon/shared';\n\nexport interface AuthonPluginState {\n  client: Authon;\n  user: AuthonUser | null;\n  isSignedIn: boolean;\n  isLoading: boolean;\n}\n\n/**\n * Creates an Authon client instance for use as a Nuxt plugin.\n *\n * Usage in plugins/authon.client.ts:\n * ```ts\n * import { createAuthonPlugin } from '@authon/nuxt'\n *\n * export default defineNuxtPlugin(() => {\n *   const authon = createAuthonPlugin('pk_live_...', { theme: 'auto' })\n *   return { provide: { authon } }\n * })\n * ```\n */\nexport function createAuthonPlugin(\n  publishableKey: string,\n  config?: Omit<AuthonConfig, 'mode'>,\n): AuthonPluginState {\n  const client = new Authon(publishableKey, config);\n  const state: AuthonPluginState = {\n    client,\n    user: null,\n    isSignedIn: false,\n    isLoading: true,\n  };\n\n  client.on('signedIn', (user) => {\n    state.user = user as AuthonUser;\n    state.isSignedIn = true;\n    state.isLoading = false;\n  });\n\n  client.on('signedOut', () => {\n    state.user = null;\n    state.isSignedIn = false;\n  });\n\n  client.on('error', () => {\n    state.isLoading = false;\n  });\n\n  const existingUser = client.getUser();\n  if (existingUser) {\n    state.user = existingUser;\n    state.isSignedIn = true;\n  }\n  state.isLoading = false;\n\n  return state;\n}\n","import type { AuthonUser } from '@authon/shared';\nimport type { AuthonPluginState } from './plugin';\n\n/**\n * Access the Authon client and auth state.\n *\n * Requires the Authon plugin to be installed via `createAuthonPlugin`.\n *\n * Usage:\n * ```ts\n * const { isSignedIn, user, client } = useAuthon()\n * await client.openSignIn()\n * ```\n */\nexport function useAuthon(): AuthonPluginState {\n  // In a real Nuxt app, users access this via useNuxtApp().$authon\n  // This composable is a convenience wrapper that users should adapt\n  // to their own plugin setup.\n  throw new Error(\n    'useAuthon() must be used within a Nuxt app with the Authon plugin installed. ' +\n    'Access the client via useNuxtApp().$authon instead.',\n  );\n}\n\n/**\n * Get the current user and loading state.\n *\n * Usage:\n * ```ts\n * const { user, isLoading } = useUser()\n * ```\n */\nexport function useUser(): { user: AuthonUser | null; isLoading: boolean } {\n  const { user, isLoading } = useAuthon();\n  return { user, isLoading };\n}\n","import type { AuthonPluginState } from './plugin';\n\n/**\n * Route middleware factory for protecting authenticated routes.\n *\n * Usage in middleware/auth.ts:\n * ```ts\n * import { createAuthMiddleware } from '@authon/nuxt'\n *\n * export default defineNuxtRouteMiddleware((to, from) => {\n *   const { $authon } = useNuxtApp()\n *   return createAuthMiddleware($authon, '/login')(to, from)\n * })\n * ```\n */\nexport function createAuthMiddleware(\n  authon: AuthonPluginState,\n  redirectTo = '/sign-in',\n) {\n  return (\n    to: { path: string; fullPath: string },\n    _from: { path: string },\n  ): { path: string; query: { redirect: string } } | undefined => {\n    if (to.path === redirectTo) return undefined;\n\n    if (!authon.isSignedIn) {\n      return {\n        path: redirectTo,\n        query: { redirect: to.fullPath },\n      };\n    }\n\n    return undefined;\n  };\n}\n"],"mappings":";AAyBO,SAAS,aAAa,SAA8B;AACzD,SAAO;AAAA,IACL,MAAM;AAAA,IACN;AAAA,EACF;AACF;;;AC9BA,SAAS,cAAc;AAwBhB,SAAS,mBACd,gBACA,QACmB;AACnB,QAAM,SAAS,IAAI,OAAO,gBAAgB,MAAM;AAChD,QAAM,QAA2B;AAAA,IAC/B;AAAA,IACA,MAAM;AAAA,IACN,YAAY;AAAA,IACZ,WAAW;AAAA,EACb;AAEA,SAAO,GAAG,YAAY,CAAC,SAAS;AAC9B,UAAM,OAAO;AACb,UAAM,aAAa;AACnB,UAAM,YAAY;AAAA,EACpB,CAAC;AAED,SAAO,GAAG,aAAa,MAAM;AAC3B,UAAM,OAAO;AACb,UAAM,aAAa;AAAA,EACrB,CAAC;AAED,SAAO,GAAG,SAAS,MAAM;AACvB,UAAM,YAAY;AAAA,EACpB,CAAC;AAED,QAAM,eAAe,OAAO,QAAQ;AACpC,MAAI,cAAc;AAChB,UAAM,OAAO;AACb,UAAM,aAAa;AAAA,EACrB;AACA,QAAM,YAAY;AAElB,SAAO;AACT;;;AC7CO,SAAS,YAA+B;AAI7C,QAAM,IAAI;AAAA,IACR;AAAA,EAEF;AACF;AAUO,SAAS,UAA2D;AACzE,QAAM,EAAE,MAAM,UAAU,IAAI,UAAU;AACtC,SAAO,EAAE,MAAM,UAAU;AAC3B;;;ACpBO,SAAS,qBACd,QACA,aAAa,YACb;AACA,SAAO,CACL,IACA,UAC8D;AAC9D,QAAI,GAAG,SAAS,WAAY,QAAO;AAEnC,QAAI,CAAC,OAAO,YAAY;AACtB,aAAO;AAAA,QACL,MAAM;AAAA,QACN,OAAO,EAAE,UAAU,GAAG,SAAS;AAAA,MACjC;AAAA,IACF;AAEA,WAAO;AAAA,EACT;AACF;","names":[]}
+{"version":3,"sources":["../src/module.ts","../src/plugin.ts","../src/composables.ts","../src/middleware.ts","../src/SocialButtons.ts"],"sourcesContent":["import type { AuthonConfig } from '@authon/js';\n\nexport interface AuthonModuleOptions {\n  publishableKey: string;\n  config?: Omit<AuthonConfig, 'mode'>;\n  globalMiddleware?: boolean;\n}\n\n/**\n * Nuxt 3 module definition for Authon.\n *\n * Usage in nuxt.config.ts:\n * ```ts\n * export default defineNuxtConfig({\n *   modules: ['@authon/nuxt'],\n *   authon: {\n *     publishableKey: 'pk_live_...',\n *     globalMiddleware: false,\n *   }\n * })\n * ```\n *\n * Since tsup can't process Nuxt module macros (defineNuxtModule, etc.),\n * this module exports a setup function that users call in their Nuxt plugin.\n */\nexport function authonModule(options: AuthonModuleOptions) {\n  return {\n    name: '@authon/nuxt',\n    options,\n  };\n}\n","import { Authon } from '@authon/js';\nimport type { AuthonConfig } from '@authon/js';\nimport type { AuthonUser } from '@authon/shared';\n\nexport interface AuthonPluginState {\n  client: Authon;\n  user: AuthonUser | null;\n  isSignedIn: boolean;\n  isLoading: boolean;\n}\n\n/**\n * Creates an Authon client instance for use as a Nuxt plugin.\n *\n * Usage in plugins/authon.client.ts:\n * ```ts\n * import { createAuthonPlugin } from '@authon/nuxt'\n *\n * export default defineNuxtPlugin(() => {\n *   const authon = createAuthonPlugin('pk_live_...', { theme: 'auto' })\n *   return { provide: { authon } }\n * })\n * ```\n */\nexport function createAuthonPlugin(\n  publishableKey: string,\n  config?: Omit<AuthonConfig, 'mode'>,\n): AuthonPluginState {\n  const client = new Authon(publishableKey, config);\n  const state: AuthonPluginState = {\n    client,\n    user: null,\n    isSignedIn: false,\n    isLoading: true,\n  };\n\n  client.on('signedIn', (user) => {\n    state.user = user as AuthonUser;\n    state.isSignedIn = true;\n    state.isLoading = false;\n  });\n\n  client.on('signedOut', () => {\n    state.user = null;\n    state.isSignedIn = false;\n  });\n\n  client.on('error', () => {\n    state.isLoading = false;\n  });\n\n  const existingUser = client.getUser();\n  if (existingUser) {\n    state.user = existingUser;\n    state.isSignedIn = true;\n  }\n  state.isLoading = false;\n\n  return state;\n}\n","import type { AuthonUser } from '@authon/shared';\nimport type { AuthonPluginState } from './plugin';\n\n/**\n * Access the Authon client and auth state.\n *\n * Requires the Authon plugin to be installed via `createAuthonPlugin`.\n *\n * Usage:\n * ```ts\n * const { isSignedIn, user, client } = useAuthon()\n * await client.openSignIn()\n * ```\n */\nexport function useAuthon(): AuthonPluginState {\n  // In a real Nuxt app, users access this via useNuxtApp().$authon\n  // This composable is a convenience wrapper that users should adapt\n  // to their own plugin setup.\n  throw new Error(\n    'useAuthon() must be used within a Nuxt app with the Authon plugin installed. ' +\n    'Access the client via useNuxtApp().$authon instead.',\n  );\n}\n\n/**\n * Get the current user and loading state.\n *\n * Usage:\n * ```ts\n * const { user, isLoading } = useUser()\n * ```\n */\nexport function useUser(): { user: AuthonUser | null; isLoading: boolean } {\n  const { user, isLoading } = useAuthon();\n  return { user, isLoading };\n}\n","import type { AuthonPluginState } from './plugin';\n\n/**\n * Route middleware factory for protecting authenticated routes.\n *\n * Usage in middleware/auth.ts:\n * ```ts\n * import { createAuthMiddleware } from '@authon/nuxt'\n *\n * export default defineNuxtRouteMiddleware((to, from) => {\n *   const { $authon } = useNuxtApp()\n *   return createAuthMiddleware($authon, '/login')(to, from)\n * })\n * ```\n */\nexport function createAuthMiddleware(\n  authon: AuthonPluginState,\n  redirectTo = '/sign-in',\n) {\n  return (\n    to: { path: string; fullPath: string },\n    _from: { path: string },\n  ): { path: string; query: { redirect: string } } | undefined => {\n    if (to.path === redirectTo) return undefined;\n\n    if (!authon.isSignedIn) {\n      return {\n        path: redirectTo,\n        query: { redirect: to.fullPath },\n      };\n    }\n\n    return undefined;\n  };\n}\n","import { PROVIDER_COLORS, PROVIDER_DISPLAY_NAMES, type OAuthProviderType } from '@authon/shared';\nimport { getProviderButtonConfig, type Authon } from '@authon/js';\n\nexport interface SocialButtonsConfig {\n  compact?: boolean;\n  gap?: number;\n  labels?: Partial<Record<OAuthProviderType, string>>;\n  iconSize?: number;\n  borderRadius?: number;\n  height?: number;\n  size?: number;\n}\n\n/**\n * Render social login buttons into a container element.\n *\n * Usage in Nuxt page:\n * ```vue\n * <template>\n *   <div ref=\"socialContainer\" />\n * </template>\n *\n * <script setup>\n * const { $authon } = useNuxtApp()\n * const socialContainer = ref<HTMLElement>()\n *\n * let cleanup: (() => void) | undefined\n * onMounted(async () => {\n *   const { renderSocialButtons } = await import('@authon/nuxt')\n *   cleanup = renderSocialButtons({\n *     client: $authon.client,\n *     container: socialContainer.value!,\n *     compact: true,\n *   })\n * })\n * onUnmounted(() => cleanup?.())\n * </script>\n * ```\n */\nexport function renderSocialButtons(options: {\n  client: Authon;\n  container: HTMLElement;\n  onSuccess?: () => void;\n  onError?: (error: Error) => void;\n} & SocialButtonsConfig): () => void {\n  const {\n    client,\n    container,\n    onSuccess,\n    onError,\n    compact = false,\n    gap,\n    labels,\n    iconSize,\n    borderRadius = 10,\n    height = 48,\n    size = 48,\n  } = options;\n\n  const resolvedGap = gap ?? (compact ? 12 : 10);\n  const resolvedIconSize = iconSize ?? (compact ? 24 : 20);\n  let loadingProvider: string | null = null;\n  let buttons: HTMLButtonElement[] = [];\n\n  const handleClick = async (provider: OAuthProviderType, btn: HTMLButtonElement) => {\n    if (loadingProvider) return;\n    loadingProvider = provider;\n    btn.innerHTML = '<span style=\"display:inline-block;width:16px;height:16px;border:2px solid currentColor;border-top-color:transparent;border-radius:50%;animation:authon-spin 0.6s linear infinite\"></span>';\n    buttons.forEach((b) => (b.disabled = true));\n\n    try {\n      await client.signInWithOAuth(provider);\n      onSuccess?.();\n    } catch (e: any) {\n      const error = e instanceof Error ? e : new Error(String(e));\n      onError?.(error);\n    } finally {\n      loadingProvider = null;\n      renderButtons(providers);\n    }\n  };\n\n  let providers: OAuthProviderType[] = [];\n\n  function renderButtons(providerList: OAuthProviderType[]) {\n    container.innerHTML = '';\n    buttons = [];\n\n    if (!document.getElementById('authon-spin-style')) {\n      const style = document.createElement('style');\n      style.id = 'authon-spin-style';\n      style.textContent = '@keyframes authon-spin{to{transform:rotate(360deg)}}';\n      document.head.appendChild(style);\n    }\n\n    const wrapper = document.createElement('div');\n    wrapper.style.display = 'flex';\n    wrapper.style.gap = `${resolvedGap}px`;\n\n    if (compact) {\n      wrapper.style.flexDirection = 'row';\n      wrapper.style.flexWrap = 'wrap';\n      wrapper.style.justifyContent = 'center';\n    } else {\n      wrapper.style.flexDirection = 'column';\n    }\n\n    for (const provider of providerList) {\n      const colors = PROVIDER_COLORS[provider] || { bg: '#333', text: '#fff' };\n      const displayName = PROVIDER_DISPLAY_NAMES[provider] || provider;\n      const config = getProviderButtonConfig(provider);\n      const iconSvg = config.iconSvg\n        .replace(/width=\"\\d+\"/, `width=\"${resolvedIconSize}\"`)\n        .replace(/height=\"\\d+\"/, `height=\"${resolvedIconSize}\"`);\n      const needsBorder = colors.bg.toLowerCase() === '#ffffff';\n\n      const btn = document.createElement('button');\n      btn.setAttribute('aria-label', `Sign in with ${displayName}`);\n      btn.style.display = 'flex';\n      btn.style.alignItems = 'center';\n      btn.style.justifyContent = 'center';\n      btn.style.border = needsBorder ? '1px solid #dadce0' : 'none';\n      btn.style.cursor = 'pointer';\n      btn.style.backgroundColor = colors.bg;\n      btn.style.color = colors.text;\n      btn.style.borderRadius = `${borderRadius}px`;\n      btn.style.transition = 'opacity 0.15s';\n      btn.style.fontFamily = 'inherit';\n\n      if (compact) {\n        btn.style.width = `${size}px`;\n        btn.style.height = `${size}px`;\n        btn.style.padding = '0';\n        btn.innerHTML = `<span style=\"display:flex;align-items:center\">${iconSvg}</span>`;\n      } else {\n        btn.style.width = '100%';\n        btn.style.height = `${height}px`;\n        btn.style.gap = '10px';\n        btn.style.paddingLeft = '16px';\n        btn.style.paddingRight = '16px';\n        const buttonLabel = labels?.[provider] ?? `Continue with ${displayName}`;\n        btn.innerHTML = `<span style=\"display:flex;align-items:center;flex-shrink:0\">${iconSvg}</span><span style=\"font-size:15px;font-weight:600;white-space:nowrap\">${buttonLabel}</span>`;\n      }\n\n      btn.addEventListener('click', () => handleClick(provider, btn));\n      btn.addEventListener('mouseenter', () => (btn.style.opacity = '0.85'));\n      btn.addEventListener('mouseleave', () => (btn.style.opacity = '1'));\n\n      buttons.push(btn);\n      wrapper.appendChild(btn);\n    }\n\n    container.appendChild(wrapper);\n  }\n\n  client.getProviders().then((p: OAuthProviderType[]) => {\n    providers = p;\n    if (providers.length > 0) {\n      renderButtons(providers);\n    }\n  });\n\n  return () => {\n    container.innerHTML = '';\n    buttons = [];\n  };\n}\n"],"mappings":"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","names":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@authon/nuxt",
-  "version": "0.1.19",
+  "version": "0.2.1",
   "description": "Authon Nuxt 3 module — auto-imported composables and middleware",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -37,8 +37,8 @@
     "module"
   ],
   "dependencies": {
-    "@authon/js": "workspace:^",
-    "@authon/shared": "workspace:^"
+    "@authon/js": "^0.2.1",
+    "@authon/shared": "^0.2.0"
   },
   "peerDependencies": {
     "nuxt": "^3.0.0"