@authon/svelte 0.2.0 → 0.2.1

package/dist/index.cjs

@@ -22,7 +22,8 @@ var index_exports = {};
 __export(index_exports, {
   createAuthonStore: () => createAuthonStore,
   getAuthon: () => getAuthon,
-  initAuthon: () => initAuthon
+  initAuthon: () => initAuthon,
+  renderSocialButtons: () => renderSocialButtons
 });
 module.exports = __toCommonJS(index_exports);
 
@@ -80,10 +81,120 @@ function getAuthon() {
   }
   return store;
 }
+
+// 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 = {
   createAuthonStore,
   getAuthon,
-  initAuthon
+  initAuthon,
+  renderSocialButtons
 });
 //# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts","../src/store.ts","../src/context.ts"],"sourcesContent":["export { createAuthonStore } from './store';\nexport type { AuthonStore } from './store';\nexport { initAuthon, getAuthon } from './context';\n","import { writable, derived, type Readable } from 'svelte/store';\nimport { Authon } from '@authon/js';\nimport type { AuthonConfig } from '@authon/js';\nimport type { AuthonUser } from '@authon/shared';\n\nexport interface AuthonStore {\n  user: Readable<AuthonUser | null>;\n  isSignedIn: Readable<boolean>;\n  isLoading: Readable<boolean>;\n  signOut: () => Promise<void>;\n  openSignIn: () => Promise<void>;\n  openSignUp: () => Promise<void>;\n  getToken: () => string | null;\n  destroy: () => void;\n  client: Authon;\n}\n\n/**\n * Creates an Authon store with reactive Svelte stores.\n *\n * Usage:\n * ```ts\n * import { createAuthonStore } from '@authon/svelte'\n *\n * const authon = createAuthonStore('pk_live_...')\n *\n * // In your component:\n * $: user = $authon.user\n * $: isSignedIn = $authon.isSignedIn\n * ```\n */\nexport function createAuthonStore(\n  publishableKey: string,\n  config?: Omit<AuthonConfig, 'mode'>,\n): AuthonStore {\n  const client = new Authon(publishableKey, config);\n  const userStore = writable<AuthonUser | null>(null);\n  const isLoadingStore = writable(true);\n\n  const isSignedIn = derived(userStore, ($user) => $user !== null);\n\n  client.on('signedIn', (user) => {\n    userStore.set(user as AuthonUser);\n    isLoadingStore.set(false);\n  });\n\n  client.on('signedOut', () => {\n    userStore.set(null);\n  });\n\n  client.on('error', () => {\n    isLoadingStore.set(false);\n  });\n\n  const existingUser = client.getUser();\n  if (existingUser) {\n    userStore.set(existingUser);\n  }\n  isLoadingStore.set(false);\n\n  return {\n    user: { subscribe: userStore.subscribe },\n    isSignedIn,\n    isLoading: { subscribe: isLoadingStore.subscribe },\n    signOut: async () => {\n      await client.signOut();\n      userStore.set(null);\n    },\n    openSignIn: () => client.openSignIn(),\n    openSignUp: () => client.openSignUp(),\n    getToken: () => client.getToken(),\n    destroy: () => client.destroy(),\n    client,\n  };\n}\n","import { setContext, getContext } from 'svelte';\nimport type { AuthonConfig } from '@authon/js';\nimport { createAuthonStore, type AuthonStore } from './store';\n\nconst AUTHON_CONTEXT_KEY = Symbol('authon');\n\n/**\n * Initialize Authon in a Svelte component tree.\n * Call this in your root layout or top-level component.\n *\n * Usage in +layout.svelte:\n * ```svelte\n * <script>\n *   import { initAuthon } from '@authon/svelte'\n *   const authon = initAuthon('pk_live_...')\n * </script>\n * ```\n */\nexport function initAuthon(\n  publishableKey: string,\n  config?: Omit<AuthonConfig, 'mode'>,\n): AuthonStore {\n  const store = createAuthonStore(publishableKey, config);\n  setContext(AUTHON_CONTEXT_KEY, store);\n  return store;\n}\n\n/**\n * Get the Authon store from Svelte context.\n * Must be called within a component tree where `initAuthon` was called.\n *\n * Usage:\n * ```svelte\n * <script>\n *   import { getAuthon } from '@authon/svelte'\n *   const { user, isSignedIn, signOut } = getAuthon()\n * </script>\n * ```\n */\nexport function getAuthon(): AuthonStore {\n  const store = getContext<AuthonStore | undefined>(AUTHON_CONTEXT_KEY);\n  if (!store) {\n    throw new Error('getAuthon() must be called within a component tree where initAuthon() was called.');\n  }\n  return store;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,mBAAiD;AACjD,gBAAuB;AA8BhB,SAAS,kBACd,gBACA,QACa;AACb,QAAM,SAAS,IAAI,iBAAO,gBAAgB,MAAM;AAChD,QAAM,gBAAY,uBAA4B,IAAI;AAClD,QAAM,qBAAiB,uBAAS,IAAI;AAEpC,QAAM,iBAAa,sBAAQ,WAAW,CAAC,UAAU,UAAU,IAAI;AAE/D,SAAO,GAAG,YAAY,CAAC,SAAS;AAC9B,cAAU,IAAI,IAAkB;AAChC,mBAAe,IAAI,KAAK;AAAA,EAC1B,CAAC;AAED,SAAO,GAAG,aAAa,MAAM;AAC3B,cAAU,IAAI,IAAI;AAAA,EACpB,CAAC;AAED,SAAO,GAAG,SAAS,MAAM;AACvB,mBAAe,IAAI,KAAK;AAAA,EAC1B,CAAC;AAED,QAAM,eAAe,OAAO,QAAQ;AACpC,MAAI,cAAc;AAChB,cAAU,IAAI,YAAY;AAAA,EAC5B;AACA,iBAAe,IAAI,KAAK;AAExB,SAAO;AAAA,IACL,MAAM,EAAE,WAAW,UAAU,UAAU;AAAA,IACvC;AAAA,IACA,WAAW,EAAE,WAAW,eAAe,UAAU;AAAA,IACjD,SAAS,YAAY;AACnB,YAAM,OAAO,QAAQ;AACrB,gBAAU,IAAI,IAAI;AAAA,IACpB;AAAA,IACA,YAAY,MAAM,OAAO,WAAW;AAAA,IACpC,YAAY,MAAM,OAAO,WAAW;AAAA,IACpC,UAAU,MAAM,OAAO,SAAS;AAAA,IAChC,SAAS,MAAM,OAAO,QAAQ;AAAA,IAC9B;AAAA,EACF;AACF;;;AC1EA,oBAAuC;AAIvC,IAAM,qBAAqB,uBAAO,QAAQ;AAcnC,SAAS,WACd,gBACA,QACa;AACb,QAAM,QAAQ,kBAAkB,gBAAgB,MAAM;AACtD,gCAAW,oBAAoB,KAAK;AACpC,SAAO;AACT;AAcO,SAAS,YAAyB;AACvC,QAAM,YAAQ,0BAAoC,kBAAkB;AACpE,MAAI,CAAC,OAAO;AACV,UAAM,IAAI,MAAM,mFAAmF;AAAA,EACrG;AACA,SAAO;AACT;","names":[]}
