@authon/vue 0.1.0

package/README.md

@@ -0,0 +1,125 @@
+# @authon/vue
+
+Vue 3 SDK for [Authon](https://authon.dev) — plugin, composables, and components.
+
+## Install
+
+```bash
+npm install @authon/vue
+# or
+pnpm add @authon/vue
+```
+
+Requires `vue >= 3.3.0`.
+
+## Quick Start
+
+### 1. Install the Plugin
+
+```ts
+// main.ts
+import { createApp } from 'vue';
+import { AuthonPlugin } from '@authon/vue';
+import App from './App.vue';
+
+const app = createApp(App);
+app.use(AuthonPlugin, {
+  publishableKey: 'pk_live_...',
+});
+app.mount('#app');
+```
+
+### 2. Use Composables
+
+```vue
+<script setup lang="ts">
+import { useAuthon, useUser } from '@authon/vue';
+
+const { isSignedIn, openSignIn, signOut } = useAuthon();
+const { user, isLoading } = useUser();
+</script>
+
+<template>
+  <div v-if="isLoading">Loading...</div>
+  <div v-else-if="isSignedIn">
+    <p>Welcome, {{ user?.displayName }}</p>
+    <button @click="signOut()">Sign Out</button>
+  </div>
+  <div v-else>
+    <button @click="openSignIn()">Sign In</button>
+  </div>
+</template>
+```
+
+### 3. Use Components
+
+```vue
+<template>
+  <SignedIn>
+    <UserButton />
+  </SignedIn>
+  <SignedOut>
+    <button @click="openSignIn()">Sign In</button>
+  </SignedOut>
+</template>
+
+<script setup lang="ts">
+import { SignedIn, SignedOut, UserButton, useAuthon } from '@authon/vue';
+
+const { openSignIn } = useAuthon();
+</script>
+```
+
+## API Reference
+
+### Plugin
+
+```ts
+app.use(AuthonPlugin, {
+  publishableKey: string;
+  apiUrl?: string;
+  theme?: 'light' | 'dark' | 'auto';
+  locale?: string;
+  appearance?: Partial<BrandingConfig>;
+});
+```
+
+### Composables
+
+#### `useAuthon()`
+
+```ts
+const {
+  isSignedIn,  // Ref<boolean>
+  isLoading,   // Ref<boolean>
+  user,        // Ref<AuthonUser | null>
+  signOut,     // () => Promise<void>
+  openSignIn,  // () => Promise<void>
+  openSignUp,  // () => Promise<void>
+  getToken,    // () => string | null
+  client,      // Authon instance
+} = useAuthon();
+```
+
+#### `useUser()`
+
+```ts
+const { user, isLoading } = useUser();
+```
+
+### Components
+
+| Component | Description |
+|-----------|-------------|
+| `<SignedIn>` | Renders slot only when signed in |
+| `<SignedOut>` | Renders slot only when signed out |
+| `<UserButton>` | Avatar dropdown with sign-out |
+| `<Protect>` | Conditional rendering with fallback slot |
+
+## Documentation
+
+[authon.dev/docs](https://authon.dev/docs)
+
+## License
+
+[MIT](../../LICENSE)

package/dist/index.cjs

@@ -0,0 +1,299 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  AUTHON_KEY: () => AUTHON_KEY,
+  AuthonSignIn: () => AuthonSignIn,
+  AuthonSignUp: () => AuthonSignUp,
+  AuthonSignedIn: () => AuthonSignedIn,
+  AuthonSignedOut: () => AuthonSignedOut,
+  AuthonUserButton: () => AuthonUserButton,
+  createAuthon: () => createAuthon,
+  useAuthon: () => useAuthon,
+  useUser: () => useUser
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/plugin.ts
+var import_vue = require("vue");
+var import_js = require("@authon/js");
+var AUTHON_KEY = /* @__PURE__ */ Symbol("authon");
+function createAuthon(options) {
+  const state = (0, import_vue.reactive)({
+    isSignedIn: false,
+    isLoading: true,
+    user: null,
+    client: null
+  });
+  return {
+    install(app) {
+      const client = new import_js.Authon(options.publishableKey, options.config);
+      state.client = client;
+      client.on("signedIn", (user) => {
+        state.user = user;
+        state.isSignedIn = true;
+        state.isLoading = false;
+      });
+      client.on("signedOut", () => {
+        state.user = null;
+        state.isSignedIn = false;
+      });
+      client.on("error", () => {
+        state.isLoading = false;
+      });
+      state.isLoading = false;
+      app.provide(AUTHON_KEY, state);
+      app.config.globalProperties.$authon = state;
+    }
+  };
+}
+
+// src/composables.ts
+var import_vue2 = require("vue");
+function requireState() {
+  const state = (0, import_vue2.inject)(AUTHON_KEY);
+  if (!state) {
+    throw new Error("useAuthon() must be called inside a component tree with createAuthon() installed");
+  }
+  return state;
+}
+function useAuthon() {
+  const s = requireState();
+  async function signOut() {
+    await s.client?.signOut();
+    s.user = null;
+    s.isSignedIn = false;
+  }
+  async function openSignIn() {
+    await s.client?.openSignIn();
+  }
+  async function openSignUp() {
+    await s.client?.openSignUp();
+  }
+  function getToken() {
+    return s.client?.getToken() ?? null;
+  }
+  return {
+    ...s,
+    signOut,
+    openSignIn,
+    openSignUp,
+    getToken
+  };
+}
+function useUser() {
+  const s = requireState();
+  return {
+    user: (0, import_vue2.computed)(() => s.user),
+    isLoading: (0, import_vue2.computed)(() => s.isLoading)
+  };
+}
+
+// src/components.ts
+var import_vue3 = require("vue");
+var AuthonSignIn = (0, import_vue3.defineComponent)({
+  name: "AuthonSignIn",
+  props: {
+    mode: {
+      type: String,
+      default: "popup"
+    }
+  },
+  setup(props) {
+    const { client } = useAuthon();
+    (0, import_vue3.onMounted)(() => {
+      if (props.mode === "popup") {
+        client?.openSignIn();
+      }
+    });
+    return () => {
+      if (props.mode === "embedded") {
+        return (0, import_vue3.h)("div", { id: "authon-signin-container" });
+      }
+      return null;
+    };
+  }
+});
+var AuthonSignUp = (0, import_vue3.defineComponent)({
+  name: "AuthonSignUp",
+  props: {
+    mode: {
+      type: String,
+      default: "popup"
+    }
+  },
+  setup(props) {
+    const { client } = useAuthon();
+    (0, import_vue3.onMounted)(() => {
+      if (props.mode === "popup") {
+        client?.openSignUp();
+      }
+    });
+    return () => {
+      if (props.mode === "embedded") {
+        return (0, import_vue3.h)("div", { id: "authon-signup-container" });
+      }
+      return null;
+    };
+  }
+});
+var AuthonUserButton = (0, import_vue3.defineComponent)({
+  name: "AuthonUserButton",
+  setup() {
+    const { user, isSignedIn, signOut, openSignIn } = useAuthon();
+    const open = (0, import_vue3.ref)(false);
+    const initials = (0, import_vue3.computed)(() => {
+      if (!user) return "?";
+      const u = user;
+      if (u.displayName) {
+        return u.displayName.split(" ").map((n) => n[0]).join("").toUpperCase().slice(0, 2);
+      }
+      return (u.email?.[0] ?? "?").toUpperCase();
+    });
+    return () => {
+      if (!isSignedIn) {
+        return (0, import_vue3.h)(
+          "button",
+          {
+            onClick: () => openSignIn(),
+            style: {
+              padding: "8px 16px",
+              borderRadius: "8px",
+              border: "none",
+              background: "linear-gradient(135deg, #7c3aed, #4f46e5)",
+              color: "#fff",
+              cursor: "pointer",
+              fontSize: "14px",
+              fontWeight: 600
+            }
+          },
+          "Sign In"
+        );
+      }
+      const avatarUrl = user?.avatarUrl;
+      const displayName = user?.displayName;
+      const email = user?.email;
+      return (0, import_vue3.h)("div", { style: { position: "relative", display: "inline-block" } }, [
+        (0, import_vue3.h)(
+          "button",
+          {
+            onClick: () => open.value = !open.value,
+            style: {
+              width: "36px",
+              height: "36px",
+              borderRadius: "50%",
+              border: "2px solid #7c3aed",
+              background: avatarUrl ? "transparent" : "linear-gradient(135deg, #7c3aed, #4f46e5)",
+              cursor: "pointer",
+              padding: 0,
+              overflow: "hidden",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              color: "#fff",
+              fontSize: "13px",
+              fontWeight: 700
+            }
+          },
+          avatarUrl ? [(0, import_vue3.h)("img", { src: avatarUrl, alt: displayName ?? "avatar", style: { width: "100%", height: "100%", objectFit: "cover" } })] : [initials.value]
+        ),
+        open.value ? (0, import_vue3.h)(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              right: 0,
+              top: "44px",
+              minWidth: "200px",
+              background: "#fff",
+              border: "1px solid #e5e7eb",
+              borderRadius: "12px",
+              boxShadow: "0 8px 24px rgba(0,0,0,0.12)",
+              zIndex: 9999,
+              overflow: "hidden"
+            }
+          },
+          [
+            (0, import_vue3.h)("div", { style: { padding: "12px 16px", borderBottom: "1px solid #f3f4f6" } }, [
+              displayName && (0, import_vue3.h)("div", { style: { fontSize: "14px", fontWeight: 600, color: "#111827" } }, displayName),
+              email && (0, import_vue3.h)("div", { style: { fontSize: "12px", color: "#6b7280", marginTop: "2px" } }, email)
+            ]),
+            (0, import_vue3.h)(
+              "button",
+              {
+                onClick: async () => {
+                  open.value = false;
+                  await signOut();
+                },
+                style: {
+                  display: "block",
+                  width: "100%",
+                  padding: "10px 16px",
+                  textAlign: "left",
+                  background: "none",
+                  border: "none",
+                  cursor: "pointer",
+                  fontSize: "14px",
+                  color: "#ef4444",
+                  fontWeight: 500
+                }
+              },
+              "Sign out"
+            )
+          ]
+        ) : null
+      ]);
+    };
+  }
+});
+var AuthonSignedIn = (0, import_vue3.defineComponent)({
+  name: "AuthonSignedIn",
+  setup(_, { slots }) {
+    const { isSignedIn, isLoading } = useAuthon();
+    return () => {
+      if (isLoading || !isSignedIn) return null;
+      return slots.default?.();
+    };
+  }
+});
+var AuthonSignedOut = (0, import_vue3.defineComponent)({
+  name: "AuthonSignedOut",
+  setup(_, { slots }) {
+    const { isSignedIn, isLoading } = useAuthon();
+    return () => {
+      if (isLoading || isSignedIn) return null;
+      return slots.default?.();
+    };
+  }
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  AUTHON_KEY,
+  AuthonSignIn,
+  AuthonSignUp,
+  AuthonSignedIn,
+  AuthonSignedOut,
+  AuthonUserButton,
+  createAuthon,
+  useAuthon,
+  useUser
+});
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts","../src/plugin.ts","../src/composables.ts","../src/components.ts"],"sourcesContent":["export { createAuthon, AUTHON_KEY } from './plugin';\nexport type { AuthonState, AuthonPluginOptions } from './plugin';\nexport { useAuthon, useUser } from './composables';\nexport {\n  AuthonSignIn,\n  AuthonSignUp,\n  AuthonUserButton,\n  AuthonSignedIn,\n  AuthonSignedOut,\n} from './components';\n","import type { App } from 'vue';\nimport { reactive } from 'vue';\nimport { Authon } from '@authon/js';\nimport type { AuthonConfig } from '@authon/js';\nimport type { AuthonUser } from '@authon/shared';\n\nexport const AUTHON_KEY = Symbol('authon');\n\nexport interface AuthonState {\n  isSignedIn: boolean;\n  isLoading: boolean;\n  user: AuthonUser | null;\n  client: Authon | null;\n}\n\nexport interface AuthonPluginOptions {\n  publishableKey: string;\n  config?: AuthonConfig;\n}\n\nexport function createAuthon(options: AuthonPluginOptions) {\n  const state = reactive<AuthonState>({\n    isSignedIn: false,\n    isLoading: true,\n    user: null,\n    client: null,\n  });\n\n  return {\n    install(app: App) {\n      const client = new Authon(options.publishableKey, options.config);\n      state.client = client as unknown as Authon;\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      state.isLoading = false;\n\n      app.provide(AUTHON_KEY, state);\n\n      app.config.globalProperties.$authon = state;\n    },\n  };\n}\n","import { inject, computed } from 'vue';\nimport type { ComputedRef } from 'vue';\nimport { AUTHON_KEY } from './plugin';\nimport type { AuthonState } from './plugin';\nimport type { AuthonUser } from '@authon/shared';\n\nfunction requireState(): AuthonState {\n  const state = inject<AuthonState>(AUTHON_KEY);\n  if (!state) {\n    throw new Error('useAuthon() must be called inside a component tree with createAuthon() installed');\n  }\n  return state;\n}\n\nexport function useAuthon(): AuthonState & {\n  signOut: () => Promise<void>;\n  openSignIn: () => Promise<void>;\n  openSignUp: () => Promise<void>;\n  getToken: () => string | null;\n} {\n  const s = requireState();\n\n  async function signOut(): Promise<void> {\n    await s.client?.signOut();\n    s.user = null;\n    s.isSignedIn = false;\n  }\n\n  async function openSignIn(): Promise<void> {\n    await s.client?.openSignIn();\n  }\n\n  async function openSignUp(): Promise<void> {\n    await s.client?.openSignUp();\n  }\n\n  function getToken(): string | null {\n    return s.client?.getToken() ?? null;\n  }\n\n  return {\n    ...s,\n    signOut,\n    openSignIn,\n    openSignUp,\n    getToken,\n  };\n}\n\nexport function useUser(): { user: ComputedRef<AuthonUser | null>; isLoading: ComputedRef<boolean> } {\n  const s = requireState();\n  return {\n    user: computed(() => s.user),\n    isLoading: computed(() => s.isLoading),\n  };\n}\n","import { defineComponent, h, onMounted, ref, computed } from 'vue';\nimport { useAuthon } from './composables';\n\nexport const AuthonSignIn = defineComponent({\n  name: 'AuthonSignIn',\n  props: {\n    mode: {\n      type: String as () => 'popup' | 'embedded',\n      default: 'popup',\n    },\n  },\n  setup(props) {\n    const { client } = useAuthon();\n\n    onMounted(() => {\n      if (props.mode === 'popup') {\n        client?.openSignIn();\n      }\n    });\n\n    return () => {\n      if (props.mode === 'embedded') {\n        return h('div', { id: 'authon-signin-container' });\n      }\n      return null;\n    };\n  },\n});\n\nexport const AuthonSignUp = defineComponent({\n  name: 'AuthonSignUp',\n  props: {\n    mode: {\n      type: String as () => 'popup' | 'embedded',\n      default: 'popup',\n    },\n  },\n  setup(props) {\n    const { client } = useAuthon();\n\n    onMounted(() => {\n      if (props.mode === 'popup') {\n        client?.openSignUp();\n      }\n    });\n\n    return () => {\n      if (props.mode === 'embedded') {\n        return h('div', { id: 'authon-signup-container' });\n      }\n      return null;\n    };\n  },\n});\n\nexport const AuthonUserButton = defineComponent({\n  name: 'AuthonUserButton',\n  setup() {\n    const { user, isSignedIn, signOut, openSignIn } = useAuthon();\n    const open = ref(false);\n\n    const initials = computed(() => {\n      if (!user) return '?';\n      const u = user as typeof user;\n      if ((u as { displayName?: string | null }).displayName) {\n        return ((u as { displayName: string }).displayName)\n          .split(' ')\n          .map((n: string) => n[0])\n          .join('')\n          .toUpperCase()\n          .slice(0, 2);\n      }\n      return ((u as { email?: string | null }).email?.[0] ?? '?').toUpperCase();\n    });\n\n    return () => {\n      if (!isSignedIn) {\n        return h(\n          'button',\n          {\n            onClick: () => openSignIn(),\n            style: {\n              padding: '8px 16px',\n              borderRadius: '8px',\n              border: 'none',\n              background: 'linear-gradient(135deg, #7c3aed, #4f46e5)',\n              color: '#fff',\n              cursor: 'pointer',\n              fontSize: '14px',\n              fontWeight: 600,\n            },\n          },\n          'Sign In',\n        );\n      }\n\n      const avatarUrl = (user as { avatarUrl?: string | null } | null)?.avatarUrl;\n      const displayName = (user as { displayName?: string | null } | null)?.displayName;\n      const email = (user as { email?: string | null } | null)?.email;\n\n      return h('div', { style: { position: 'relative', display: 'inline-block' } }, [\n        h(\n          'button',\n          {\n            onClick: () => (open.value = !open.value),\n            style: {\n              width: '36px',\n              height: '36px',\n              borderRadius: '50%',\n              border: '2px solid #7c3aed',\n              background: avatarUrl ? 'transparent' : 'linear-gradient(135deg, #7c3aed, #4f46e5)',\n              cursor: 'pointer',\n              padding: 0,\n              overflow: 'hidden',\n              display: 'flex',\n              alignItems: 'center',\n              justifyContent: 'center',\n              color: '#fff',\n              fontSize: '13px',\n              fontWeight: 700,\n            },\n          },\n          avatarUrl\n            ? [h('img', { src: avatarUrl, alt: displayName ?? 'avatar', style: { width: '100%', height: '100%', objectFit: 'cover' } })]\n            : [initials.value],\n        ),\n        open.value\n          ? h(\n              'div',\n              {\n                style: {\n                  position: 'absolute',\n                  right: 0,\n                  top: '44px',\n                  minWidth: '200px',\n                  background: '#fff',\n                  border: '1px solid #e5e7eb',\n                  borderRadius: '12px',\n                  boxShadow: '0 8px 24px rgba(0,0,0,0.12)',\n                  zIndex: 9999,\n                  overflow: 'hidden',\n                },\n              },\n              [\n                h('div', { style: { padding: '12px 16px', borderBottom: '1px solid #f3f4f6' } }, [\n                  displayName && h('div', { style: { fontSize: '14px', fontWeight: 600, color: '#111827' } }, displayName),\n                  email && h('div', { style: { fontSize: '12px', color: '#6b7280', marginTop: '2px' } }, email),\n                ]),\n                h(\n                  'button',\n                  {\n                    onClick: async () => {\n                      open.value = false;\n                      await signOut();\n                    },\n                    style: {\n                      display: 'block',\n                      width: '100%',\n                      padding: '10px 16px',\n                      textAlign: 'left',\n                      background: 'none',\n                      border: 'none',\n                      cursor: 'pointer',\n                      fontSize: '14px',\n                      color: '#ef4444',\n                      fontWeight: 500,\n                    },\n                  },\n                  'Sign out',\n                ),\n              ],\n            )\n          : null,\n      ]);\n    };\n  },\n});\n\nexport const AuthonSignedIn = defineComponent({\n  name: 'AuthonSignedIn',\n  setup(_, { slots }) {\n    const { isSignedIn, isLoading } = useAuthon();\n    return () => {\n      if (isLoading || !isSignedIn) return null;\n      return slots.default?.();\n    };\n  },\n});\n\nexport const AuthonSignedOut = defineComponent({\n  name: 'AuthonSignedOut',\n  setup(_, { slots }) {\n    const { isSignedIn, isLoading } = useAuthon();\n    return () => {\n      if (isLoading || isSignedIn) return null;\n      return slots.default?.();\n    };\n  },\n});\n"],"mappings":"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","names":["import_vue","import_vue"]}

