@atlasauth/svelte 0.1.0

package/dist/components/AtlasLoading.svelte.d.ts

@@ -0,0 +1,18 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type AtlasLoadingProps = typeof __propDef.props;
+export type AtlasLoadingEvents = typeof __propDef.events;
+export type AtlasLoadingSlots = typeof __propDef.slots;
+export default class AtlasLoading extends SvelteComponent<AtlasLoadingProps, AtlasLoadingEvents, AtlasLoadingSlots> {
+}
+export {};

package/dist/components/AtlasProvider.svelte

@@ -0,0 +1,23 @@
+<script>import { onDestroy, onMount } from "svelte";
+import { initAtlas } from "../context";
+import { cssVariables, resolveTokens } from "../appearance";
+export let publishableKey;
+export let frontendApi = void 0;
+export let appearance = void 0;
+export let localization = void 0;
+export let fetchImpl = void 0;
+const client = initAtlas({
+  publishableKey,
+  frontendApi,
+  appearance,
+  localization,
+  fetchImpl
+});
+$: style = Object.entries(cssVariables(resolveTokens(appearance))).map(([name, value]) => `${name}: ${value}`).join("; ");
+onMount(() => void client.boot());
+onDestroy(() => client.destroy());
+</script>
+
+<div class="atlas-root" {style}>
+  <slot />
+</div>

package/dist/components/AtlasProvider.svelte.d.ts