+{"version":3,"sources":["../src/index.ts","../src/store.ts","../src/context.ts","../src/SocialButtons.ts"],"sourcesContent":["export { createAuthonStore } from './store';\nexport type { AuthonStore } from './store';\nexport { initAuthon, getAuthon } from './context';\nexport { renderSocialButtons } from './SocialButtons';\nexport type { SocialButtonsOptions } from './SocialButtons';\n","import { writable, derived, type Readable } from 'svelte/store';\nimport { Authon } from '@authon/js';\nimport type { AuthonConfig } from '@authon/js';\nimport type { AuthonUser } from '@authon/shared';\n\nexport interface AuthonStore {\n  user: Readable<AuthonUser | null>;\n  isSignedIn: Readable<boolean>;\n  isLoading: Readable<boolean>;\n  signOut: () => Promise<void>;\n  openSignIn: () => Promise<void>;\n  openSignUp: () => Promise<void>;\n  getToken: () => string | null;\n  destroy: () => void;\n  client: Authon;\n}\n\n/**\n * Creates an Authon store with reactive Svelte stores.\n *\n * Usage:\n * ```ts\n * import { createAuthonStore } from '@authon/svelte'\n *\n * const authon = createAuthonStore('pk_live_...')\n *\n * // In your component:\n * $: user = $authon.user\n * $: isSignedIn = $authon.isSignedIn\n * ```\n */\nexport function createAuthonStore(\n  publishableKey: string,\n  config?: Omit<AuthonConfig, 'mode'>,\n): AuthonStore {\n  const client = new Authon(publishableKey, config);\n  const userStore = writable<AuthonUser | null>(null);\n  const isLoadingStore = writable(true);\n\n  const isSignedIn = derived(userStore, ($user) => $user !== null);\n\n  client.on('signedIn', (user) => {\n    userStore.set(user as AuthonUser);\n    isLoadingStore.set(false);\n  });\n\n  client.on('signedOut', () => {\n    userStore.set(null);\n  });\n\n  client.on('error', () => {\n    isLoadingStore.set(false);\n  });\n\n  const existingUser = client.getUser();\n  if (existingUser) {\n    userStore.set(existingUser);\n  }\n  isLoadingStore.set(false);\n\n  return {\n    user: { subscribe: userStore.subscribe },\n    isSignedIn,\n    isLoading: { subscribe: isLoadingStore.subscribe },\n    signOut: async () => {\n      await client.signOut();\n      userStore.set(null);\n    },\n    openSignIn: () => client.openSignIn(),\n    openSignUp: () => client.openSignUp(),\n    getToken: () => client.getToken(),\n    destroy: () => client.destroy(),\n    client,\n  };\n}\n","import { setContext, getContext } from 'svelte';\nimport type { AuthonConfig } from '@authon/js';\nimport { createAuthonStore, type AuthonStore } from './store';\n\nconst AUTHON_CONTEXT_KEY = Symbol('authon');\n\n/**\n * Initialize Authon in a Svelte component tree.\n * Call this in your root layout or top-level component.\n *\n * Usage in +layout.svelte:\n * ```svelte\n * <script>\n *   import { initAuthon } from '@authon/svelte'\n *   const authon = initAuthon('pk_live_...')\n * </script>\n * ```\n */\nexport function initAuthon(\n  publishableKey: string,\n  config?: Omit<AuthonConfig, 'mode'>,\n): AuthonStore {\n  const store = createAuthonStore(publishableKey, config);\n  setContext(AUTHON_CONTEXT_KEY, store);\n  return store;\n}\n\n/**\n * Get the Authon store from Svelte context.\n * Must be called within a component tree where `initAuthon` was called.\n *\n * Usage:\n * ```svelte\n * <script>\n *   import { getAuthon } from '@authon/svelte'\n *   const { user, isSignedIn, signOut } = getAuthon()\n * </script>\n * ```\n */\nexport function getAuthon(): AuthonStore {\n  const store = getContext<AuthonStore | undefined>(AUTHON_CONTEXT_KEY);\n  if (!store) {\n    throw new Error('getAuthon() must be called within a component tree where initAuthon() was called.');\n  }\n  return store;\n}\n","import { PROVIDER_COLORS, PROVIDER_DISPLAY_NAMES, type OAuthProviderType } from '@authon/shared';\nimport { getProviderButtonConfig, type Authon } from '@authon/js';\n\nexport interface SocialButtonsOptions {\n  /** Authon client instance */\n  client: Authon;\n  /** Target container element */\n  container: HTMLElement;\n  /** Called after successful OAuth sign-in */\n  onSuccess?: () => void;\n  /** Called on OAuth error */\n  onError?: (error: Error) => void;\n  /** Compact mode — icon-only square buttons in a row (default: false) */\n  compact?: boolean;\n  /** Gap between buttons in px (default: 10, compact default: 12) */\n  gap?: number;\n  /** Custom labels per provider */\n  labels?: Partial<Record<OAuthProviderType, string>>;\n  /** Icon size (default: 20, compact default: 24) */\n  iconSize?: number;\n  /** Border radius in px (default: 10) */\n  borderRadius?: number;\n  /** Button height in px (default: 48) */\n  height?: number;\n  /** Button size for compact mode in px (default: 48) */\n  size?: number;\n}\n\n/**\n * Render social login buttons into a container element.\n *\n * Usage in +page.svelte:\n * ```svelte\n * <script>\n *   import { getAuthon } from '@authon/svelte'\n *   import { renderSocialButtons } from '@authon/svelte'\n *   import { onMount } from 'svelte'\n *\n *   const { client } = getAuthon()\n *   let container: HTMLElement\n *\n *   onMount(() => {\n *     const cleanup = renderSocialButtons({\n *       client,\n *       container,\n *       compact: true,\n *       onError: (err) => console.error(err),\n *     })\n *     return cleanup\n *   })\n * </script>\n *\n * <div bind:this={container}></div>\n * ```\n */\nexport function renderSocialButtons(options: SocialButtonsOptions): () => 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    // Inject keyframe if not present\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  // Init\n  client.getProviders().then((p: OAuthProviderType[]) => {\n    providers = p;\n    if (providers.length > 0) {\n      renderButtons(providers);\n    }\n  });\n\n  // Cleanup\n  return () => {\n    container.innerHTML = '';\n    buttons = [];\n  };\n}\n"],"mappings":"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","names":["import_js"]}