package/dist/index.d.cts

@@ -0,0 +1,72 @@
+import * as vue from 'vue';
+import { App, ComputedRef } from 'vue';
+import { AuthonConfig, Authon } from '@authon/js';
+import { AuthonUser } from '@authon/shared';
+
+declare const AUTHON_KEY: unique symbol;
+interface AuthonState {
+    isSignedIn: boolean;
+    isLoading: boolean;
+    user: AuthonUser | null;
+    client: Authon | null;
+}
+interface AuthonPluginOptions {
+    publishableKey: string;
+    config?: AuthonConfig;
+}
+declare function createAuthon(options: AuthonPluginOptions): {
+    install(app: App): void;
+};
+
+declare function useAuthon(): AuthonState & {
+    signOut: () => Promise<void>;
+    openSignIn: () => Promise<void>;
+    openSignUp: () => Promise<void>;
+    getToken: () => string | null;
+};
+declare function useUser(): {
+    user: ComputedRef<AuthonUser | null>;
+    isLoading: ComputedRef<boolean>;
+};
+
+declare const AuthonSignIn: vue.DefineComponent<vue.ExtractPropTypes<{
+    mode: {
+        type: () => "popup" | "embedded";
+        default: string;
+    };
+}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}> | null, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    mode: {
+        type: () => "popup" | "embedded";
+        default: string;
+    };
+}>> & Readonly<{}>, {
+    mode: "popup" | "embedded";
+}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+declare const AuthonSignUp: vue.DefineComponent<vue.ExtractPropTypes<{
+    mode: {
+        type: () => "popup" | "embedded";
+        default: string;
+    };
+}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}> | null, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    mode: {
+        type: () => "popup" | "embedded";
+        default: string;
+    };
+}>> & Readonly<{}>, {
+    mode: "popup" | "embedded";
+}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+declare const AuthonUserButton: vue.DefineComponent<{}, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+declare const AuthonSignedIn: vue.DefineComponent<{}, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>[] | null | undefined, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+declare const AuthonSignedOut: vue.DefineComponent<{}, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>[] | null | undefined, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+
+export { AUTHON_KEY, type AuthonPluginOptions, AuthonSignIn, AuthonSignUp, AuthonSignedIn, AuthonSignedOut, type AuthonState, AuthonUserButton, createAuthon, useAuthon, useUser };

