@atlasauth/svelte 0.8.0 → 0.10.0

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

@@ -0,0 +1,19 @@
+import { SvelteComponent } from "svelte";
+import { type EndImpersonationResult } from '@atlasauth/js';
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        ended: CustomEvent<EndImpersonationResult>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type ImpersonationBannerProps = typeof __propDef.props;
+export type ImpersonationBannerEvents = typeof __propDef.events;
+export type ImpersonationBannerSlots = typeof __propDef.slots;
+export default class ImpersonationBanner extends SvelteComponent<ImpersonationBannerProps, ImpersonationBannerEvents, ImpersonationBannerSlots> {
+}
+export {};

package/dist/components/OrganizationAuditLog.svelte

@@ -0,0 +1,45 @@
+<script>import { describeAuditAction } from "@atlasauth/js";
+import { useAtlas } from "../context";
+import { getOrganization, getOrganizationAuditLog } from "../accessors";
+import { classFor } from "../appearance";
+export let pageSize = void 0;
+export let action = void 0;
+export let labels = {};
+export let formatDate = (ms) => new Date(ms).toLocaleString();
+const atlas = useAtlas();
+const org = getOrganization();
+const log = getOrganizationAuditLog({ pageSize, action });
+const cls = (key, base) => classFor(key, atlas.appearance, base);
+</script>
+
+{#if $org.organization && !$log.forbidden}
+  <div class={cls('card', 'atlas-card')} data-atlas="organization-audit-log">
+    <h2 class={cls('headerTitle', 'atlas-title')}>{labels.title ?? 'Audit log'}</h2>
+    {#if $log.entries.length === 0 && !$log.loading}
+      <p class={cls('headerSubtitle', 'atlas-subtitle')}>{labels.empty ?? 'No activity recorded yet.'}</p>
+    {:else}
+      <ul class={cls('list', 'atlas-audit-list')}>
+        {#each $log.entries as entry (entry.id)}
+          <li class={cls('listItem', 'atlas-audit-item')} data-action={entry.action}>
+            <strong>{describeAuditAction(entry.action)}</strong>
+            <span class="atlas-audit-meta">
+              · {formatDate(entry.created_at)}{entry.actor.id
+                ? ` · ${labels.actor ?? 'by'} ${entry.actor.type} ${entry.actor.id}`
+                : ''}
+            </span>
+          </li>
+        {/each}
+      </ul>
+    {/if}
+    {#if $log.hasMore}
+      <button
+        type="button"
+        class={cls('formButtonSecondary', 'atlas-button-secondary')}
+        disabled={$log.loading}
+        on:click={() => void log.loadMore()}
+      >
+        {labels.loadMore ?? 'Load more'}
+      </button>
+    {/if}
+  </div>
+{/if}

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

@@ -0,0 +1,31 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        /**
+           * `<OrganizationAuditLog/>` — the active organization's audit trail for its
+           * admins, next to `<OrganizationProfile/>`. Renders nothing for a member who
+           * may not read it (the server is the authority; the component just follows
+           * it). Labels are props so an app can localise them.
+           */ pageSize?: number | undefined;
+        action?: string | undefined;
+        labels?: {
+            title?: string;
+            empty?: string;
+            loadMore?: string;
+            actor?: string;
+        };
+        formatDate?: (ms: number) => string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type OrganizationAuditLogProps = typeof __propDef.props;
+export type OrganizationAuditLogEvents = typeof __propDef.events;
+export type OrganizationAuditLogSlots = typeof __propDef.slots;
+export default class OrganizationAuditLog extends SvelteComponent<OrganizationAuditLogProps, OrganizationAuditLogEvents, OrganizationAuditLogSlots> {
+}
+export {};

package/dist/components/OrganizationProfile.svelte

@@ -1,22 +1,318 @@
-<script>import { useAtlas } from "../context";
-import { getOrganization } from "../accessors";
+<script>import { createEventDispatcher, onDestroy } from "svelte";
+import {
+  OrganizationProfileController,
+  localizedErrorMessage,
+  reauthenticate
+} from "@atlasauth/js";
+import { useAtlas } from "../context";
+import { getAuth, getOrganization } from "../accessors";
 import { classFor } from "../appearance";
 import { translate } from "../i18n";
-import Protect from "./Protect.svelte";
+import { FapiClient } from "../fapi";
+import { ATLAS_SVELTE_SDK } from "../version";
 const atlas = useAtlas();
 const org = getOrganization();
-const t = (key) => translate(atlas.catalog, key);
-$: cardClass = classFor("card", atlas.appearance, "atlas-card");
+const auth = getAuth();
+const dispatch = createEventDispatcher();
+const t = (key, vars) => translate(atlas.catalog, key, vars);
+const cls = (key, base) => classFor(key, atlas.appearance, base);
+const errorText = (err) => localizedErrorMessage(err, atlas.errorCatalog ?? atlas.catalog, atlas.catalog);
+const client = new FapiClient({
+  publishableKey: atlas.publishableKey,
+  baseUrl: atlas.frontendApi,
+  locale: atlas.locale,
+  sdk: ATLAS_SVELTE_SDK
+});
+let controller = null;
+let state = null;
+let unsubscribe = null;
+let currentId = null;
+let tab = "members";
+let editingRole = null;
+let roleKey = "";
+let roleName = "";
+let rolePerms = [];
+let email = "";
+let inviteRole = "org:member";
+let confirm = null;
+let needsPassword = false;
+let password = "";
+$: canManage = $auth.has({ permission: "org:sys_memberships:manage" });
+$: isAdmin = $org.membership?.role === "org:admin";
+$: roles = state && state.roles.length > 0 ? state.roles : [{ key: "org:member", name: "org:member" }];
+$: errorMessage = state?.error && !state.error.needsReverification ? errorText(state.error) : null;
+$: tabs = ["members", ...canManage ? ["invitations", "roles"] : [], "settings"];
+$: customRoles = state ? state.roles.filter((r) => Boolean(r.organization_id)) : [];
+$: {
+  const id = $org.organization?.id ?? null;
+  if (id !== currentId) {
+    currentId = id;
+    unsubscribe?.();
+    controller = null;
+    state = null;
+    if (id) {
+      controller = new OrganizationProfileController(client, id, {
+        canManage,
+        onChange: async () => {
+          await atlas.reload();
+        }
+      });
+      unsubscribe = controller.subscribe((next) => state = next);
+      state = controller.getState();
+      void controller.load();
+    }
+  }
+}
+onDestroy(() => unsubscribe?.());
+const memberName = (m) => [m.user?.first_name, m.user?.last_name].filter(Boolean).join(" ") || t("organization.unnamedMember");
+async function sendInvite() {
+  const address = email.trim();
+  if (controller && address && await controller.invite(address, inviteRole)) email = "";
+}
+async function leave() {
+  if (controller && await controller.leave()) dispatch("exit", "left");
+  confirm = null;
+}
+async function remove() {
+  if (!controller) return;
+  if (needsPassword) {
+    try {
+      await reauthenticate(
+        { strategy: "password", password },
+        { api: atlas.frontendApi, publishableKey: atlas.publishableKey, locale: atlas.locale }
+      );
+    } catch {
+      return;
+    }
+    password = "";
+    needsPassword = false;
+  }
+  if (await controller.deleteOrganization()) {
+    dispatch("exit", "deleted");
+    confirm = null;
+    return;
+  }
+  const err = controller.getState().error;
+  if (err?.needsReverification) needsPassword = true;
+}
+function resetRoleForm() {
+  editingRole = null;
+  roleKey = "";
+  roleName = "";
+  rolePerms = [];
+}
+function editRole(role) {
+  editingRole = role.id ?? null;
+  roleKey = role.key;
+  roleName = role.name;
+  rolePerms = [...role.permissions ?? []];
+}
+function togglePermission(key, on) {
+  rolePerms = on ? [...rolePerms, key] : rolePerms.filter((k) => k !== key);
+}
+async function saveRole() {
+  if (!controller) return;
+  const out = editingRole ? await controller.updateRole(editingRole, { name: roleName.trim(), permissions: rolePerms }) : await controller.createRole({ key: roleKey.trim(), name: roleName.trim(), permissions: rolePerms });
+  if (out) resetRoleForm();
+}
+function cancel() {
+  confirm = null;
+  needsPassword = false;
+  password = "";
+}
 </script>
 
-{#if $org.organization}
-  <div class={cardClass}>
+{#if $org.organization && controller && state}
+  <div class={cls('card', 'atlas-card')} data-atlas="organization-profile">
     <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 class={cls('menu', 'atlas-menu')} role="tablist">
+      {#each tabs as key}
+        <button
+          type="button"
+          role="tab"
+          aria-selected={tab === key}
+          class={cls('menuItem', 'atlas-menu-item')}
+          data-atlas={`organization-tab-${key}`}
+          on:click={() => (tab = key)}
+        >
+          {t(`organization.${key}`)}
+        </button>
+      {/each}
+    </div>
+
+    {#if errorMessage}
+      <p class={cls('formFieldError', 'atlas-error')} role="alert">{errorMessage}</p>
+    {/if}
+
+    {#if tab === 'members'}
+      <ul class={'atlas-list'} data-atlas="organization-members">
+        {#each state.members as m (m.id)}
+          <li data-atlas="organization-member">
+            <span>{memberName(m)}{m.user?.id === $auth.userId ? ` ${t('organization.you')}` : ''}</span>
+            {#if canManage && m.user && m.user.id !== $auth.userId}
+              <select
+                aria-label={t('organization.roleLabel')}
+                class={cls('formFieldInput', 'atlas-input')}
+                value={m.role}
+                disabled={state.busy === `role:${m.user.id}`}
+                on:change={(e) => m.user && controller?.changeRole(m.user.id, e.currentTarget.value)}
+              >
+                {#each roles as r}<option value={r.key}>{r.name}</option>{/each}
+              </select>
+              <button
+                type="button"
+                class={cls('formButtonSecondary', 'atlas-button-secondary')}
+                disabled={state.busy === `remove:${m.user.id}`}
+                on:click={() => m.user && controller?.removeMember(m.user.id)}
+              >
+                {t('organization.remove')}
+              </button>
+            {:else}
+              <span> · {m.role}</span>
+            {/if}
+          </li>
+        {/each}
+      </ul>
+    {/if}
+
+    {#if tab === 'invitations' && canManage}
+      <div data-atlas="organization-invitations">
+        <form on:submit|preventDefault={sendInvite}>
+          <label class={cls('formField', 'atlas-field')}>
+            <span class={cls('formFieldLabel', 'atlas-field-label')}>{t('organization.emailLabel')}</span>
+            <input type="email" class={cls('formFieldInput', 'atlas-input')} bind:value={email} />
+          </label>
+          <label class={cls('formField', 'atlas-field')}>
+            <span class={cls('formFieldLabel', 'atlas-field-label')}>{t('organization.roleLabel')}</span>
+            <select class={cls('formFieldInput', 'atlas-input')} bind:value={inviteRole}>
+              {#each roles as r}<option value={r.key}>{r.name}</option>{/each}
+            </select>
+          </label>
+          <button type="submit" class={cls('formButtonPrimary', 'atlas-button')} disabled={state.busy === 'invite' || !email.trim()}>
+            {t('organization.sendInvite')}
+          </button>
+        </form>
+        {#if state.invitations.length === 0}
+          <p class={'atlas-text'}>{t('organization.noInvitations')}</p>
+        {:else}
+          <ul class={'atlas-list'}>
+            {#each state.invitations as inv (inv.id)}
+              <li data-atlas="organization-invitation">
+                <span>{inv.email_address} · {inv.role ?? ''}</span>
+                <button type="button" class={cls('formButtonSecondary', 'atlas-button-secondary')} on:click={() => controller?.resendInvitation(inv.id)}>
+                  {t('organization.resend')}
+                </button>
+                <button type="button" class={cls('formButtonSecondary', 'atlas-button-secondary')} on:click={() => controller?.revokeInvitation(inv.id)}>
+                  {t('organization.revoke')}
+                </button>
+              </li>
+            {/each}
+          </ul>
+        {/if}
+      </div>
+    {/if}
+
+    {#if tab === 'roles' && canManage}
+      <div data-atlas="organization-roles">
+        {#if customRoles.length === 0}
+          <p class={'atlas-text'}>{t('organization.noCustomRoles')}</p>
+        {:else}
+          <ul class={'atlas-list'}>
+            {#each customRoles as role (role.id ?? role.key)}
+              <li data-atlas="organization-role">
+                <span>{role.name} · {role.key}</span>
+                <button type="button" class={cls('formButtonSecondary', 'atlas-button-secondary')} on:click={() => editRole(role)}>
+                  {t('organization.editRole')}
+                </button>
+                <button
+                  type="button"
+                  class={cls('formButtonSecondary', 'atlas-button-secondary')}
+                  disabled={!role.id || state.busy === `role:delete:${role.id}`}
+                  on:click={() => role.id && controller?.deleteRole(role.id)}
+                >
+                  {t('organization.deleteRole')}
+                </button>
+              </li>
+            {/each}
+          </ul>
+        {/if}
+        <form data-atlas="organization-role-form" on:submit|preventDefault={saveRole}>
+          {#if !editingRole}
+            <label class={cls('formField', 'atlas-field')}>
+              <span class={cls('formFieldLabel', 'atlas-field-label')}>{t('organization.roleKey')}</span>
+              <input name="role_key" class={cls('formFieldInput', 'atlas-input')} bind:value={roleKey} />
+            </label>
+          {/if}
+          <label class={cls('formField', 'atlas-field')}>
+            <span class={cls('formFieldLabel', 'atlas-field-label')}>{t('organization.roleName')}</span>
+            <input name="role_name" class={cls('formFieldInput', 'atlas-input')} bind:value={roleName} />
+          </label>
+          <fieldset class={cls('formField', 'atlas-field')}>
+            <legend class={cls('formFieldLabel', 'atlas-field-label')}>{t('organization.rolePermissions')}</legend>
+            {#each state.permissions as p (p.key)}
+              <label data-atlas="organization-role-permission">
+                <input
+                  type="checkbox"
+                  value={p.key}
+                  checked={rolePerms.includes(p.key)}
+                  on:change={(e) => togglePermission(p.key, e.currentTarget.checked)}
+                />
+                {p.name}
+              </label>
+            {/each}
+          </fieldset>
+          <button
+            type="submit"
+            class={cls('formButtonPrimary', 'atlas-button')}
+            disabled={!roleName.trim() || (!editingRole && !roleKey.trim()) || Boolean(state.busy?.startsWith('role:'))}
+          >
+            {editingRole ? t('organization.saveRole') : t('organization.createRole')}
+          </button>
+          {#if editingRole}
+            <button type="button" class={cls('formButtonSecondary', 'atlas-button-secondary')} on:click={resetRoleForm}>
+              {t('organization.cancel')}
+            </button>
+          {/if}
+        </form>
+      </div>
+    {/if}
+
+    {#if tab === 'settings'}
+      <div data-atlas="organization-settings">
+        {#if confirm}
+          <p class={'atlas-text'}>
+            {t(confirm === 'leave' ? 'organization.leaveConfirm' : 'organization.deleteConfirm', { name: $org.organization.name })}
+          </p>
+          {#if needsPassword}
+            <label class={cls('formField', 'atlas-field')}>
+              <span class={cls('formFieldLabel', 'atlas-field-label')}>{t('organization.passwordPrompt')}</span>
+              <input type="password" autocomplete="current-password" class={cls('formFieldInput', 'atlas-input')} bind:value={password} />
+            </label>
+          {/if}
+          <button
+            type="button"
+            class={cls('formButtonPrimary', 'atlas-button')}
+            disabled={state.busy === 'leave' || state.busy === 'delete'}
+            on:click={() => (confirm === 'leave' ? leave() : remove())}
+          >
+            {t('organization.confirm')}
+          </button>
+          <button type="button" class={cls('formButtonSecondary', 'atlas-button-secondary')} on:click={cancel}>
+            {t('organization.cancel')}
+          </button>
+        {:else}
+          <button type="button" class={cls('formButtonSecondary', 'atlas-button-secondary')} on:click={() => (confirm = 'leave')}>
+            {t('organization.leave')}
+          </button>
+          {#if isAdmin}
+            <button type="button" class={cls('formButtonSecondary', 'atlas-button-secondary')} on:click={() => (confirm = 'delete')}>
+              {t('organization.delete')}
+            </button>
+          {/if}
+        {/if}
+      </div>
+    {/if}
   </div>
 {/if}

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

@@ -2,6 +2,8 @@ import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: Record<string, never>;
     events: {
+        exit: CustomEvent<"left" | "deleted">;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};

package/dist/components/PasskeySignUpStep.svelte

@@ -0,0 +1,23 @@
+<script>import { localizedErrorMessage } from "@atlasauth/js";
+import { useAtlas } from "../context";
+import { classFor } from "../appearance";
+import { translate } from "../i18n";
+export let busy = false;
+export let errors = [];
+export let onCreate;
+const atlas = useAtlas();
+const cls = (key, base) => classFor(key, atlas.appearance, base);
+const t = (key) => translate(atlas.catalog, key);
+const errorText = (error) => localizedErrorMessage(error, atlas.errorCatalog ?? atlas.catalog, atlas.catalog);
+</script>
+
+<div class={cls('card', 'atlas-card')} data-atlas-passkey-sign-up="">
+  <h1 class={cls('headerTitle', 'atlas-title')}>{t('signUp.title')}</h1>
+  {#each errors as error (error.code)}
+    <p class={cls('formFieldError', 'atlas-error')} role="alert">{errorText(error)}</p>
+  {/each}
+  <p class="atlas-text">{t('signUp.passkeyPrompt')}</p>
+  <button class={cls('formButtonPrimary', 'atlas-button')} type="button" disabled={busy} on:click={() => onCreate()}>
+    {t('signUp.passkeyCreate')}
+  </button>
+</div>

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

@@ -0,0 +1,24 @@
+import { SvelteComponent } from "svelte";
+import { type FieldError } from '@atlasauth/js';
+declare const __propDef: {
+    props: {
+        /**
+           * The passkey-only sign-up's last step: create the passkey. The server
+           * creates the account only when this registration verifies.
+           */ busy?: boolean;
+        errors?: FieldError[];
+        onCreate: () => void;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type PasskeySignUpStepProps = typeof __propDef.props;
+export type PasskeySignUpStepEvents = typeof __propDef.events;
+export type PasskeySignUpStepSlots = typeof __propDef.slots;
+export default class PasskeySignUpStep extends SvelteComponent<PasskeySignUpStepProps, PasskeySignUpStepEvents, PasskeySignUpStepSlots> {
+}
+export {};

package/dist/components/PolicyAcceptStep.svelte

@@ -0,0 +1,52 @@
+<script>import { onMount } from "svelte";
+import {
+  FapiClient,
+  controllerForPending,
+  injectPolicyStyles,
+  mountPolicyAcceptStep
+} from "@atlasauth/js";
+import { useAtlas } from "../context";
+import { usePolicyUi } from "../policies";
+import { ATLAS_SVELTE_SDK } from "../version";
+export let attempt = null;
+export let busy = false;
+export let onSubmit;
+export let onDecline = void 0;
+const atlas = useAtlas();
+const ui = usePolicyUi();
+let controller = null;
+let step = null;
+function host(node, c) {
+  injectPolicyStyles(node.ownerDocument);
+  step = mountPolicyAcceptStep(node, c, {
+    ...ui,
+    onSubmit: (acceptances) => onSubmit({ policy_acceptances: JSON.stringify(acceptances) }),
+    onDecline: (policy) => onDecline?.(policy)
+  });
+  step.setBusy(busy);
+  return {
+    destroy() {
+      step?.destroy();
+      step = null;
+    }
+  };
+}
+$: step?.setBusy(busy);
+onMount(() => {
+  const client = new FapiClient({
+    publishableKey: atlas.publishableKey,
+    baseUrl: atlas.frontendApi,
+    locale: atlas.locale,
+    sdk: ATLAS_SVELTE_SDK
+  });
+  void controllerForPending(client, attempt, { locale: atlas.locale ?? void 0 }).then((c) => {
+    controller = c;
+  });
+});
+</script>
+
+{#if controller}
+  <div use:host={controller} />
+{:else}
+  <p class="atlas-text">{ui.t('policy.loading')}</p>
+{/if}

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

@@ -0,0 +1,30 @@
+import { SvelteComponent } from "svelte";
+import { type Policy } from '@atlasauth/js';
+declare const __propDef: {
+    props: {
+        /**
+           * The sign-in step for a `needs_policy_acceptance` attempt: scroll-mode
+           * policies in their unskippable dialog, the rest as checkboxes, then "Accept
+           * and continue", which calls `onSubmit` with the `policy_acceptances` JSON for
+           * the flow. Declining a policy calls `onDecline` (cancel the attempt).
+           */ attempt?: {
+            id: string | null;
+            pending_policies?: unknown;
+        } | null;
+        busy?: boolean;
+        onSubmit: (values: Record<string, string>) => void;
+        onDecline?: ((policy: Policy) => void) | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type PolicyAcceptStepProps = typeof __propDef.props;
+export type PolicyAcceptStepEvents = typeof __propDef.events;
+export type PolicyAcceptStepSlots = typeof __propDef.slots;
+export default class PolicyAcceptStep extends SvelteComponent<PolicyAcceptStepProps, PolicyAcceptStepEvents, PolicyAcceptStepSlots> {
+}
+export {};

package/dist/components/PolicyClickwrap.svelte

@@ -0,0 +1,23 @@
+<script>import { injectPolicyStyles, mountPolicyClickwrap } from "@atlasauth/js";
+import { usePolicyUi } from "../policies";
+export let controller;
+const ui = usePolicyUi();
+function host(node, c) {
+  injectPolicyStyles(node.ownerDocument);
+  let current = c;
+  let mounted = mountPolicyClickwrap(node, current, ui);
+  return {
+    update(next) {
+      if (next === current) return;
+      mounted.destroy();
+      current = next;
+      mounted = mountPolicyClickwrap(node, current, ui);
+    },
+    destroy() {
+      mounted.destroy();
+    }
+  };
+}
+</script>
+
+<p use:host={controller} />

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

@@ -0,0 +1,19 @@
+import { SvelteComponent } from "svelte";
+import { type PolicyAcceptanceController } from '@atlasauth/js';
+declare const __propDef: {
+    props: {
+        /** The clickwrap sentence ("By continuing you agree to …") for `link`-mode policies, under the submit button. */ controller: PolicyAcceptanceController;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type PolicyClickwrapProps = typeof __propDef.props;
+export type PolicyClickwrapEvents = typeof __propDef.events;
+export type PolicyClickwrapSlots = typeof __propDef.slots;
+export default class PolicyClickwrap extends SvelteComponent<PolicyClickwrapProps, PolicyClickwrapEvents, PolicyClickwrapSlots> {
+}
+export {};

package/dist/components/PolicyConsent.svelte

@@ -0,0 +1,23 @@
+<script>import { injectPolicyStyles, mountPolicyConsent } from "@atlasauth/js";
+import { usePolicyUi } from "../policies";
+export let controller;
+const ui = usePolicyUi();
+function host(node, c) {
+  injectPolicyStyles(node.ownerDocument);
+  let current = c;
+  let mounted = mountPolicyConsent(node, current, ui);
+  return {
+    update(next) {
+      if (next === current) return;
+      mounted.destroy();
+      current = next;
+      mounted = mountPolicyConsent(node, current, ui);
+    },
+    destroy() {
+      mounted.destroy();
+    }
+  };
+}
+</script>
+
+<div use:host={controller} />

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

@@ -0,0 +1,24 @@
+import { SvelteComponent } from "svelte";
+import { type PolicyAcceptanceController } from '@atlasauth/js';
+declare const __propDef: {
+    props: {
+        /**
+           * The checkbox-mode policies (terms, privacy, …): one combined checkbox or one
+           * each, the names opening the document in an in-page viewer. The state lives in
+           * the `controller` (`policies` of `signUp()`, or a `PolicyAcceptanceController`
+           * of your own). The DOM is drawn by `@atlasauth/js`, shared with every SDK.
+           */ controller: PolicyAcceptanceController;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type PolicyConsentProps = typeof __propDef.props;
+export type PolicyConsentEvents = typeof __propDef.events;
+export type PolicyConsentSlots = typeof __propDef.slots;
+export default class PolicyConsent extends SvelteComponent<PolicyConsentProps, PolicyConsentEvents, PolicyConsentSlots> {
+}
+export {};