package/dist/index.d.cts

@@ -1,6 +1,6 @@
 import { Readable } from 'svelte/store';
 import { Authon, AuthonConfig } from '@authon/js';
-import { AuthonUser } from '@authon/shared';
+import { AuthonUser, OAuthProviderType } from '@authon/shared';
 
 interface AuthonStore {
     user: Readable<AuthonUser | null>;
@@ -56,4 +56,57 @@ declare function initAuthon(publishableKey: string, config?: Omit<AuthonConfig,
  */
 declare function getAuthon(): AuthonStore;
 
-export { type AuthonStore, createAuthonStore, getAuthon, initAuthon };
+interface SocialButtonsOptions {
+    /** Authon client instance */
+    client: Authon;
+    /** Target container element */
+    container: HTMLElement;
+    /** Called after successful OAuth sign-in */
+    onSuccess?: () => void;
+    /** Called on OAuth error */
+    onError?: (error: Error) => void;
+    /** Compact mode — icon-only square buttons in a row (default: false) */
+    compact?: boolean;
+    /** Gap between buttons in px (default: 10, compact default: 12) */
+    gap?: number;
+    /** Custom labels per provider */
+    labels?: Partial<Record<OAuthProviderType, string>>;
+    /** Icon size (default: 20, compact default: 24) */
+    iconSize?: number;
+    /** Border radius in px (default: 10) */
+    borderRadius?: number;
+    /** Button height in px (default: 48) */
+    height?: number;
+    /** Button size for compact mode in px (default: 48) */
+    size?: number;
+}
+/**
+ * Render social login buttons into a container element.
+ *
+ * Usage in +page.svelte:
+ * ```svelte
+ * <script>
+ *   import { getAuthon } from '@authon/svelte'
+ *   import { renderSocialButtons } from '@authon/svelte'
+ *   import { onMount } from 'svelte'
+ *
+ *   const { client } = getAuthon()
+ *   let container: HTMLElement
+ *
+ *   onMount(() => {
+ *     const cleanup = renderSocialButtons({
+ *       client,
+ *       container,
+ *       compact: true,
+ *       onError: (err) => console.error(err),
+ *     })
+ *     return cleanup
+ *   })
+ * </script>
+ *
+ * <div bind:this={container}></div>
+ * ```
+ */
+declare function renderSocialButtons(options: SocialButtonsOptions): () => void;
+
+export { type AuthonStore, type SocialButtonsOptions, createAuthonStore, getAuthon, initAuthon, renderSocialButtons };

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import { Readable } from 'svelte/store';
 import { Authon, AuthonConfig } from '@authon/js';
-import { AuthonUser } from '@authon/shared';
+import { AuthonUser, OAuthProviderType } from '@authon/shared';
 
 interface AuthonStore {
     user: Readable<AuthonUser | null>;
@@ -56,4 +56,57 @@ declare function initAuthon(publishableKey: string, config?: Omit<AuthonConfig,
  */
 declare function getAuthon(): AuthonStore;
 
-export { type AuthonStore, createAuthonStore, getAuthon, initAuthon };
+interface SocialButtonsOptions {
+    /** Authon client instance */
+    client: Authon;
+    /** Target container element */
+    container: HTMLElement;
+    /** Called after successful OAuth sign-in */
+    onSuccess?: () => void;
+    /** Called on OAuth error */
+    onError?: (error: Error) => void;
+    /** Compact mode — icon-only square buttons in a row (default: false) */
+    compact?: boolean;
+    /** Gap between buttons in px (default: 10, compact default: 12) */
+    gap?: number;
+    /** Custom labels per provider */
+    labels?: Partial<Record<OAuthProviderType, string>>;
+    /** Icon size (default: 20, compact default: 24) */
+    iconSize?: number;
+    /** Border radius in px (default: 10) */
+    borderRadius?: number;
+    /** Button height in px (default: 48) */
+    height?: number;
+    /** Button size for compact mode in px (default: 48) */
+    size?: number;
+}
+/**
+ * Render social login buttons into a container element.
+ *
+ * Usage in +page.svelte:
+ * ```svelte
+ * <script>
+ *   import { getAuthon } from '@authon/svelte'
+ *   import { renderSocialButtons } from '@authon/svelte'
+ *   import { onMount } from 'svelte'
+ *
+ *   const { client } = getAuthon()
+ *   let container: HTMLElement
+ *
+ *   onMount(() => {
+ *     const cleanup = renderSocialButtons({
+ *       client,
+ *       container,
+ *       compact: true,
+ *       onError: (err) => console.error(err),
+ *     })
+ *     return cleanup
+ *   })
+ * </script>
+ *
+ * <div bind:this={container}></div>
+ * ```
+ */
+declare function renderSocialButtons(options: SocialButtonsOptions): () => void;
+
+export { type AuthonStore, type SocialButtonsOptions, createAuthonStore, getAuthon, initAuthon, renderSocialButtons };

package/dist/index.js

@@ -52,9 +52,119 @@ function getAuthon() {
   }
   return store;
 }
+
+// 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 {
   createAuthonStore,
   getAuthon,
-  initAuthon
+  initAuthon,
+  renderSocialButtons
 };
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/store.ts","../src/context.ts"],"sourcesContent":["import { writable, derived, type Readable } from 'svelte/store';\nimport { Authon } from '@authon/js';\nimport type { AuthonConfig } from '@authon/js';\nimport type { AuthonUser } from '@authon/shared';\n\nexport interface AuthonStore {\n  user: Readable<AuthonUser | null>;\n  isSignedIn: Readable<boolean>;\n  isLoading: Readable<boolean>;\n  signOut: () => Promise<void>;\n  openSignIn: () => Promise<void>;\n  openSignUp: () => Promise<void>;\n  getToken: () => string | null;\n  destroy: () => void;\n  client: Authon;\n}\n\n/**\n * Creates an Authon store with reactive Svelte stores.\n *\n * Usage:\n * ```ts\n * import { createAuthonStore } from '@authon/svelte'\n *\n * const authon = createAuthonStore('pk_live_...')\n *\n * // In your component:\n * $: user = $authon.user\n * $: isSignedIn = $authon.isSignedIn\n * ```\n */\nexport function createAuthonStore(\n  publishableKey: string,\n  config?: Omit<AuthonConfig, 'mode'>,\n): AuthonStore {\n  const client = new Authon(publishableKey, config);\n  const userStore = writable<AuthonUser | null>(null);\n  const isLoadingStore = writable(true);\n\n  const isSignedIn = derived(userStore, ($user) => $user !== null);\n\n  client.on('signedIn', (user) => {\n    userStore.set(user as AuthonUser);\n    isLoadingStore.set(false);\n  });\n\n  client.on('signedOut', () => {\n    userStore.set(null);\n  });\n\n  client.on('error', () => {\n    isLoadingStore.set(false);\n  });\n\n  const existingUser = client.getUser();\n  if (existingUser) {\n    userStore.set(existingUser);\n  }\n  isLoadingStore.set(false);\n\n  return {\n    user: { subscribe: userStore.subscribe },\n    isSignedIn,\n    isLoading: { subscribe: isLoadingStore.subscribe },\n    signOut: async () => {\n      await client.signOut();\n      userStore.set(null);\n    },\n    openSignIn: () => client.openSignIn(),\n    openSignUp: () => client.openSignUp(),\n    getToken: () => client.getToken(),\n    destroy: () => client.destroy(),\n    client,\n  };\n}\n","import { setContext, getContext } from 'svelte';\nimport type { AuthonConfig } from '@authon/js';\nimport { createAuthonStore, type AuthonStore } from './store';\n\nconst AUTHON_CONTEXT_KEY = Symbol('authon');\n\n/**\n * Initialize Authon in a Svelte component tree.\n * Call this in your root layout or top-level component.\n *\n * Usage in +layout.svelte:\n * ```svelte\n * <script>\n *   import { initAuthon } from '@authon/svelte'\n *   const authon = initAuthon('pk_live_...')\n * </script>\n * ```\n */\nexport function initAuthon(\n  publishableKey: string,\n  config?: Omit<AuthonConfig, 'mode'>,\n): AuthonStore {\n  const store = createAuthonStore(publishableKey, config);\n  setContext(AUTHON_CONTEXT_KEY, store);\n  return store;\n}\n\n/**\n * Get the Authon store from Svelte context.\n * Must be called within a component tree where `initAuthon` was called.\n *\n * Usage:\n * ```svelte\n * <script>\n *   import { getAuthon } from '@authon/svelte'\n *   const { user, isSignedIn, signOut } = getAuthon()\n * </script>\n * ```\n */\nexport function getAuthon(): AuthonStore {\n  const store = getContext<AuthonStore | undefined>(AUTHON_CONTEXT_KEY);\n  if (!store) {\n    throw new Error('getAuthon() must be called within a component tree where initAuthon() was called.');\n  }\n  return store;\n}\n"],"mappings":";AAAA,SAAS,UAAU,eAA8B;AACjD,SAAS,cAAc;AA8BhB,SAAS,kBACd,gBACA,QACa;AACb,QAAM,SAAS,IAAI,OAAO,gBAAgB,MAAM;AAChD,QAAM,YAAY,SAA4B,IAAI;AAClD,QAAM,iBAAiB,SAAS,IAAI;AAEpC,QAAM,aAAa,QAAQ,WAAW,CAAC,UAAU,UAAU,IAAI;AAE/D,SAAO,GAAG,YAAY,CAAC,SAAS;AAC9B,cAAU,IAAI,IAAkB;AAChC,mBAAe,IAAI,KAAK;AAAA,EAC1B,CAAC;AAED,SAAO,GAAG,aAAa,MAAM;AAC3B,cAAU,IAAI,IAAI;AAAA,EACpB,CAAC;AAED,SAAO,GAAG,SAAS,MAAM;AACvB,mBAAe,IAAI,KAAK;AAAA,EAC1B,CAAC;AAED,QAAM,eAAe,OAAO,QAAQ;AACpC,MAAI,cAAc;AAChB,cAAU,IAAI,YAAY;AAAA,EAC5B;AACA,iBAAe,IAAI,KAAK;AAExB,SAAO;AAAA,IACL,MAAM,EAAE,WAAW,UAAU,UAAU;AAAA,IACvC;AAAA,IACA,WAAW,EAAE,WAAW,eAAe,UAAU;AAAA,IACjD,SAAS,YAAY;AACnB,YAAM,OAAO,QAAQ;AACrB,gBAAU,IAAI,IAAI;AAAA,IACpB;AAAA,IACA,YAAY,MAAM,OAAO,WAAW;AAAA,IACpC,YAAY,MAAM,OAAO,WAAW;AAAA,IACpC,UAAU,MAAM,OAAO,SAAS;AAAA,IAChC,SAAS,MAAM,OAAO,QAAQ;AAAA,IAC9B;AAAA,EACF;AACF;;;AC1EA,SAAS,YAAY,kBAAkB;AAIvC,IAAM,qBAAqB,uBAAO,QAAQ;AAcnC,SAAS,WACd,gBACA,QACa;AACb,QAAM,QAAQ,kBAAkB,gBAAgB,MAAM;AACtD,aAAW,oBAAoB,KAAK;AACpC,SAAO;AACT;AAcO,SAAS,YAAyB;AACvC,QAAM,QAAQ,WAAoC,kBAAkB;AACpE,MAAI,CAAC,OAAO;AACV,UAAM,IAAI,MAAM,mFAAmF;AAAA,EACrG;AACA,SAAO;AACT;","names":[]}
+{"version":3,"sources":["../src/store.ts","../src/context.ts","../src/SocialButtons.ts"],"sourcesContent":["import { writable, derived, type Readable } from 'svelte/store';\nimport { Authon } from '@authon/js';\nimport type { AuthonConfig } from '@authon/js';\nimport type { AuthonUser } from '@authon/shared';\n\nexport interface AuthonStore {\n  user: Readable<AuthonUser | null>;\n  isSignedIn: Readable<boolean>;\n  isLoading: Readable<boolean>;\n  signOut: () => Promise<void>;\n  openSignIn: () => Promise<void>;\n  openSignUp: () => Promise<void>;\n  getToken: () => string | null;\n  destroy: () => void;\n  client: Authon;\n}\n\n/**\n * Creates an Authon store with reactive Svelte stores.\n *\n * Usage:\n * ```ts\n * import { createAuthonStore } from '@authon/svelte'\n *\n * const authon = createAuthonStore('pk_live_...')\n *\n * // In your component:\n * $: user = $authon.user\n * $: isSignedIn = $authon.isSignedIn\n * ```\n */\nexport function createAuthonStore(\n  publishableKey: string,\n  config?: Omit<AuthonConfig, 'mode'>,\n): AuthonStore {\n  const client = new Authon(publishableKey, config);\n  const userStore = writable<AuthonUser | null>(null);\n  const isLoadingStore = writable(true);\n\n  const isSignedIn = derived(userStore, ($user) => $user !== null);\n\n  client.on('signedIn', (user) => {\n    userStore.set(user as AuthonUser);\n    isLoadingStore.set(false);\n  });\n\n  client.on('signedOut', () => {\n    userStore.set(null);\n  });\n\n  client.on('error', () => {\n    isLoadingStore.set(false);\n  });\n\n  const existingUser = client.getUser();\n  if (existingUser) {\n    userStore.set(existingUser);\n  }\n  isLoadingStore.set(false);\n\n  return {\n    user: { subscribe: userStore.subscribe },\n    isSignedIn,\n    isLoading: { subscribe: isLoadingStore.subscribe },\n    signOut: async () => {\n      await client.signOut();\n      userStore.set(null);\n    },\n    openSignIn: () => client.openSignIn(),\n    openSignUp: () => client.openSignUp(),\n    getToken: () => client.getToken(),\n    destroy: () => client.destroy(),\n    client,\n  };\n}\n","import { setContext, getContext } from 'svelte';\nimport type { AuthonConfig } from '@authon/js';\nimport { createAuthonStore, type AuthonStore } from './store';\n\nconst AUTHON_CONTEXT_KEY = Symbol('authon');\n\n/**\n * Initialize Authon in a Svelte component tree.\n * Call this in your root layout or top-level component.\n *\n * Usage in +layout.svelte:\n * ```svelte\n * <script>\n *   import { initAuthon } from '@authon/svelte'\n *   const authon = initAuthon('pk_live_...')\n * </script>\n * ```\n */\nexport function initAuthon(\n  publishableKey: string,\n  config?: Omit<AuthonConfig, 'mode'>,\n): AuthonStore {\n  const store = createAuthonStore(publishableKey, config);\n  setContext(AUTHON_CONTEXT_KEY, store);\n  return store;\n}\n\n/**\n * Get the Authon store from Svelte context.\n * Must be called within a component tree where `initAuthon` was called.\n *\n * Usage:\n * ```svelte\n * <script>\n *   import { getAuthon } from '@authon/svelte'\n *   const { user, isSignedIn, signOut } = getAuthon()\n * </script>\n * ```\n */\nexport function getAuthon(): AuthonStore {\n  const store = getContext<AuthonStore | undefined>(AUTHON_CONTEXT_KEY);\n  if (!store) {\n    throw new Error('getAuthon() must be called within a component tree where initAuthon() was called.');\n  }\n  return store;\n}\n","import { PROVIDER_COLORS, PROVIDER_DISPLAY_NAMES, type OAuthProviderType } from '@authon/shared';\nimport { getProviderButtonConfig, type Authon } from '@authon/js';\n\nexport interface SocialButtonsOptions {\n  /** Authon client instance */\n  client: Authon;\n  /** Target container element */\n  container: HTMLElement;\n  /** Called after successful OAuth sign-in */\n  onSuccess?: () => void;\n  /** Called on OAuth error */\n  onError?: (error: Error) => void;\n  /** Compact mode — icon-only square buttons in a row (default: false) */\n  compact?: boolean;\n  /** Gap between buttons in px (default: 10, compact default: 12) */\n  gap?: number;\n  /** Custom labels per provider */\n  labels?: Partial<Record<OAuthProviderType, string>>;\n  /** Icon size (default: 20, compact default: 24) */\n  iconSize?: number;\n  /** Border radius in px (default: 10) */\n  borderRadius?: number;\n  /** Button height in px (default: 48) */\n  height?: number;\n  /** Button size for compact mode in px (default: 48) */\n  size?: number;\n}\n\n/**\n * Render social login buttons into a container element.\n *\n * Usage in +page.svelte:\n * ```svelte\n * <script>\n *   import { getAuthon } from '@authon/svelte'\n *   import { renderSocialButtons } from '@authon/svelte'\n *   import { onMount } from 'svelte'\n *\n *   const { client } = getAuthon()\n *   let container: HTMLElement\n *\n *   onMount(() => {\n *     const cleanup = renderSocialButtons({\n *       client,\n *       container,\n *       compact: true,\n *       onError: (err) => console.error(err),\n *     })\n *     return cleanup\n *   })\n * </script>\n *\n * <div bind:this={container}></div>\n * ```\n */\nexport function renderSocialButtons(options: SocialButtonsOptions): () => 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    // Inject keyframe if not present\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  // Init\n  client.getProviders().then((p: OAuthProviderType[]) => {\n    providers = p;\n    if (providers.length > 0) {\n      renderButtons(providers);\n    }\n  });\n\n  // Cleanup\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/svelte",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "description": "Authon Svelte SDK — stores and components",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -37,8 +37,8 @@
     "store"
   ],
   "dependencies": {
-    "@authon/js": "workspace:^",
-    "@authon/shared": "workspace:^"
+    "@authon/js": "^0.2.1",
+    "@authon/shared": "^0.2.0"
   },
   "peerDependencies": {
     "svelte": "^4.0.0 || ^5.0.0"