package/dist/index.d.ts

@@ -0,0 +1,72 @@
+import * as vue from 'vue';
+import { App, ComputedRef } from 'vue';
+import { AuthonConfig, Authon } from '@authon/js';
+import { AuthonUser } from '@authon/shared';
+
+declare const AUTHON_KEY: unique symbol;
+interface AuthonState {
+    isSignedIn: boolean;
+    isLoading: boolean;
+    user: AuthonUser | null;
+    client: Authon | null;
+}
+interface AuthonPluginOptions {
+    publishableKey: string;
+    config?: AuthonConfig;
+}
+declare function createAuthon(options: AuthonPluginOptions): {
+    install(app: App): void;
+};
+
+declare function useAuthon(): AuthonState & {
+    signOut: () => Promise<void>;
+    openSignIn: () => Promise<void>;
+    openSignUp: () => Promise<void>;
+    getToken: () => string | null;
+};
+declare function useUser(): {
+    user: ComputedRef<AuthonUser | null>;
+    isLoading: ComputedRef<boolean>;
+};
+
+declare const AuthonSignIn: vue.DefineComponent<vue.ExtractPropTypes<{
+    mode: {
+        type: () => "popup" | "embedded";
+        default: string;
+    };
+}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}> | null, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    mode: {
+        type: () => "popup" | "embedded";
+        default: string;
+    };
+}>> & Readonly<{}>, {
+    mode: "popup" | "embedded";
+}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+declare const AuthonSignUp: vue.DefineComponent<vue.ExtractPropTypes<{
+    mode: {
+        type: () => "popup" | "embedded";
+        default: string;
+    };
+}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}> | null, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    mode: {
+        type: () => "popup" | "embedded";
+        default: string;
+    };
+}>> & Readonly<{}>, {
+    mode: "popup" | "embedded";
+}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+declare const AuthonUserButton: vue.DefineComponent<{}, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+declare const AuthonSignedIn: vue.DefineComponent<{}, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>[] | null | undefined, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+declare const AuthonSignedOut: vue.DefineComponent<{}, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>[] | null | undefined, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+
+export { AUTHON_KEY, type AuthonPluginOptions, AuthonSignIn, AuthonSignUp, AuthonSignedIn, AuthonSignedOut, type AuthonState, AuthonUserButton, createAuthon, useAuthon, useUser };