@@ -0,0 +1,33 @@
+import { SvelteComponent } from "svelte";
+import { type Appearance } from '../appearance';
+import type { Catalog } from '../i18n';
+declare const __propDef: {
+    props: {
+        /**
+           * §10.1 `<AtlasProvider publishableKey>` — the Svelte peer of React's provider.
+           *
+           * Calls {@link initAtlas} during component init so the client is in context
+           * before any child `<script>` runs, then renders a host-DOM wrapper carrying
+           * the appearance tokens as CSS variables. No iframe: components render in the
+           * host DOM so Tailwind / plain CSS just work.
+           */ publishableKey: string;
+        frontendApi?: string | undefined;
+        appearance?: Appearance | undefined;
+        localization?: Catalog | undefined;
+        fetchImpl?: typeof fetch | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type AtlasProviderProps = typeof __propDef.props;
+export type AtlasProviderEvents = typeof __propDef.events;
+export type AtlasProviderSlots = typeof __propDef.slots;
+export default class AtlasProvider extends SvelteComponent<AtlasProviderProps, AtlasProviderEvents, AtlasProviderSlots> {
+}
+export {};

package/dist/components/AttemptFlow.svelte

@@ -0,0 +1,95 @@
+<script>import { nextStep } from "@atlasauth/js";
+import { useAtlas } from "../context";
+import { classFor } from "../appearance";
+import { translate } from "../i18n";
+export let attempt = null;
+export let busy = false;
+export let errors = [];
+export let titleKey;
+export let onSubmit;
+const atlas = useAtlas();
+const cls = (key, base) => classFor(key, atlas.appearance, base);
+const t = (key, vars) => translate(atlas.catalog, key, vars);
+let values = {};
+$: step = attempt ? nextStep(attempt) : { kind: "collect_identifier" };
+$: fields = (() => {
+  switch (step.kind) {
+    case "collect_identifier":
+      return [{ name: "identifier", labelKey: "signIn.identifierLabel", type: "email" }];
+    case "collect_first_factor":
+      return [{ name: "password", labelKey: "signIn.passwordLabel", type: "password" }];
+    case "collect_second_factor":
+      return [{ name: "code", labelKey: "mfa.codeLabel", type: "text" }];
+    case "enroll_second_factor":
+      return [
+        { name: "code", labelKey: "mfa.enrollFirstCodeLabel", type: "text" },
+        { name: "secondCode", labelKey: "mfa.enrollSecondCodeLabel", type: "text" }
+      ];
+    case "collect_email_code":
+      return [{ name: "code", labelKey: "signIn.emailCodeLabel", type: "text" }];
+    case "collect_new_password":
+      return [{ name: "password", labelKey: "reset.newPasswordLabel", type: "password" }];
+    default:
+      return [];
+  }
+})();
+$: message = (() => {
+  switch (step.kind) {
+    case "await_oauth":
+      return t("signIn.magicLinkSent");
+    case "done":
+      return t("signIn.checkOtherTab");
+    case "restart":
+      return t("error.generic");
+    case "collect_identifier":
+    case "collect_first_factor":
+    case "collect_second_factor":
+    case "enroll_second_factor":
+    case "collect_email_code":
+    case "collect_new_password":
+      return null;
+    default:
+      return t("error.generic");
+  }
+})();
+$: showSubmit = step.kind !== "done" && step.kind !== "await_oauth" && message === null;
+function handleSubmit(event) {
+  event.preventDefault();
+  onSubmit(values);
+}
+</script>
+
+<div class={cls('card', 'atlas-card')}>
+  <h1 class={cls('headerTitle', 'atlas-title')}>{t(titleKey)}</h1>
+
+  {#each errors.filter((e) => !e.param) as error (error.code)}
+    <p class={cls('formFieldError', 'atlas-error')} role="alert">{error.message}</p>
+  {/each}
+
+  <form on:submit={handleSubmit}>
+    {#if message !== null}
+      <p>{message}</p>
+    {:else}
+      {#each fields as f (f.name)}
+        <label class="atlas-field">
+          <span>{t(f.labelKey)}</span>
+          <input
+            class={cls('formFieldInput', 'atlas-input')}
+            type={f.type}
+            value={values[f.name] ?? ''}
+            on:input={(e) => (values[f.name] = e.currentTarget.value)}
+          />
+          {#each errors.filter((e) => e.param === f.name) as error (error.code)}
+            <span class={cls('formFieldError', 'atlas-error')}>{error.message}</span>
+          {/each}
+        </label>
+      {/each}
+    {/if}
+
+    {#if showSubmit}
+      <button class={cls('formButtonPrimary', 'atlas-button')} disabled={busy} type="submit">
+        {t('signIn.submit')}
+      </button>
+    {/if}
+  </form>
+</div>

package/dist/components/AttemptFlow.svelte.d.ts

@@ -0,0 +1,30 @@
+import { SvelteComponent } from "svelte";
+import { type AttemptView, type FieldError } from '@atlasauth/js';
+declare const __propDef: {
+    props: {
+        /**
+           * The server-driven flow shell — the Svelte peer of React's `AttemptFlow`.
+           *
+           * Every branch comes from `nextStep`, which is exhaustive (including the
+           * `unknown` case, rendered as an honest message rather than nothing). This
+           * component makes no decision about what comes next; it renders whatever
+           * `status` the server returned.
+           */ attempt?: AttemptView | null;
+        busy?: boolean;
+        errors?: FieldError[];
+        titleKey: string;
+        onSubmit: (values: Record<string, string>) => void;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type AttemptFlowProps = typeof __propDef.props;
+export type AttemptFlowEvents = typeof __propDef.events;
+export type AttemptFlowSlots = typeof __propDef.slots;
+export default class AttemptFlow extends SvelteComponent<AttemptFlowProps, AttemptFlowEvents, AttemptFlowSlots> {
+}
+export {};

package/dist/components/OrganizationProfile.svelte

@@ -0,0 +1,22 @@
+<script>import { useAtlas } from "../context";
+import { getOrganization } from "../accessors";
+import { classFor } from "../appearance";
+import { translate } from "../i18n";
+import Protect from "./Protect.svelte";
+const atlas = useAtlas();
+const org = getOrganization();
+const t = (key) => translate(atlas.catalog, key);
+$: cardClass = classFor("card", atlas.appearance, "atlas-card");
+</script>
+
+{#if $org.organization}
+  <div class={cardClass}>
+    <h1>{$org.organization.name}</h1>
+    <p>{t('organization.roleLabel')}: {$org.membership?.role}</p>
+    <!-- Management controls are gated on the ACTIVE org role, matching the
+         server's §9.2 rule rather than duplicating a looser one. -->
+    <Protect permission="org:sys_memberships:manage">
+      <button>{t('organization.invite')}</button>
+    </Protect>
+  </div>
+{/if}

package/dist/components/OrganizationProfile.svelte.d.ts

@@ -0,0 +1,16 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type OrganizationProfileProps = typeof __propDef.props;
+export type OrganizationProfileEvents = typeof __propDef.events;
+export type OrganizationProfileSlots = typeof __propDef.slots;
+export default class OrganizationProfile extends SvelteComponent<OrganizationProfileProps, OrganizationProfileEvents, OrganizationProfileSlots> {
+}
+export {};

package/dist/components/OrganizationSwitcher.svelte

@@ -0,0 +1,25 @@
+<script>import { useAtlas } from "../context";
+import { getOrganization } from "../accessors";
+import { classFor } from "../appearance";
+import { translate } from "../i18n";
+const atlas = useAtlas();
+const org = getOrganization();
+const t = (key) => translate(atlas.catalog, key);
+$: menuClass = classFor("menu", atlas.appearance, "atlas-menu");
+$: itemClass = classFor("menuItem", atlas.appearance, "atlas-menu-item");
+</script>
+
+<div class={menuClass}>
+  <button class={itemClass} on:click={() => void $org.setActive(null)}>
+    {t('organization.personal')}
+  </button>
+  {#each $org.memberships as membership (membership.organization.id)}
+    <button
+      class={itemClass}
+      disabled={membership.organization.id === $org.organization?.id}
+      on:click={() => void $org.setActive(membership.organization.id)}
+    >
+      {membership.organization.name}
+    </button>
+  {/each}
+</div>

package/dist/components/OrganizationSwitcher.svelte.d.ts

@@ -0,0 +1,16 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type OrganizationSwitcherProps = typeof __propDef.props;
+export type OrganizationSwitcherEvents = typeof __propDef.events;
+export type OrganizationSwitcherSlots = typeof __propDef.slots;
+export default class OrganizationSwitcher extends SvelteComponent<OrganizationSwitcherProps, OrganizationSwitcherEvents, OrganizationSwitcherSlots> {
+}
+export {};

package/dist/components/Protect.svelte

@@ -0,0 +1,21 @@
+<script>import { get } from "svelte/store";
+import { useAtlas } from "../context";
+import { evaluate } from "../protect";
+export let permission = void 0;
+export let role = void 0;
+export let anyPermission = void 0;
+export let allPermissions = void 0;
+const atlas = useAtlas();
+const { status, claims } = atlas;
+$: condition = { permission, role, anyPermission, allPermissions };
+$: allowed = $status !== "loading" && evaluate($claims, condition).allowed;
+$: loading = $status === "loading";
+</script>
+
+{#if loading}
+  <!-- nothing while the SDK is still booting -->
+{:else if allowed}
+  <slot />
+{:else}
+  <slot name="fallback" />
+{/if}

package/dist/components/Protect.svelte.d.ts

@@ -0,0 +1,32 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        /**
+           * §10.2 `<Protect permission="…">` — conditional rendering.
+           *
+           * A rendering helper, never an authorization boundary: anyone can flip the
+           * condition in devtools. The server checking the same permission is what
+           * actually stops them, and this component's job is only to avoid showing a
+           * button that would fail. The `default` slot renders when allowed; the
+           * `fallback` slot renders otherwise.
+           */ permission?: string | undefined;
+        role?: string | undefined;
+        anyPermission?: string[] | undefined;
+        allPermissions?: string[] | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+        fallback: {};
+    };
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type ProtectProps = typeof __propDef.props;
+export type ProtectEvents = typeof __propDef.events;
+export type ProtectSlots = typeof __propDef.slots;
+export default class Protect extends SvelteComponent<ProtectProps, ProtectEvents, ProtectSlots> {
+}
+export {};

package/dist/components/SignIn.svelte

@@ -0,0 +1,16 @@
+<script>import { onDestroy } from "svelte";
+import { signIn } from "../accessors";
+import AttemptFlow from "./AttemptFlow.svelte";
+export let afterUrl = void 0;
+const flow = signIn();
+const flowState = flow.state;
+onDestroy(() => flow.destroy());
+</script>
+
+<AttemptFlow
+  attempt={$flowState.attempt}
+  busy={$flowState.busy}
+  errors={$flowState.errors}
+  titleKey="signIn.title"
+  onSubmit={flow.submit}
+/>

package/dist/components/SignIn.svelte.d.ts

@@ -0,0 +1,22 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        /**
+           * §10.2 `<SignIn/>` — a full multi-step flow driven entirely by the
+           * server-side attempt status. Contains no decision about what comes next; it
+           * renders whatever `status` the server returned.
+           */ afterUrl?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type SignInProps = typeof __propDef.props;
+export type SignInEvents = typeof __propDef.events;
+export type SignInSlots = typeof __propDef.slots;
+export default class SignIn extends SvelteComponent<SignInProps, SignInEvents, SignInSlots> {
+}
+export {};

package/dist/components/SignUp.svelte

@@ -0,0 +1,16 @@
+<script>import { onDestroy } from "svelte";
+import { signUp } from "../accessors";
+import AttemptFlow from "./AttemptFlow.svelte";
+export let afterUrl = void 0;
+const flow = signUp();
+const flowState = flow.state;
+onDestroy(() => flow.destroy());
+</script>
+
+<AttemptFlow
+  attempt={$flowState.attempt}
+  busy={$flowState.busy}
+  errors={$flowState.errors}
+  titleKey="signUp.title"
+  onSubmit={flow.submit}
+/>

package/dist/components/SignUp.svelte.d.ts

@@ -0,0 +1,21 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        /**
+           * §10.2 `<SignUp/>` — the server-driven registration flow. Same shell as
+           * `<SignIn/>`, only the title differs; the step sequence comes from the server.
+           */ afterUrl?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type SignUpProps = typeof __propDef.props;
+export type SignUpEvents = typeof __propDef.events;
+export type SignUpSlots = typeof __propDef.slots;
+export default class SignUp extends SvelteComponent<SignUpProps, SignUpEvents, SignUpSlots> {
+}
+export {};

package/dist/components/SignedIn.svelte

@@ -0,0 +1,7 @@
+<script>import { getUser } from "../accessors";
+const user = getUser();
+</script>
+
+{#if $user.isLoaded && $user.isSignedIn}
+  <slot />
+{/if}

package/dist/components/SignedIn.svelte.d.ts

@@ -0,0 +1,18 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type SignedInProps = typeof __propDef.props;
+export type SignedInEvents = typeof __propDef.events;
+export type SignedInSlots = typeof __propDef.slots;
+export default class SignedIn extends SvelteComponent<SignedInProps, SignedInEvents, SignedInSlots> {
+}
+export {};

package/dist/components/SignedOut.svelte

@@ -0,0 +1,7 @@
+<script>import { getUser } from "../accessors";
+const user = getUser();
+</script>
+
+{#if $user.isLoaded && !$user.isSignedIn}
+  <slot />
+{/if}

package/dist/components/SignedOut.svelte.d.ts

@@ -0,0 +1,18 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type SignedOutProps = typeof __propDef.props;
+export type SignedOutEvents = typeof __propDef.events;
+export type SignedOutSlots = typeof __propDef.slots;
+export default class SignedOut extends SvelteComponent<SignedOutProps, SignedOutEvents, SignedOutSlots> {
+}
+export {};

package/dist/components/UserButton.svelte

@@ -0,0 +1,40 @@
+<script>import { useAtlas } from "../context";
+import { getUser } from "../accessors";
+import { classFor } from "../appearance";
+import { translate } from "../i18n";
+const atlas = useAtlas();
+const user = getUser();
+const cls = classFor;
+const t = (key) => translate(atlas.catalog, key);
+let open = false;
+$: current = $user.user;
+$: label = current ? [current.first_name, current.last_name].filter(Boolean).join(" ") || current.username || "" : "";
+</script>
+
+{#if current}
+  <div class="atlas-user-button">
+    <button
+      class={cls('avatar', atlas.appearance, 'atlas-avatar')}
+      on:click={() => (open = !open)}
+      aria-expanded={open}
+    >
+      {#if current.image_url}
+        <img alt="" src={current.image_url} />
+      {:else}
+        <span>{label.slice(0, 1)}</span>
+      {/if}
+    </button>
+
+    {#if open}
+      <div class={cls('menu', atlas.appearance, 'atlas-menu')} role="menu">
+        <span class={cls('menuItem', atlas.appearance, 'atlas-menu-item')}>{label}</span>
+        <button
+          class={cls('menuItem', atlas.appearance, 'atlas-menu-item')}
+          on:click={() => void atlas.signOut()}
+        >
+          {t('userButton.signOut')}
+        </button>
+      </div>
+    {/if}
+  </div>
+{/if}

package/dist/components/UserButton.svelte.d.ts

@@ -0,0 +1,16 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type UserButtonProps = typeof __propDef.props;
+export type UserButtonEvents = typeof __propDef.events;
+export type UserButtonSlots = typeof __propDef.slots;
+export default class UserButton extends SvelteComponent<UserButtonProps, UserButtonEvents, UserButtonSlots> {
+}
+export {};

package/dist/components/UserProfile.svelte

@@ -0,0 +1,35 @@
+<script>import { useAtlas } from "../context";
+import { getUser } from "../accessors";
+import { classFor } from "../appearance";
+import { translate } from "../i18n";
+const atlas = useAtlas();
+const user = getUser();
+const t = (key) => translate(atlas.catalog, key);
+$: current = $user.user;
+$: cardClass = classFor("card", atlas.appearance, "atlas-card");
+</script>
+
+{#if current}
+  <div class={cardClass}>
+    <h1>{t('userProfile.title')}</h1>
+
+    <section>
+      <h2>{t('userProfile.emailsSection')}</h2>
+      <ul>
+        {#each current.email_addresses ?? [] as email (email.id)}
+          <li>
+            {email.email_address}
+            {#if !email.verified}
+              <em> — {t('userProfile.unverified')}</em>
+            {/if}
+          </li>
+        {/each}
+      </ul>
+    </section>
+
+    <section>
+      <h2>{t('userProfile.securitySection')}</h2>
+      <p>{current.mfa_enabled ? '2FA on' : '2FA off'}</p>
+    </section>
+  </div>
+{/if}

package/dist/components/UserProfile.svelte.d.ts

@@ -0,0 +1,16 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type UserProfileProps = typeof __propDef.props;
+export type UserProfileEvents = typeof __propDef.events;
+export type UserProfileSlots = typeof __propDef.slots;
+export default class UserProfile extends SvelteComponent<UserProfileProps, UserProfileEvents, UserProfileSlots> {
+}
+export {};