@flow-industries/id 0.22.0 → 0.23.0

package/dist/sdk/client/open-profile.js

@@ -1,7 +1,7 @@
 import { resolveIdHost } from "../id-host";
 import { isValidUsername } from "../usernames";
 import { getFlow, requireFlow } from "./create-flow";
-import { answerTokenRequest, bridgeToWindow, hostIdentity, makeIframe, OVERLAY_STYLE, } from "./iframe-host";
+import { answerTokenRequest, bridgeToWindow, hostIdentity, makeIframe, OVERLAY_STYLE, sendBridgeNotification, } from "./iframe-host";
 import { setOverlayFocus } from "./overlay-focus";
 // One overlay per page, kept for the page's lifetime. The alternative — a
 // handle per call site — would put a second fullscreen iframe over the host the
@@ -30,7 +30,7 @@ function createViewer(options) {
         setOverlayFocus(frame, ready && visible);
     }
     function mount(username) {
-        const el = makeIframe(`${host}/dialog/`, "Flow ID profile");
+        const el = makeIframe(`${host}/dialog/?v=2`, "Flow ID profile");
         el.dataset.flowProfileView = "";
         el.inert = true;
         Object.assign(el.style, OVERLAY_STYLE, { pointerEvents: "none" });
@@ -47,7 +47,7 @@ function createViewer(options) {
         // `/dialog/` and `init` asks it to land on the profile. Sending the route
         // here rather than as a follow-up message keeps the sign-in root from ever
         // mounting, even for the frame it takes to navigate away from it.
-        void opened.send("__internal", {
+        sendBridgeNotification(opened, "__internal", {
             type: "init",
             mode: "iframe",
             referrer: { title: document.title },
@@ -90,11 +90,14 @@ function createViewer(options) {
         // re-pointed in place. Tearing it down and rebuilding would reload the
         // dialog and lose the open animation on every profile after the first.
         if (mounted)
-            void live.send("__internal", { type: "profile-view", username });
+            sendBridgeNotification(live, "__internal", {
+                type: "profile-view",
+                username,
+            });
         // Pushed on every open rather than tracked with a subscription: it is only
         // read while a profile is on screen, and sending it here means the "this is
         // you" link is decided from the session as it stands at that moment.
-        void live.send("__internal", {
+        sendBridgeNotification(live, "__internal", {
             type: "profile-identity",
             identity: hostIdentity(flow),
         });
@@ -102,7 +105,7 @@ function createViewer(options) {
         onClose = nextOnClose;
         visible = true;
         applyHitTesting();
-        void live.send("__internal", { type: "dialog-shown" });
+        sendBridgeNotification(live, "__internal", { type: "dialog-shown" });
     }
     // Visibility is hit-testing plus a message, and nothing else. The overlay
     // iframe is NEVER set to `display: none` — that pauses the iframe's
@@ -116,7 +119,7 @@ function createViewer(options) {
         visible = false;
         window.removeEventListener("keydown", onKeyDown);
         applyHitTesting();
-        void bridge.send("__internal", { type: "dialog-hidden" });
+        sendBridgeNotification(bridge, "__internal", { type: "dialog-hidden" });
         const notifyClose = onClose;
         onClose = undefined;
         notifyClose?.();
@@ -131,7 +134,7 @@ function createViewer(options) {
         if (next === theme)
             return;
         theme = next;
-        void bridge?.send("__internal", {
+        sendBridgeNotification(bridge, "__internal", {
             type: "set-theme",
             theme: { colorScheme: next },
         });
@@ -176,6 +179,14 @@ export function openProfile(username, options = {}) {
         return false;
     if (!("document" in globalThis))
         return false;
+    const current = options.flow ?? getFlow();
+    if (current?.user?.username === username) {
+        closeProfile();
+        const opened = current.openAccount();
+        if (opened)
+            queueMicrotask(() => options.onClose?.());
+        return opened;
+    }
     const live = viewer ?? createViewer(options);
     viewer = live;
     if (options.theme)

package/dist/sdk/client/profile-button.d.ts

@@ -1,15 +1,3 @@
 import type { MountProfileOptions, ProfileButtonHandle } from "../types";
-/**
- * Mounts the universal Flow ID "profile button" — a persistent inline iframe
- * showing the signed-in user's avatar + username (the collapsed pill). Clicking
- * it opens the profile dialog in a SEPARATE fullscreen overlay iframe, so the
- * pill stays in place behind the dialog's dimmed backdrop rather than morphing
- * into it. Both iframes ride the dialog SPA at `${host}/dialog/` (routes
- * `/dialog/profile-pill` and `/dialog/profile`) so the chrome matches the auth
- * dialog and the widget is first-party to Flow ID (reads `/api/me`, uploads
- * avatars with the cookie session).
- *
- * Resolves the Flow singleton automatically (createFlow() must have run), so
- * callers don't thread the instance through. No-op under SSR.
- */
+/** Mount a native account button that opens Flow ID in a normal browser tab. */
 export declare function createProfileButton(options: MountProfileOptions): ProfileButtonHandle;

package/dist/sdk/client/profile-button.js

@@ -1,201 +1,145 @@
 import { resolveIdHost } from "../id-host";
 import { getFlow, requireFlow } from "./create-flow";
-import { answerTokenRequest, bridgeToWindow, hostIdentity, makeIframe, OVERLAY_STYLE, } from "./iframe-host";
-import { setOverlayFocus } from "./overlay-focus";
 const POSITION_STYLE = {
     "top-right": { top: "0", right: "0" },
     "top-left": { top: "0", left: "0" },
     "bottom-right": { bottom: "0", right: "0" },
     "bottom-left": { bottom: "0", left: "0" },
 };
-/**
- * Mounts the universal Flow ID "profile button" — a persistent inline iframe
- * showing the signed-in user's avatar + username (the collapsed pill). Clicking
- * it opens the profile dialog in a SEPARATE fullscreen overlay iframe, so the
- * pill stays in place behind the dialog's dimmed backdrop rather than morphing
- * into it. Both iframes ride the dialog SPA at `${host}/dialog/` (routes
- * `/dialog/profile-pill` and `/dialog/profile`) so the chrome matches the auth
- * dialog and the widget is first-party to Flow ID (reads `/api/me`, uploads
- * avatars with the cookie session).
- *
- * Resolves the Flow singleton automatically (createFlow() must have run), so
- * callers don't thread the instance through. No-op under SSR.
- */
+/** Mount a native account button that opens Flow ID in a normal browser tab. */
 export function createProfileButton(options) {
     if (!("document" in globalThis))
         return { setTheme() { }, destroy() { } };
     const flow = options.flow ?? getFlow() ?? requireFlow();
     const host = resolveIdHost(options.host ?? flow.host);
-    const hostOrigin = new URL(host).origin;
-    // Mutable so `setTheme` recolors over the open bridge, and so a dialog opened
-    // after a toggle is initialized with the theme the host is actually showing.
-    let theme = options.theme ?? "light dark";
-    let createdContainer = null;
-    let container = options.container ?? null;
-    if (!container) {
-        const el = document.createElement("div");
-        Object.assign(el.style, {
+    const createdContainer = options.container
+        ? null
+        : document.createElement("div");
+    const container = options.container ?? createdContainer;
+    if (!container)
+        return { setTheme() { }, destroy() { } };
+    if (createdContainer) {
+        Object.assign(createdContainer.style, {
             position: "fixed",
             zIndex: "2147483000",
-            // Never steal input from the host (e.g. the Godot canvas) — only the
-            // iframe re-enables pointer events for itself.
-            pointerEvents: "none",
             padding: options.padding ?? "1.5rem",
             ...POSITION_STYLE[options.position ?? "top-right"],
         });
-        document.body.appendChild(el);
-        createdContainer = el;
-        container = el;
-    }
-    function makeFrame(title) {
-        const frame = makeIframe(`${host}/dialog/`, title);
-        frame.dataset.flowProfile = "";
-        frame.style.display = "block";
-        return frame;
-    }
-    // A page may host several same-origin Flow iframes (this pill, this dialog,
-    // the auth login dialog). Origin filtering can't tell them apart, so each
-    // bridge is bound to its own iframe window — otherwise their `ready`/`close`
-    // handshakes would cross-fire. Identity is pinned to the host origin so the
-    // username is never broadcast with "*".
-    function makeBridge(frame, route) {
-        const bridge = bridgeToWindow(frame.contentWindow, {
-            targetOrigin: hostOrigin,
-        });
-        bridge.send("__internal", {
-            type: "init",
-            mode: "iframe",
-            referrer: { title: document.title },
-            theme: { colorScheme: theme },
-            route,
-        });
-        return bridge;
-    }
-    // ----- the persistent pill (stays mounted; sizes to its own content) -----
-    const pill = makeFrame("Flow ID profile button");
-    let pillWidth = 0;
-    let pillHeight = 0;
-    function applyPillSize() {
-        Object.assign(pill.style, {
-            position: "static",
-            width: `${pillWidth}px`,
-            height: `${pillHeight}px`,
-            pointerEvents: pillWidth > 0 ? "auto" : "none",
-        });
+        document.body.appendChild(createdContainer);
     }
-    applyPillSize();
-    container.appendChild(pill);
-    const pillBridge = makeBridge(pill, "/dialog/profile-pill");
-    pillBridge.on("__internal", (payload) => {
-        if (payload.type === "profile-resize") {
-            pillWidth = payload.width;
-            pillHeight = payload.height;
-            applyPillSize();
-        }
-        else if (payload.type === "profile-expand") {
-            showDialog();
-        }
-        else if (payload.type === "profile-token-request") {
-            void answerTokenRequest(pillBridge, flow, payload.id);
-        }
+    const button = document.createElement("button");
+    button.type = "button";
+    button.dataset.flowProfile = "";
+    Object.assign(button.style, {
+        display: "flex",
+        alignItems: "center",
+        gap: "8px",
+        border: "1px solid color-mix(in srgb, currentColor 18%, transparent)",
+        borderRadius: "999px",
+        padding: "10px 16px",
+        background: "Canvas",
+        color: "CanvasText",
+        font: "inherit",
+        cursor: "pointer",
+        pointerEvents: "auto",
+        maxWidth: "240px",
+        overflow: "hidden",
+        textOverflow: "ellipsis",
+        whiteSpace: "nowrap",
+    });
+    const notice = document.createElement("span");
+    notice.setAttribute("role", "status");
+    Object.assign(notice.style, {
+        display: "block",
+        font: "12px sans-serif",
+        maxWidth: "240px",
+    });
+    const avatar = document.createElement("span");
+    Object.assign(avatar.style, {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        width: "28px",
+        height: "28px",
+        borderRadius: "50%",
+        overflow: "hidden",
+        background: "color-mix(in srgb, currentColor 10%, transparent)",
+        flexShrink: "0",
     });
-    // ----- the dialog overlay (lazy; a separate fullscreen iframe layered ABOVE
-    // the pill, so the pill shows through its dimmed backdrop) -----
-    let dialog = null;
-    let dialogBridge = null;
-    function ensureDialog() {
-        if (dialog)
+    const name = document.createElement("span");
+    button.append(avatar, name);
+    const fallback = document.createElement("a");
+    fallback.href = `${host}/account`;
+    fallback.target = "_blank";
+    fallback.rel = "noopener noreferrer";
+    fallback.textContent = "Open Flow ID";
+    fallback.hidden = true;
+    let lastUsername;
+    let profileRequest = null;
+    function update() {
+        const user = flow.getState().user;
+        name.textContent = user?.username ?? "Flow ID";
+        button.setAttribute("aria-label", `Open ${user?.username ?? "your"} Flow ID account in a new tab`);
+        if (user?.username === lastUsername)
             return;
-        dialog = makeFrame("Flow ID profile");
-        dialog.inert = true;
-        Object.assign(dialog.style, OVERLAY_STYLE, {
-            pointerEvents: "none",
-        });
-        document.body.appendChild(dialog);
-        dialogBridge = makeBridge(dialog, "/dialog/profile");
-        dialogBridge.on("close", () => hideDialog());
-        dialogBridge.on("__internal", (payload) => {
-            if (payload.type === "profile-login") {
-                hideDialog();
-                void flow
-                    .login(payload.mode === "signup" ? { signUp: true } : { signIn: true })
-                    .catch(() => { });
-            }
-            else if (payload.type === "profile-logout") {
-                hideDialog();
-                void flow.logout().catch(() => { });
-            }
-            else if (payload.type === "profile-token-request") {
-                if (dialogBridge)
-                    void answerTokenRequest(dialogBridge, flow, payload.id);
-            }
-        });
-        void dialogBridge.send("__internal", {
-            type: "profile-identity",
-            identity: hostIdentity(flow),
-        });
-    }
-    // The dialog owns its open/close animation entirely; the host only signals
-    // visibility and toggles hit-testing. The overlay iframe is NEVER set to
-    // display:none — that pauses the iframe's requestAnimationFrame, so motion's
-    // engine is asleep when the next open fires and the animation jumps straight
-    // to its end (instant). Keeping it always-rendered, transparent and
-    // click-through while hidden keeps every open/close animation reliable.
-    function showDialog() {
-        ensureDialog();
-        if (!dialog)
+        lastUsername = user?.username;
+        profileRequest?.abort();
+        avatar.textContent = user?.username.slice(0, 1).toUpperCase() ?? "F";
+        if (!user || user.isGuest)
             return;
-        dialog.style.pointerEvents = "auto";
-        setOverlayFocus(dialog, true);
-        void dialogBridge?.send("__internal", { type: "dialog-shown" });
+        const controller = new AbortController();
+        profileRequest = controller;
+        void fetch(`${host}/api/users/${encodeURIComponent(user.username)}`, {
+            signal: controller.signal,
+            credentials: "omit",
+        })
+            .then(async (response) => {
+            if (!response.ok)
+                return;
+            // SAFETY: Flow ID owns the public profile endpoint and its optional image field.
+            const profile = (await response.json());
+            if (controller.signal.aborted || !profile.image)
+                return;
+            const image = document.createElement("img");
+            image.src = profile.image;
+            image.alt = "";
+            Object.assign(image.style, {
+                width: "100%",
+                height: "100%",
+                objectFit: "cover",
+            });
+            avatar.replaceChildren(image);
+        })
+            .catch(() => { });
     }
-    function hideDialog() {
-        if (!dialog)
-            return;
-        dialog.style.pointerEvents = "none";
-        setOverlayFocus(dialog, false);
-        void dialogBridge?.send("__internal", { type: "dialog-hidden" });
+    button.addEventListener("click", () => {
+        const opened = flow.openAccount();
+        notice.textContent = opened
+            ? ""
+            : "Your browser blocked the new tab. Open Flow ID below to sign in.";
+        fallback.hidden = opened;
+    });
+    function refresh() {
+        lastUsername = undefined;
+        update();
     }
-    // ----- keep both iframes' identity in sync with the Flow session -----
-    // flow.subscribe fires on any store change (jwt/credential/address too), so
-    // skip re-sending an identical identity (e.g. on every silent JWT refresh).
-    let lastIdentityKey;
-    function pushIdentity() {
-        const identity = hostIdentity(flow);
-        const key = identity ? `${identity.username}|${identity.isGuest}` : "none";
-        if (key === lastIdentityKey)
-            return;
-        lastIdentityKey = key;
-        void pillBridge.send("__internal", { type: "profile-identity", identity });
-        if (dialogBridge)
-            void dialogBridge.send("__internal", {
-                type: "profile-identity",
-                identity,
-            });
+    window.addEventListener("focus", refresh);
+    function setTheme(theme) {
+        button.style.colorScheme = theme;
     }
-    pushIdentity();
-    const unsubscribe = flow.subscribe(pushIdentity);
+    setTheme(options.theme ?? "light dark");
+    container.append(button, notice, fallback);
+    update();
+    const unsubscribe = flow.subscribe(update);
     return {
-        setTheme(next) {
-            if (next === theme)
-                return;
-            theme = next;
-            void pillBridge.send("__internal", {
-                type: "set-theme",
-                theme: { colorScheme: next },
-            });
-            void dialogBridge?.send("__internal", {
-                type: "set-theme",
-                theme: { colorScheme: next },
-            });
-        },
+        setTheme,
         destroy() {
-            hideDialog();
             unsubscribe();
-            pillBridge.destroy();
-            dialogBridge?.destroy();
-            pill.remove();
-            dialog?.remove();
+            profileRequest?.abort();
+            window.removeEventListener("focus", refresh);
+            fallback.remove();
+            button.remove();
+            notice.remove();
             createdContainer?.remove();
         },
     };

package/dist/sdk/client/reports.d.ts

@@ -0,0 +1,9 @@
+import type { ReportsApi, ReportTransport } from "../types/reports";
+export type { ReportOperation, ReportRequest, ReportResponse, } from "../types/reports";
+export declare class ReportRequestError extends Error {
+    readonly status: number;
+    readonly response: string;
+    constructor(status: number, response: string);
+}
+/** Typed service reports. Keep the reporting bearer on trusted servers only. */
+export declare function createReportsApi(host: string, token: string, transport?: ReportTransport): ReportsApi;

package/dist/sdk/client/reports.js

@@ -0,0 +1,30 @@
+import { httpOperations } from "../contracts/http";
+export class ReportRequestError extends Error {
+    status;
+    response;
+    constructor(status, response) {
+        super(`Flow report failed (${status})`);
+        this.status = status;
+        this.response = response;
+        this.name = "ReportRequestError";
+    }
+}
+/** Typed service reports. Keep the reporting bearer on trusted servers only. */
+export function createReportsApi(host, token, transport = fetch) {
+    return async function report(operation, body) {
+        const contract = httpOperations[operation];
+        const request = contract.request.parse(body);
+        const response = await transport(new URL(contract.path, host), {
+            method: "POST",
+            headers: {
+                authorization: `Bearer ${token}`,
+                "content-type": "application/json",
+            },
+            body: JSON.stringify(request),
+        });
+        if (!response.ok)
+            throw new ReportRequestError(response.status, await response.text());
+        // SAFETY: the selected operation owns both this response schema and the mapped response type.
+        return contract.response.parse(await response.json());
+    };
+}

package/dist/sdk/client/session.d.ts

@@ -1,4 +1,4 @@
-import type { Address, FlowCredential, FlowState, RunLoginParams, RunLoginResult, Store } from "../types";
+import type { Address, FlowCredential, FlowState, Store } from "../types";
 /**
  * Reads the active credential from IndexedDB and seeds the in-memory store
  * with `{ credential, address }`. Run on every page load so signing operations
@@ -9,15 +9,6 @@ import type { Address, FlowCredential, FlowState, RunLoginParams, RunLoginResult
  * not an error.
  */
 export declare function restoreCredential(store: Store<FlowState>): Promise<void>;
-/**
- * Drives the interactive `wallet_connect` flow through the dialog and
- * commits the result to local state.
- *
- * Capabilities are intent only (signUp / signIn / signInHeadless / extras like
- * accessKeyHash). Remembering "which account did this user use last" is
- * the dialog's job — the client doesn't track or pass credentialIds.
- */
-export declare function runLogin(params: RunLoginParams): Promise<RunLoginResult>;
 /**
  * Clears local-only auth state: active credential in IDB, the access key for
  * the current address (if any), and the in-memory store. Does NOT touch the

package/dist/sdk/client/session.js

@@ -2,7 +2,6 @@ import * as OxAddress from "ox/Address";
 import * as PublicKey from "ox/PublicKey";
 import { hex0x } from "../hex";
 import { idb } from "./idb";
-import { METHODS } from "./methods";
 import { initialFlowState } from "./store";
 const CREDENTIAL_KEY = "flow.activeCredential";
 /**
@@ -21,42 +20,6 @@ export async function restoreCredential(store) {
     const address = credentialToAddress(credential);
     store.setState({ credential, address });
 }
-/**
- * Drives the interactive `wallet_connect` flow through the dialog and
- * commits the result to local state.
- *
- * Capabilities are intent only (signUp / signIn / signInHeadless / extras like
- * accessKeyHash). Remembering "which account did this user use last" is
- * the dialog's job — the client doesn't track or pass credentialIds.
- */
-export async function runLogin(params) {
-    const { dialog, store, options, extraCapabilities } = params;
-    const signUp = Boolean(options?.signUp);
-    const capabilities = {
-        createAccount: signUp ? true : undefined,
-        signIn: !signUp && options?.signIn ? true : undefined,
-        signInHeadless: !signUp && options?.signInHeadless ? true : undefined,
-        ...(extraCapabilities ?? {}),
-    };
-    /* SAFETY: the connect method's response shape, which the dialog route answers. */
-    const result = (await dialog.request(METHODS.connect, [
-        { capabilities },
-    ]));
-    const { jwt, refreshToken, user, credential, webauthn, additionalSessions } = result;
-    // An email-only login carries no credential — mirror the guest handling:
-    // nothing is persisted to IDB (reserved for a real passkey credential) and
-    // the address stays null until a passkey is added.
-    const address = credential ? credentialToAddress(credential) : null;
-    if (credential)
-        await idb.set(CREDENTIAL_KEY, credential);
-    store.setState({ user, jwt, credential, address });
-    return {
-        session: { user, jwt, credential, address },
-        refreshToken,
-        webauthn,
-        additionalSessions: additionalSessions ? additionalSessions : undefined,
-    };
-}
 /**
  * Clears local-only auth state: active credential in IDB, the access key for
  * the current address (if any), and the in-memory store. Does NOT touch the

package/dist/sdk/client/static-flow.js

@@ -44,6 +44,7 @@ export function createStaticFlow(state, options = {}) {
             return snapshot.user?.isGuest === true;
         },
         login: () => unavailable("login"),
+        openAccount: () => unavailable("openAccount"),
         logout: () => unavailable("logout"),
         restore: async () => false,
         ensureGuest: () => unavailable("ensureGuest"),