package/dist/index.js

@@ -0,0 +1,264 @@
+// src/plugin.ts
+import { reactive } from "vue";
+import { Authon } from "@authon/js";
+var AUTHON_KEY = /* @__PURE__ */ Symbol("authon");
+function createAuthon(options) {
+  const state = reactive({
+    isSignedIn: false,
+    isLoading: true,
+    user: null,
+    client: null
+  });
+  return {
+    install(app) {
+      const client = new Authon(options.publishableKey, options.config);
+      state.client = client;
+      client.on("signedIn", (user) => {
+        state.user = user;
+        state.isSignedIn = true;
+        state.isLoading = false;
+      });
+      client.on("signedOut", () => {
+        state.user = null;
+        state.isSignedIn = false;
+      });
+      client.on("error", () => {
+        state.isLoading = false;
+      });
+      state.isLoading = false;
+      app.provide(AUTHON_KEY, state);
+      app.config.globalProperties.$authon = state;
+    }
+  };
+}
+
+// src/composables.ts
+import { inject, computed } from "vue";
+function requireState() {
+  const state = inject(AUTHON_KEY);
+  if (!state) {
+    throw new Error("useAuthon() must be called inside a component tree with createAuthon() installed");
+  }
+  return state;
+}
+function useAuthon() {
+  const s = requireState();
+  async function signOut() {
+    await s.client?.signOut();
+    s.user = null;
+    s.isSignedIn = false;
+  }
+  async function openSignIn() {
+    await s.client?.openSignIn();
+  }
+  async function openSignUp() {
+    await s.client?.openSignUp();
+  }
+  function getToken() {
+    return s.client?.getToken() ?? null;
+  }
+  return {
+    ...s,
+    signOut,
+    openSignIn,
+    openSignUp,
+    getToken
+  };
+}
+function useUser() {
+  const s = requireState();
+  return {
+    user: computed(() => s.user),
+    isLoading: computed(() => s.isLoading)
+  };
+}
+
+// src/components.ts
+import { defineComponent, h, onMounted, ref, computed as computed2 } from "vue";
+var AuthonSignIn = defineComponent({
+  name: "AuthonSignIn",
+  props: {
+    mode: {
+      type: String,
+      default: "popup"
+    }
+  },
+  setup(props) {
+    const { client } = useAuthon();
+    onMounted(() => {
+      if (props.mode === "popup") {
+        client?.openSignIn();
+      }
+    });
+    return () => {
+      if (props.mode === "embedded") {
+        return h("div", { id: "authon-signin-container" });
+      }
+      return null;
+    };
+  }
+});
+var AuthonSignUp = defineComponent({
+  name: "AuthonSignUp",
+  props: {
+    mode: {
+      type: String,
+      default: "popup"
+    }
+  },
+  setup(props) {
+    const { client } = useAuthon();
+    onMounted(() => {
+      if (props.mode === "popup") {
+        client?.openSignUp();
+      }
+    });
+    return () => {
+      if (props.mode === "embedded") {
+        return h("div", { id: "authon-signup-container" });
+      }
+      return null;
+    };
+  }
+});
+var AuthonUserButton = defineComponent({
+  name: "AuthonUserButton",
+  setup() {
+    const { user, isSignedIn, signOut, openSignIn } = useAuthon();
+    const open = ref(false);
+    const initials = computed2(() => {
+      if (!user) return "?";
+      const u = user;
+      if (u.displayName) {
+        return u.displayName.split(" ").map((n) => n[0]).join("").toUpperCase().slice(0, 2);
+      }
+      return (u.email?.[0] ?? "?").toUpperCase();
+    });
+    return () => {
+      if (!isSignedIn) {
+        return h(
+          "button",
+          {
+            onClick: () => openSignIn(),
+            style: {
+              padding: "8px 16px",
+              borderRadius: "8px",
+              border: "none",
+              background: "linear-gradient(135deg, #7c3aed, #4f46e5)",
+              color: "#fff",
+              cursor: "pointer",
+              fontSize: "14px",
+              fontWeight: 600
+            }
+          },
+          "Sign In"
+        );
+      }
+      const avatarUrl = user?.avatarUrl;
+      const displayName = user?.displayName;
+      const email = user?.email;
+      return h("div", { style: { position: "relative", display: "inline-block" } }, [
+        h(
+          "button",
+          {
+            onClick: () => open.value = !open.value,
+            style: {
+              width: "36px",
+              height: "36px",
+              borderRadius: "50%",
+              border: "2px solid #7c3aed",
+              background: avatarUrl ? "transparent" : "linear-gradient(135deg, #7c3aed, #4f46e5)",
+              cursor: "pointer",
+              padding: 0,
+              overflow: "hidden",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              color: "#fff",
+              fontSize: "13px",
+              fontWeight: 700
+            }
+          },
+          avatarUrl ? [h("img", { src: avatarUrl, alt: displayName ?? "avatar", style: { width: "100%", height: "100%", objectFit: "cover" } })] : [initials.value]
+        ),
+        open.value ? h(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              right: 0,
+              top: "44px",
+              minWidth: "200px",
+              background: "#fff",
+              border: "1px solid #e5e7eb",
+              borderRadius: "12px",
+              boxShadow: "0 8px 24px rgba(0,0,0,0.12)",
+              zIndex: 9999,
+              overflow: "hidden"
+            }
+          },
+          [
+            h("div", { style: { padding: "12px 16px", borderBottom: "1px solid #f3f4f6" } }, [
+              displayName && h("div", { style: { fontSize: "14px", fontWeight: 600, color: "#111827" } }, displayName),
+              email && h("div", { style: { fontSize: "12px", color: "#6b7280", marginTop: "2px" } }, email)
+            ]),
+            h(
+              "button",
+              {
+                onClick: async () => {
+                  open.value = false;
+                  await signOut();
+                },
+                style: {
+                  display: "block",
+                  width: "100%",
+                  padding: "10px 16px",
+                  textAlign: "left",
+                  background: "none",
+                  border: "none",
+                  cursor: "pointer",
+                  fontSize: "14px",
+                  color: "#ef4444",
+                  fontWeight: 500
+                }
+              },
+              "Sign out"
+            )
+          ]
+        ) : null
+      ]);
+    };
+  }
+});
+var AuthonSignedIn = defineComponent({
+  name: "AuthonSignedIn",
+  setup(_, { slots }) {
+    const { isSignedIn, isLoading } = useAuthon();
+    return () => {
+      if (isLoading || !isSignedIn) return null;
+      return slots.default?.();
+    };
+  }
+});
+var AuthonSignedOut = defineComponent({
+  name: "AuthonSignedOut",
+  setup(_, { slots }) {
+    const { isSignedIn, isLoading } = useAuthon();
+    return () => {
+      if (isLoading || isSignedIn) return null;
+      return slots.default?.();
+    };
+  }
+});
+export {
+  AUTHON_KEY,
+  AuthonSignIn,
+  AuthonSignUp,
+  AuthonSignedIn,
+  AuthonSignedOut,
+  AuthonUserButton,
+  createAuthon,
+  useAuthon,
+  useUser
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/plugin.ts","../src/composables.ts","../src/components.ts"],"sourcesContent":["import type { App } from 'vue';\nimport { reactive } from 'vue';\nimport { Authon } from '@authon/js';\nimport type { AuthonConfig } from '@authon/js';\nimport type { AuthonUser } from '@authon/shared';\n\nexport const AUTHON_KEY = Symbol('authon');\n\nexport interface AuthonState {\n  isSignedIn: boolean;\n  isLoading: boolean;\n  user: AuthonUser | null;\n  client: Authon | null;\n}\n\nexport interface AuthonPluginOptions {\n  publishableKey: string;\n  config?: AuthonConfig;\n}\n\nexport function createAuthon(options: AuthonPluginOptions) {\n  const state = reactive<AuthonState>({\n    isSignedIn: false,\n    isLoading: true,\n    user: null,\n    client: null,\n  });\n\n  return {\n    install(app: App) {\n      const client = new Authon(options.publishableKey, options.config);\n      state.client = client as unknown as Authon;\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      state.isLoading = false;\n\n      app.provide(AUTHON_KEY, state);\n\n      app.config.globalProperties.$authon = state;\n    },\n  };\n}\n","import { inject, computed } from 'vue';\nimport type { ComputedRef } from 'vue';\nimport { AUTHON_KEY } from './plugin';\nimport type { AuthonState } from './plugin';\nimport type { AuthonUser } from '@authon/shared';\n\nfunction requireState(): AuthonState {\n  const state = inject<AuthonState>(AUTHON_KEY);\n  if (!state) {\n    throw new Error('useAuthon() must be called inside a component tree with createAuthon() installed');\n  }\n  return state;\n}\n\nexport function useAuthon(): AuthonState & {\n  signOut: () => Promise<void>;\n  openSignIn: () => Promise<void>;\n  openSignUp: () => Promise<void>;\n  getToken: () => string | null;\n} {\n  const s = requireState();\n\n  async function signOut(): Promise<void> {\n    await s.client?.signOut();\n    s.user = null;\n    s.isSignedIn = false;\n  }\n\n  async function openSignIn(): Promise<void> {\n    await s.client?.openSignIn();\n  }\n\n  async function openSignUp(): Promise<void> {\n    await s.client?.openSignUp();\n  }\n\n  function getToken(): string | null {\n    return s.client?.getToken() ?? null;\n  }\n\n  return {\n    ...s,\n    signOut,\n    openSignIn,\n    openSignUp,\n    getToken,\n  };\n}\n\nexport function useUser(): { user: ComputedRef<AuthonUser | null>; isLoading: ComputedRef<boolean> } {\n  const s = requireState();\n  return {\n    user: computed(() => s.user),\n    isLoading: computed(() => s.isLoading),\n  };\n}\n","import { defineComponent, h, onMounted, ref, computed } from 'vue';\nimport { useAuthon } from './composables';\n\nexport const AuthonSignIn = defineComponent({\n  name: 'AuthonSignIn',\n  props: {\n    mode: {\n      type: String as () => 'popup' | 'embedded',\n      default: 'popup',\n    },\n  },\n  setup(props) {\n    const { client } = useAuthon();\n\n    onMounted(() => {\n      if (props.mode === 'popup') {\n        client?.openSignIn();\n      }\n    });\n\n    return () => {\n      if (props.mode === 'embedded') {\n        return h('div', { id: 'authon-signin-container' });\n      }\n      return null;\n    };\n  },\n});\n\nexport const AuthonSignUp = defineComponent({\n  name: 'AuthonSignUp',\n  props: {\n    mode: {\n      type: String as () => 'popup' | 'embedded',\n      default: 'popup',\n    },\n  },\n  setup(props) {\n    const { client } = useAuthon();\n\n    onMounted(() => {\n      if (props.mode === 'popup') {\n        client?.openSignUp();\n      }\n    });\n\n    return () => {\n      if (props.mode === 'embedded') {\n        return h('div', { id: 'authon-signup-container' });\n      }\n      return null;\n    };\n  },\n});\n\nexport const AuthonUserButton = defineComponent({\n  name: 'AuthonUserButton',\n  setup() {\n    const { user, isSignedIn, signOut, openSignIn } = useAuthon();\n    const open = ref(false);\n\n    const initials = computed(() => {\n      if (!user) return '?';\n      const u = user as typeof user;\n      if ((u as { displayName?: string | null }).displayName) {\n        return ((u as { displayName: string }).displayName)\n          .split(' ')\n          .map((n: string) => n[0])\n          .join('')\n          .toUpperCase()\n          .slice(0, 2);\n      }\n      return ((u as { email?: string | null }).email?.[0] ?? '?').toUpperCase();\n    });\n\n    return () => {\n      if (!isSignedIn) {\n        return h(\n          'button',\n          {\n            onClick: () => openSignIn(),\n            style: {\n              padding: '8px 16px',\n              borderRadius: '8px',\n              border: 'none',\n              background: 'linear-gradient(135deg, #7c3aed, #4f46e5)',\n              color: '#fff',\n              cursor: 'pointer',\n              fontSize: '14px',\n              fontWeight: 600,\n            },\n          },\n          'Sign In',\n        );\n      }\n\n      const avatarUrl = (user as { avatarUrl?: string | null } | null)?.avatarUrl;\n      const displayName = (user as { displayName?: string | null } | null)?.displayName;\n      const email = (user as { email?: string | null } | null)?.email;\n\n      return h('div', { style: { position: 'relative', display: 'inline-block' } }, [\n        h(\n          'button',\n          {\n            onClick: () => (open.value = !open.value),\n            style: {\n              width: '36px',\n              height: '36px',\n              borderRadius: '50%',\n              border: '2px solid #7c3aed',\n              background: avatarUrl ? 'transparent' : 'linear-gradient(135deg, #7c3aed, #4f46e5)',\n              cursor: 'pointer',\n              padding: 0,\n              overflow: 'hidden',\n              display: 'flex',\n              alignItems: 'center',\n              justifyContent: 'center',\n              color: '#fff',\n              fontSize: '13px',\n              fontWeight: 700,\n            },\n          },\n          avatarUrl\n            ? [h('img', { src: avatarUrl, alt: displayName ?? 'avatar', style: { width: '100%', height: '100%', objectFit: 'cover' } })]\n            : [initials.value],\n        ),\n        open.value\n          ? h(\n              'div',\n              {\n                style: {\n                  position: 'absolute',\n                  right: 0,\n                  top: '44px',\n                  minWidth: '200px',\n                  background: '#fff',\n                  border: '1px solid #e5e7eb',\n                  borderRadius: '12px',\n                  boxShadow: '0 8px 24px rgba(0,0,0,0.12)',\n                  zIndex: 9999,\n                  overflow: 'hidden',\n                },\n              },\n              [\n                h('div', { style: { padding: '12px 16px', borderBottom: '1px solid #f3f4f6' } }, [\n                  displayName && h('div', { style: { fontSize: '14px', fontWeight: 600, color: '#111827' } }, displayName),\n                  email && h('div', { style: { fontSize: '12px', color: '#6b7280', marginTop: '2px' } }, email),\n                ]),\n                h(\n                  'button',\n                  {\n                    onClick: async () => {\n                      open.value = false;\n                      await signOut();\n                    },\n                    style: {\n                      display: 'block',\n                      width: '100%',\n                      padding: '10px 16px',\n                      textAlign: 'left',\n                      background: 'none',\n                      border: 'none',\n                      cursor: 'pointer',\n                      fontSize: '14px',\n                      color: '#ef4444',\n                      fontWeight: 500,\n                    },\n                  },\n                  'Sign out',\n                ),\n              ],\n            )\n          : null,\n      ]);\n    };\n  },\n});\n\nexport const AuthonSignedIn = defineComponent({\n  name: 'AuthonSignedIn',\n  setup(_, { slots }) {\n    const { isSignedIn, isLoading } = useAuthon();\n    return () => {\n      if (isLoading || !isSignedIn) return null;\n      return slots.default?.();\n    };\n  },\n});\n\nexport const AuthonSignedOut = defineComponent({\n  name: 'AuthonSignedOut',\n  setup(_, { slots }) {\n    const { isSignedIn, isLoading } = useAuthon();\n    return () => {\n      if (isLoading || isSignedIn) return null;\n      return slots.default?.();\n    };\n  },\n});\n"],"mappings":"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","names":["computed","computed"]}

package/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@authon/vue",
+  "version": "0.1.0",
+  "description": "Authon Vue 3 SDK — plugin, composables, and components",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "files": ["dist"],
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch"
+  },
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/mikusnuz/authon-sdk.git",
+    "directory": "packages/vue"
+  },
+  "homepage": "https://github.com/mikusnuz/authon-sdk/tree/main/packages/vue",
+  "publishConfig": { "access": "public" },
+  "keywords": ["authon", "auth", "vue", "composables", "sdk"],
+  "dependencies": {
+    "@authon/js": "workspace:*",
+    "@authon/shared": "workspace:*"
+  },
+  "peerDependencies": {
+    "vue": "^3.3.0"
+  },
+  "devDependencies": {
+    "vue": "^3.5.0",
+    "tsup": "^8.0.0",
+    "typescript": "^5.9.3"
+  }
+}