@andco/sdk-svelte 0.0.3 → 0.0.5

package/LICENSE

@@ -187,7 +187,7 @@
       same "printed page" as the copyright notice for easier
       identification within third-party archives.
 
-   Copyright 2026 Andco
+   Copyright 2026 Haulmer
 
    Licensed under the Apache License, Version 2.0 (the "License");
    you may not use this file except in compliance with the License.

package/README.md

@@ -1,5 +1,11 @@
 # `@andco/sdk-svelte`
 
+> [!WARNING]
+> **Pre-1.0 software.** Until version 1.0.0 is released, any new version may include breaking
+> changes, including minor and patch releases. Expect any API incompatibility and data resets
+> in the Andco environments without prior notice. Pin an exact version and review the release
+> notes before upgrading.
+
 Svelte 5 bindings for `@andco/sdk`, implemented with runes, callback props,
 and Svelte context.
 
@@ -22,10 +28,11 @@ that wants to hand the provider a session resolved ahead of time via `initialSes
 ```svelte
 <script lang="ts">
   import { AndcoProvider } from "@andco/sdk-svelte";
+  import type { AndcoBrowserOptions } from "@andco/sdk/browser";
 
   import App from "./App.svelte";
 
-  const clientOptions = {
+  const clientOptions: AndcoBrowserOptions = {
     clientId: "client_123",
     endpointAuth: "https://auth.example.com",
     endpointApi: "https://api.example.com",
@@ -52,7 +59,7 @@ them.
 Svelte 5 callback props use lowercase DOM-style names. `AndcoButton` takes its client, endpoints,
 and theme from the `<AndcoProvider>` context, not from props — the only thing a per-render sign-in
 needs to pass is `authorization`, the same request-local options `auth.signIn` accepts (`scopes`,
-`redirectTo`, `orgId`, `authorizationDetails`, `resource`, …):
+`redirectTo`, `authorizations`, `authorizationDetails`, `resource`, …):
 
 ```svelte
 <script lang="ts">
@@ -105,18 +112,32 @@ expiry, or to observe the unresolved-to-anonymous transition `useAndco`
 deliberately hides. `useAndcoUser().current` changes only when the person
 changes — identifier, name, email, or avatar.
 
-## Progressive scopes
+## Progressive permissions
+
+Scopes are OpenID Connect only; resource permissions are RARs built by the Resource Server's
+authorization builder:
 
 ```svelte
-{#if session.current && !session.current.scopes.includes("bank_accounts:read")}
-  <AndcoButton authorization={{ scopes: ["openid", "email", "profile", "bank_accounts:read"] }} />
+<script lang="ts">
+  import { Bank } from "@andco/bank-sdk";
+  import { AndcoButton, useAndcoSession } from "@andco/sdk-svelte";
+
+  const session = useAndcoSession();
+  const bank = new Bank();
+  const accounts = bank.accounts.authorization({ actions: ["read"], subject: { type: "profile" } });
+</script>
+
+{#if session.current}
+  <AndcoButton authorization={{ authorizations: [accounts] }} />
 {/if}
 ```
 
 ## Intents
 
-Deposit and withdrawal creation live on the AndCo Bank Resource Server Definition, not on the
-core client's domain-neutral `intents`. Bind it to the signed-in identity once, then use it:
+Deposit and transfer creation live on the Andco Bank Resource Server Definition, by domain
+(`bank.deposits`, `bank.transfers`, `bank.accounts`), not on the core client's domain-neutral
+`intents`. Build it from the signed-in identity's credentials — it takes the client id and endpoint
+from them — then use it:
 
 ```svelte
 <script lang="ts">
@@ -124,8 +145,7 @@ core client's domain-neutral `intents`. Bind it to the signed-in identity once,
   import { Bank } from "@andco/bank-sdk";
 
   const andco = useAndcoAuthed();
-  const bankDefinition = new Bank({ clientId: "client_123", resource: "https://api.andco.cl" });
-  const bank = $derived(andco.current ? bankDefinition.use(andco.current) : null);
+  const bank = $derived(andco.current ? new Bank(andco.current) : null);
 </script>
 ```
 
@@ -133,16 +153,17 @@ core client's domain-neutral `intents`. Bind it to the signed-in identity once,
 <script lang="ts">
   async function topUp() {
     if (!bank) return;
-    const { data: deposit, error } = await bank.intents.createDeposit(
+    const { data: deposit, error } = await bank.deposits.create(
       {
         expires_in: "30 minutes",
-        amount: { currency: "CLP", suggested: "40000", editable: false },
-        note: { suggested: "Wallet top-up", editable: true },
+        amount: { currency: "CLP", value: "40000", editable: false },
+        note: { value: "Wallet top-up", editable: true },
         metadata: { merchant_transaction_id: "deposit_8472" },
       },
       { idempotencyKey: "deposit:8472" },
     );
     if (error) throw error;
+    andco.current?.intents.present(deposit, { presentation: "popup" });
   }
 </script>
 
@@ -151,19 +172,21 @@ core client's domain-neutral `intents`. Bind it to the signed-in identity once,
 
 `AndcoIntentButton` renders the same hosted iframe as `AndcoButton`, with its `flow` fixed to
 `"intent"` — the Hosted Intent Presentation is the canonical way a person confirms an Intent, and
-its DOM and code stay Andco's, never the Project's. It takes the same props as `AndcoButton`
-(`authorization`, `busy`, `disabled`, `locale`, `release`, `themeMode`, and the `onready` /
-`onactivate` / `oncomplete` / `ondismiss` / `onerror` callbacks); there is currently no prop to
-target a specific, already-created Intent, and `oncomplete` takes no arguments — read the Intent's
-state with `bank.intents.get(intentId)` after it fires, or through `bank.intents.getEvents(intentId)`
-or the domain-specific listeners (`onIntentDepositEvent`, `onIntentWithdrawalEvent`), rather than
-expecting it on the callback.
+its DOM and code stay Andco's, never the Project's. It takes the props of `AndcoButton` plus a
+required `intentId`: an id, or a function that resolves it *after* the person activates the control,
+so the window is already open when the Intent is created. `oncomplete` receives
+`{ outcome, intent }`; only `intent`, read after the interaction, says what happened to the money.
 
 ```svelte
-<AndcoIntentButton onerror={(error) => console.error(error.message)} />
+<AndcoIntentButton
+  intentId={async () => {
+    const response = await fetch("/api/create-transfer", { method: "POST" });
+    return (await response.json())["intent_id"];
+  }}
+  oncomplete={(result) => console.log(result.outcome, result.intent.status)}
+  onerror={(error) => console.error(error.message)}
+/>
 ```
 
-See [`apps/example-svelte`](../../apps/example-svelte/README.md) for the complete
+See [`apps/example-svelte`](https://github.com/haulmer/andco-sdk-js/tree/main/apps/example-svelte) for the complete
 session → Grant → resource flow.
-
-There is no separate hosted-vs-direct pair of Intent buttons — `AndcoIntentButton` is the only one.

package/dist/AndCoButton.svelte

@@ -10,7 +10,10 @@
 
   type Options = AndcoButtonControllerOptions;
   type Props = Omit<HTMLIframeAttributes, "onerror" | "referrerpolicy" | "sandbox" | "src" | "srcdoc"> &
-    Pick<Options, "authorization" | "busy" | "disabled" | "flow" | "intentId" | "locale" | "release" | "themeMode"> & {
+    Pick<
+      Options,
+      "authorization" | "busy" | "disabled" | "flow" | "intentId" | "locale" | "presentation" | "release" | "themeMode"
+    > & {
       onready?: Options["onReady"];
       onactivate?: Options["onActivate"];
       oncomplete?: Options["onComplete"];
@@ -25,6 +28,7 @@
     flow,
     intentId,
     locale,
+    presentation,
     release,
     themeMode,
     onready,
@@ -46,14 +50,15 @@
   $effect(() => {
     const next = new AndcoButtonController({
       client,
-      ...(authorization ? { authorization } : {}),
-      ...(flow ? { flow } : {}),
-      ...(intentId ? { intentId } : {}),
-      ...(release === undefined ? {} : { release }),
-      ...(themeMode ? { themeMode } : {}),
-      ...(locale ? { locale } : {}),
-      ...(disabled === undefined ? {} : { disabled }),
-      ...(busy === undefined ? {} : { busy }),
+      authorization,
+      flow,
+      intentId,
+      release,
+      themeMode,
+      locale,
+      presentation,
+      disabled,
+      busy,
       onReady: (event) => onready?.(event),
       onActivate: (event) => onactivate?.(event),
       onComplete: (outcome) => oncomplete?.(outcome),
@@ -81,19 +86,20 @@
     if (!iframe || !controller) return;
     return controller.connect(iframe);
   });
+
+  // The controller publishes the frame contract as data; this component only owns the element.
+  const defaultStyle = AndcoButtonController.frameStyleText(AndcoButtonController.IFRAME_DEFAULT_STYLE);
+  const frame = $derived(snapshot ? AndcoButtonController.frameProps(snapshot) : { src: undefined, hidden: true });
 </script>
 
-<!--
-  A bare iframe is 300x150 with a border, and the hosted control fills whatever box it is given, so
-  without a default the application sees a bordered grey slab. A `style` on the component wins.
--->
+<!-- A `style` on the component wins over the default set here. -->
 <iframe
-  style="border:0;display:block;height:3rem;width:18rem"
+  style={defaultStyle}
   {...attributes}
   bind:this={iframe}
-  hidden={!snapshot?.ready}
-  referrerpolicy="no-referrer"
-  sandbox="allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox"
-  src={snapshot?.iframeURL}
+  hidden={frame.hidden}
+  referrerpolicy={AndcoButtonController.IFRAME_REFERRER_POLICY}
+  sandbox={AndcoButtonController.IFRAME_SANDBOX}
+  src={frame.src}
   {title}
 ></iframe>

package/dist/AndCoButton.svelte.d.ts

@@ -2,7 +2,7 @@ import type { AndcoError } from "@andco/sdk";
 import { type AndcoButtonControllerOptions } from "@andco/sdk/browser";
 import type { HTMLIframeAttributes } from "svelte/elements";
 type Options = AndcoButtonControllerOptions;
-type Props = Omit<HTMLIframeAttributes, "onerror" | "referrerpolicy" | "sandbox" | "src" | "srcdoc"> & Pick<Options, "authorization" | "busy" | "disabled" | "flow" | "intentId" | "locale" | "release" | "themeMode"> & {
+type Props = Omit<HTMLIframeAttributes, "onerror" | "referrerpolicy" | "sandbox" | "src" | "srcdoc"> & Pick<Options, "authorization" | "busy" | "disabled" | "flow" | "intentId" | "locale" | "presentation" | "release" | "themeMode"> & {
     onready?: Options["onReady"];
     onactivate?: Options["onActivate"];
     oncomplete?: Options["onComplete"];

package/dist/context.svelte.d.ts

@@ -1,9 +1,11 @@
 import { type AndcoClient, type AndcoClientAuthed, type AndcoSession, type AndcoUser } from "@andco/sdk";
+/** Stable provider client and a reactive getter for the current session. */
 export type AndcoSvelteContext = {
     /** The instance. One reference for the provider's lifetime — never `with(...)` or `authorized()`. */
     readonly client: AndcoClient;
     readonly session: AndcoSession | null | undefined;
 };
+/** Registers the provider context during component initialization. */
 export declare function setAndcoContext(context: AndcoSvelteContext): void;
 /**
  * The raw context: the stable instance plus the raw session.
@@ -72,6 +74,33 @@ export declare function useAndcoAuthed(): {
 export declare function useAndcoSession(): {
     readonly current: AndcoSession | null | undefined;
 };
+/**
+ * Instance Readiness: whether the store has finished its initial load.
+ *
+ * `false` until the load settles, then `true` for good. Not the same as being signed out — an
+ * instance that is not ready has not yet determined whether a session exists at all, which is
+ * exactly the `undefined` case {@link useAndcoSession} distinguishes from `null`. This rune is that
+ * same distinction read as a boolean, for the common case of gating a render on it rather than
+ * checking `undefined` directly.
+ *
+ * The load itself is already started by the provider's own subscription (`AndCoProvider.svelte`
+ * subscribes in its own `$effect`, before this rune ever runs), so reading this starts nothing new.
+ *
+ * @example
+ * ```svelte
+ * const ready = useAndcoReady();
+ * ```
+ * ```svelte
+ * {#if !ready.current}
+ *   <Skeleton />
+ * {:else}
+ *   {@render children()}
+ * {/if}
+ * ```
+ */
+export declare function useAndcoReady(): {
+    readonly current: boolean;
+};
 /**
  * The authenticated person, or `null`/`undefined` sharing {@link useAndcoSession}'s three states.
  *

package/dist/context.svelte.js

@@ -1,6 +1,7 @@
 import { sessionIdentityKey, } from "@andco/sdk";
 import { createContext } from "svelte";
 const [get, set] = createContext();
+/** Registers the provider context during component initialization. */
 export function setAndcoContext(context) {
     set(context);
 }
@@ -102,6 +103,39 @@ export function useAndcoSession() {
         },
     };
 }
+/**
+ * Instance Readiness: whether the store has finished its initial load.
+ *
+ * `false` until the load settles, then `true` for good. Not the same as being signed out — an
+ * instance that is not ready has not yet determined whether a session exists at all, which is
+ * exactly the `undefined` case {@link useAndcoSession} distinguishes from `null`. This rune is that
+ * same distinction read as a boolean, for the common case of gating a render on it rather than
+ * checking `undefined` directly.
+ *
+ * The load itself is already started by the provider's own subscription (`AndCoProvider.svelte`
+ * subscribes in its own `$effect`, before this rune ever runs), so reading this starts nothing new.
+ *
+ * @example
+ * ```svelte
+ * const ready = useAndcoReady();
+ * ```
+ * ```svelte
+ * {#if !ready.current}
+ *   <Skeleton />
+ * {:else}
+ *   {@render children()}
+ * {/if}
+ * ```
+ */
+export function useAndcoReady() {
+    const value = andcoContext();
+    const ready = $derived(value.session !== undefined);
+    return {
+        get current() {
+            return ready;
+        },
+    };
+}
 /**
  * The authenticated person, or `null`/`undefined` sharing {@link useAndcoSession}'s three states.
  *
@@ -130,7 +164,10 @@ export function useAndcoUser() {
             cached.id !== next.id ||
             cached.name !== next.name ||
             cached.email !== next.email ||
-            cached.avatarUrl !== next.avatarUrl) {
+            cached.avatarUrl !== next.avatarUrl ||
+            cached.emailVerified !== next.emailVerified ||
+            cached.phone !== next.phone ||
+            cached.phoneVerified !== next.phoneVerified) {
             cached = next;
         }
         return cached;

package/dist/index.d.ts

@@ -1,4 +1,4 @@
 export { default as AndcoButton } from "./AndCoButton.svelte";
 export { default as AndcoIntentButton } from "./AndCoIntentButton.svelte";
 export { default as AndcoProvider } from "./AndCoProvider.svelte";
-export { type AndcoSvelteContext, setAndcoContext, useAndco, useAndcoAuthed, useAndcoSession, useAndcoUser, } from "./context.svelte.js";
+export { type AndcoSvelteContext, setAndcoContext, useAndco, useAndcoAuthed, useAndcoReady, useAndcoSession, useAndcoUser, } from "./context.svelte.js";

package/dist/index.js

@@ -1,4 +1,4 @@
 export { default as AndcoButton } from "./AndCoButton.svelte";
 export { default as AndcoIntentButton } from "./AndCoIntentButton.svelte";
 export { default as AndcoProvider } from "./AndCoProvider.svelte";
-export { setAndcoContext, useAndco, useAndcoAuthed, useAndcoSession, useAndcoUser, } from "./context.svelte.js";
+export { setAndcoContext, useAndco, useAndcoAuthed, useAndcoReady, useAndcoSession, useAndcoUser, } from "./context.svelte.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@andco/sdk-svelte",
-  "version": "0.0.3",
+  "version": "0.0.5",
   "private": false,
   "publishConfig": {
     "access": "public"
@@ -23,7 +23,7 @@
     "svelte": "^5.0.0"
   },
   "dependencies": {
-    "@andco/sdk": "0.0.3"
+    "@andco/sdk": "0.0.5"
   },
   "devDependencies": {
     "@sveltejs/package": "^2.0.0",
@@ -36,6 +36,16 @@
   },
   "license": "Apache-2.0",
   "description": "Svelte bindings for the Andco SDK.",
+  "author": "Patricio Lopez Juri <patricio.lopez@haulmer.com>",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/haulmer/andco-sdk-js.git",
+    "directory": "packages/sdk-svelte"
+  },
+  "homepage": "https://github.com/haulmer/andco-sdk-js#readme",
+  "bugs": {
+    "url": "https://github.com/haulmer/andco-sdk-js/issues"
+  },
   "scripts": {
     "clean": "node -e \"require('node:fs').rmSync('dist', { recursive: true, force: true })\"",
     "build": "pnpm run clean && svelte-package",