@flow-industries/id 0.24.5 → 0.26.0

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

@@ -1,4 +1,3 @@
-import { resolveIdHost } from "../id-host";
 import { getFlow, requireFlow } from "./create-flow";
 const POSITION_STYLE = {
     "top-right": { top: "0", right: "0" },
@@ -6,194 +5,50 @@ const POSITION_STYLE = {
     "bottom-right": { bottom: "0", right: "0" },
     "bottom-left": { bottom: "0", left: "0" },
 };
-/** Mount an account button that signs guests in or opens full-account settings. */
+/** Mount the shared profile menu. Import @flow-industries/id/profile.css in non-Tailwind apps. */
 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 createdContainer = options.container
-        ? null
-        : document.createElement("div");
-    const container = options.container ?? createdContainer;
-    if (!container)
-        return { setTheme() { }, destroy() { } };
-    if (createdContainer) {
-        Object.assign(createdContainer.style, {
+    const container = options.container ?? document.createElement("div");
+    if (!options.container) {
+        Object.assign(container.style, {
             position: "fixed",
             zIndex: "2147483000",
             padding: options.padding ?? "1.5rem",
             ...POSITION_STYLE[options.position ?? "top-right"],
         });
-        document.body.appendChild(createdContainer);
-    }
-    const button = document.createElement("button");
-    button.type = "button";
-    button.dataset.flowProfile = "";
-    Object.assign(button.style, {
-        display: "flex",
-        boxSizing: "border-box",
-        height: "var(--flow-profile-height, 2.25rem)",
-        flexShrink: "0",
-        alignItems: "center",
-        gap: "8px",
-        border: "0",
-        borderRadius: "0",
-        padding: "0.25rem 0.75rem",
-        background: "transparent",
-        color: "CanvasText",
-        font: "inherit",
-        fontSize: "0.875rem",
-        lineHeight: "1.25rem",
-        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: "calc(var(--flow-profile-height, 2.25rem) - 0.5rem)",
-        height: "calc(var(--flow-profile-height, 2.25rem) - 0.5rem)",
-        borderRadius: "var(--squircle-radius, 35%)",
-        // biome-ignore lint/plugin: CSSStyleDeclaration requires the browser's property name.
-        cornerShape: "superellipse(1.6)",
-        overflow: "hidden",
-        background: "color-mix(in srgb, currentColor 10%, transparent)",
-        flexShrink: "0",
-    });
-    const name = document.createElement("span");
-    Object.assign(name.style, {
-        minWidth: "0",
-        overflow: "hidden",
-        textOverflow: "ellipsis",
-    });
-    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 lastUser = null;
-    let imageUrl = null;
-    avatar.textContent = "F";
-    let profileRequest = null;
-    function update(refresh = false) {
-        const user = flow.getState().user;
-        name.textContent = user?.username ?? "Flow ID";
-        button.setAttribute("aria-label", !user || user.isGuest
-            ? "Sign in to Flow ID"
-            : `Open ${user.username} Flow ID account in a new tab`);
-        const identityChanged = user?.id !== lastUser?.id ||
-            user?.username !== lastUser?.username ||
-            user?.isGuest !== lastUser?.isGuest;
-        if (identityChanged) {
-            profileRequest?.abort();
-            profileRequest = null;
-            imageUrl = null;
-            avatar.textContent = user?.username.slice(0, 1).toUpperCase() ?? "F";
-            lastUser = user;
-        }
-        else if (!refresh || profileRequest) {
-            // Same account: only an explicit refresh refetches, and never on top of
-            // a request already in flight.
-            return;
-        }
-        if (!user || user.isGuest)
-            return;
-        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)
-                return;
-            if (profile.image === null) {
-                imageUrl = null;
-                avatar.textContent = user.username.slice(0, 1).toUpperCase();
-                return;
-            }
-            if (!profile.image || profile.image === imageUrl)
-                return;
-            const image = document.createElement("img");
-            image.src = profile.image;
-            image.alt = "";
-            Object.assign(image.style, {
-                width: "100%",
-                height: "100%",
-                objectFit: "cover",
-            });
-            await image.decode();
-            if (controller.signal.aborted)
-                return;
-            imageUrl = profile.image;
-            avatar.replaceChildren(image);
-        })
-            .catch(() => { })
-            .finally(() => {
-            if (profileRequest === controller)
-                profileRequest = null;
-        });
+        document.body.appendChild(container);
     }
-    button.addEventListener("click", () => {
-        const user = flow.getState().user;
-        if (!user || user.isGuest) {
-            if (button.disabled)
-                return;
-            button.disabled = true;
-            notice.textContent = "";
-            fallback.hidden = true;
-            void flow.login().catch(() => {
-                button.disabled = false;
-                notice.textContent = "Could not start sign-in. Try again.";
-            });
+    const mount = document.createElement("div");
+    container.appendChild(mount);
+    let destroyed = false;
+    let theme = options.theme;
+    let renderer = null;
+    void import("../react/profile-renderer")
+        .then(({ mountProfileMenu }) => {
+        if (destroyed)
             return;
+        renderer = mountProfileMenu(mount, { flow, host: options.host, theme });
+    })
+        .catch(() => {
+        if (!destroyed) {
+            mount.setAttribute("role", "alert");
+            mount.textContent =
+                "Could not load the account menu. Reload and try again.";
         }
-        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() {
-        update(true);
-    }
-    window.addEventListener("focus", refresh);
-    function setTheme(theme) {
-        button.style.colorScheme = theme;
-    }
-    setTheme(options.theme ?? "light dark");
-    container.append(button, notice, fallback);
-    update();
-    const unsubscribe = flow.subscribe(() => update());
     return {
-        setTheme,
+        setTheme(value) {
+            theme = value;
+            renderer?.setTheme(value);
+        },
         destroy() {
-            unsubscribe();
-            profileRequest?.abort();
-            window.removeEventListener("focus", refresh);
-            fallback.remove();
-            button.remove();
-            notice.remove();
-            createdContainer?.remove();
+            destroyed = true;
+            renderer?.destroy();
+            mount.remove();
+            if (!options.container)
+                container.remove();
         },
     };
 }

package/dist/sdk/client/session.js

@@ -28,12 +28,12 @@ export async function restoreCredential(store) {
  */
 export async function runLogout(store) {
     const state = store.getSnapshot();
+    store.setState(initialFlowState);
     if (state.address) {
         const { clearAccessKey } = await import("./access-key");
         await clearAccessKey(state.address);
     }
     await idb.delete(CREDENTIAL_KEY);
-    store.setState(initialFlowState);
 }
 /**
  * Derives the user's wallet address from their passkey public key by

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

@@ -45,6 +45,9 @@ export function createStaticFlow(state, options = {}) {
         },
         login: () => unavailable("login"),
         openAccount: () => unavailable("openAccount"),
+        switchAccounts: () => unavailable("switchAccounts"),
+        addAccount: () => unavailable("addAccount"),
+        listAccounts: () => unavailable("listAccounts"),
         logout: () => unavailable("logout"),
         restore: async () => false,
         ensureGuest: () => unavailable("ensureGuest"),

package/dist/sdk/db/schema.d.ts

@@ -651,6 +651,173 @@ export declare const session: import("drizzle-orm/pg-core").PgTableWithColumns<{
     };
     dialect: "pg";
 }>;
+export declare const browserAccountSet: import("drizzle-orm/pg-core").PgTableWithColumns<{
+    name: "browser_account_set";
+    schema: undefined;
+    columns: {
+        initialized: import("drizzle-orm/pg-core").PgColumn<{
+            name: "initialized";
+            tableName: "browser_account_set";
+            dataType: "boolean";
+            columnType: "PgBoolean";
+            data: boolean;
+            driverParam: boolean;
+            notNull: true;
+            hasDefault: true;
+            isPrimaryKey: false;
+            isAutoincrement: false;
+            hasRuntimeDefault: false;
+            enumValues: undefined;
+            baseColumn: never;
+            identity: undefined;
+            generated: undefined;
+        }, {}, {}>;
+        id: import("drizzle-orm/pg-core").PgColumn<{
+            name: "id";
+            tableName: "browser_account_set";
+            dataType: "string";
+            columnType: "PgText";
+            data: string;
+            driverParam: string;
+            notNull: true;
+            hasDefault: false;
+            isPrimaryKey: true;
+            isAutoincrement: false;
+            hasRuntimeDefault: false;
+            enumValues: [string, ...string[]];
+            baseColumn: never;
+            identity: undefined;
+            generated: undefined;
+        }, {}, {}>;
+        activeUserId: import("drizzle-orm/pg-core").PgColumn<{
+            name: "active_user_id";
+            tableName: "browser_account_set";
+            dataType: "string";
+            columnType: "PgText";
+            data: string;
+            driverParam: string;
+            notNull: false;
+            hasDefault: false;
+            isPrimaryKey: false;
+            isAutoincrement: false;
+            hasRuntimeDefault: false;
+            enumValues: [string, ...string[]];
+            baseColumn: never;
+            identity: undefined;
+            generated: undefined;
+        }, {}, {}>;
+        updatedAt: import("drizzle-orm/pg-core").PgColumn<{
+            name: "updated_at";
+            tableName: "browser_account_set";
+            dataType: "date";
+            columnType: "PgTimestamp";
+            data: Date;
+            driverParam: string;
+            notNull: true;
+            hasDefault: true;
+            isPrimaryKey: false;
+            isAutoincrement: false;
+            hasRuntimeDefault: false;
+            enumValues: undefined;
+            baseColumn: never;
+            identity: undefined;
+            generated: undefined;
+        }, {}, {}>;
+    };
+    dialect: "pg";
+}>;
+export declare const browserAccountMember: import("drizzle-orm/pg-core").PgTableWithColumns<{
+    name: "browser_account_member";
+    schema: undefined;
+    columns: {
+        setId: import("drizzle-orm/pg-core").PgColumn<{
+            name: "set_id";
+            tableName: "browser_account_member";
+            dataType: "string";
+            columnType: "PgText";
+            data: string;
+            driverParam: string;
+            notNull: true;
+            hasDefault: false;
+            isPrimaryKey: false;
+            isAutoincrement: false;
+            hasRuntimeDefault: false;
+            enumValues: [string, ...string[]];
+            baseColumn: never;
+            identity: undefined;
+            generated: undefined;
+        }, {}, {}>;
+        userId: import("drizzle-orm/pg-core").PgColumn<{
+            name: "user_id";
+            tableName: "browser_account_member";
+            dataType: "string";
+            columnType: "PgText";
+            data: string;
+            driverParam: string;
+            notNull: true;
+            hasDefault: false;
+            isPrimaryKey: false;
+            isAutoincrement: false;
+            hasRuntimeDefault: false;
+            enumValues: [string, ...string[]];
+            baseColumn: never;
+            identity: undefined;
+            generated: undefined;
+        }, {}, {}>;
+        sessionId: import("drizzle-orm/pg-core").PgColumn<{
+            name: "session_id";
+            tableName: "browser_account_member";
+            dataType: "string";
+            columnType: "PgText";
+            data: string;
+            driverParam: string;
+            notNull: true;
+            hasDefault: false;
+            isPrimaryKey: false;
+            isAutoincrement: false;
+            hasRuntimeDefault: false;
+            enumValues: [string, ...string[]];
+            baseColumn: never;
+            identity: undefined;
+            generated: undefined;
+        }, {}, {}>;
+        userEpoch: import("drizzle-orm/pg-core").PgColumn<{
+            name: "user_epoch";
+            tableName: "browser_account_member";
+            dataType: "number";
+            columnType: "PgInteger";
+            data: number;
+            driverParam: string | number;
+            notNull: true;
+            hasDefault: false;
+            isPrimaryKey: false;
+            isAutoincrement: false;
+            hasRuntimeDefault: false;
+            enumValues: undefined;
+            baseColumn: never;
+            identity: undefined;
+            generated: undefined;
+        }, {}, {}>;
+        lastUsedAt: import("drizzle-orm/pg-core").PgColumn<{
+            name: "last_used_at";
+            tableName: "browser_account_member";
+            dataType: "date";
+            columnType: "PgTimestamp";
+            data: Date;
+            driverParam: string;
+            notNull: true;
+            hasDefault: true;
+            isPrimaryKey: false;
+            isAutoincrement: false;
+            hasRuntimeDefault: false;
+            enumValues: undefined;
+            baseColumn: never;
+            identity: undefined;
+            generated: undefined;
+        }, {}, {}>;
+    };
+    dialect: "pg";
+}>;
 export declare const refreshToken: import("drizzle-orm/pg-core").PgTableWithColumns<{
     name: "refresh_token";
     schema: undefined;

package/dist/sdk/db/schema.js

@@ -79,6 +79,25 @@ export const session = pgTable("session", {
     createdAt: timestamp("created_at").notNull().defaultNow(),
     updatedAt: timestamp("updated_at").notNull().defaultNow(),
 }, (table) => [index("session_userId_idx").on(table.userId)]);
+export const browserAccountSet = pgTable("browser_account_set", {
+    initialized: boolean("initialized").notNull().default(false),
+    id: text("id").primaryKey(),
+    activeUserId: text("active_user_id"),
+    updatedAt: timestamp("updated_at").notNull().defaultNow(),
+});
+export const browserAccountMember = pgTable("browser_account_member", {
+    setId: text("set_id")
+        .notNull()
+        .references(() => browserAccountSet.id, { onDelete: "cascade" }),
+    userId: text("user_id")
+        .notNull()
+        .references(() => user.id, { onDelete: "cascade" }),
+    sessionId: text("session_id")
+        .notNull()
+        .references(() => session.id, { onDelete: "cascade" }),
+    userEpoch: integer("user_epoch").notNull(),
+    lastUsedAt: timestamp("last_used_at").notNull().defaultNow(),
+}, (table) => [primaryKey({ columns: [table.setId, table.userId] })]);
 // First-party session persistence: consumer apps store the opaque token in their
 // OWN origin and mint access JWTs via POST /api/session/refresh — no third-party
 // id.flow.industries cookie, so it survives iOS ITP. Rotated on every use.