@flow-industries/id 0.17.0 → 0.18.0

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

@@ -34,12 +34,13 @@ export function createFlowWidget(options) {
         return {
             frame: null,
             post() { },
+            setTheme() { },
             destroy() { },
         };
     const flow = options.flow ?? getFlow() ?? requireFlow();
     const host = resolveIdHost(options.host ?? flow.host);
     const hostOrigin = new URL(host).origin;
-    const theme = options.theme ?? "light dark";
+    let theme = options.theme ?? "light dark";
     const route = WIDGET_ROUTE[options.widget];
     const frame = makeIframe(`${host}${route}`);
     frame.style.background = "transparent";
@@ -70,6 +71,15 @@ export function createFlowWidget(options) {
         post(message) {
             frame.contentWindow?.postMessage(message, hostOrigin);
         },
+        setTheme(next) {
+            if (next === theme)
+                return;
+            theme = next;
+            void bridge.send("__internal", {
+                type: "set-theme",
+                theme: { colorScheme: next },
+            });
+        },
         destroy() {
             bridge.destroy();
             frame.remove();

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

@@ -29,11 +29,13 @@ const OVERLAY_STYLE = {
  */
 export function createProfileButton(options) {
     if (typeof document === "undefined")
-        return { destroy() { } };
+        return { setTheme() { }, destroy() { } };
     const flow = options.flow ?? getFlow() ?? requireFlow();
     const host = resolveIdHost(options.host ?? flow.host);
     const hostOrigin = new URL(host).origin;
-    const theme = options.theme ?? "light dark";
+    // 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) {
@@ -183,6 +185,19 @@ export function createProfileButton(options) {
     pushIdentity();
     const unsubscribe = flow.subscribe(pushIdentity);
     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 },
+            });
+        },
         destroy() {
             unsubscribe();
             pillBridge.destroy();

package/dist/sdk/react/flow-widget.d.ts

@@ -8,5 +8,9 @@ import type { FlowWidgetProps } from "../types";
  * Prefer this over embedding the widget's URL in your own `<iframe>`: only a
  * frame mounted this way completes the handshake that lets it authenticate as
  * the signed-in user from a cross-site page (AUTH-171).
+ *
+ * A changing `theme` recolors the mounted widget over its open bridge rather
+ * than remounting it — see `<ProfileButton>` for why the frame must survive a
+ * light/dark toggle.
  */
 export declare function FlowWidget({ widget, className, host, theme, }: FlowWidgetProps): import("react/jsx-runtime").JSX.Element;

package/dist/sdk/react/flow-widget.js

@@ -11,10 +11,16 @@ import { useFlow } from "./hooks";
  * Prefer this over embedding the widget's URL in your own `<iframe>`: only a
  * frame mounted this way completes the handshake that lets it authenticate as
  * the signed-in user from a cross-site page (AUTH-171).
+ *
+ * A changing `theme` recolors the mounted widget over its open bridge rather
+ * than remounting it — see `<ProfileButton>` for why the frame must survive a
+ * light/dark toggle.
  */
 export function FlowWidget({ widget, className, host, theme, }) {
     const flow = useFlow();
     const ref = useRef(null);
+    const handleRef = useRef(null);
+    const themeRef = useRef(theme);
     useEffect(() => {
         const container = ref.current;
         if (!container)
@@ -24,14 +30,23 @@ export function FlowWidget({ widget, className, host, theme, }) {
             container,
             flow,
             ...(host ? { host } : {}),
-            ...(theme ? { theme } : {}),
+            ...(themeRef.current ? { theme: themeRef.current } : {}),
         });
+        handleRef.current = handle;
         if (handle.frame) {
             handle.frame.style.width = "100%";
             handle.frame.style.height = "100%";
             handle.frame.style.display = "block";
         }
-        return () => handle.destroy();
-    }, [widget, flow, host, theme]);
+        return () => {
+            handleRef.current = null;
+            handle.destroy();
+        };
+    }, [widget, flow, host]);
+    useEffect(() => {
+        themeRef.current = theme;
+        if (theme)
+            handleRef.current?.setTheme(theme);
+    }, [theme]);
     return _jsx("div", { ref: ref, className: className });
 }

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

@@ -5,5 +5,10 @@ import type { ProfileButtonProps } from "../types";
  * the pill iframe mounts into; the iframe itself is sized to its content and
  * expands to the profile dialog on click. Resolves the Flow instance from a
  * `<FlowIdProvider>` or the createFlow() singleton.
+ *
+ * A changing `theme` recolors the mounted pill over its open bridge rather than
+ * remounting it: `theme` is deliberately absent from the mount effect's deps,
+ * because tearing the iframe down on a light/dark toggle reloads the widget and
+ * drops the pill out of the host's layout mid-toggle.
  */
 export declare function ProfileButton({ className, host, theme }: ProfileButtonProps): import("react/jsx-runtime").JSX.Element;

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

@@ -8,10 +8,17 @@ import { useFlow } from "./hooks";
  * the pill iframe mounts into; the iframe itself is sized to its content and
  * expands to the profile dialog on click. Resolves the Flow instance from a
  * `<FlowIdProvider>` or the createFlow() singleton.
+ *
+ * A changing `theme` recolors the mounted pill over its open bridge rather than
+ * remounting it: `theme` is deliberately absent from the mount effect's deps,
+ * because tearing the iframe down on a light/dark toggle reloads the widget and
+ * drops the pill out of the host's layout mid-toggle.
  */
 export function ProfileButton({ className, host, theme }) {
     const flow = useFlow();
     const ref = useRef(null);
+    const handleRef = useRef(null);
+    const themeRef = useRef(theme);
     useEffect(() => {
         const container = ref.current;
         if (!container)
@@ -20,9 +27,18 @@ export function ProfileButton({ className, host, theme }) {
             container,
             flow,
             ...(host ? { host } : {}),
-            ...(theme ? { theme } : {}),
+            ...(themeRef.current ? { theme: themeRef.current } : {}),
         });
-        return () => handle.destroy();
-    }, [flow, host, theme]);
+        handleRef.current = handle;
+        return () => {
+            handleRef.current = null;
+            handle.destroy();
+        };
+    }, [flow, host]);
+    useEffect(() => {
+        themeRef.current = theme;
+        if (theme)
+            handleRef.current?.setTheme(theme);
+    }, [theme]);
     return _jsx("div", { ref: ref, className: className });
 }

package/dist/sdk/types/index.d.ts

@@ -6,7 +6,7 @@ export type { Call, ConnectCapabilities, ConnectRequest, ConnectResponse, GuestR
 export { getConnectCapabilities, isPersonalSignParams, isSendCallsParams, isSendTransactionParams, } from "./protocol";
 export type { CreateRoomEventInput, RoomEventAttendance, RoomEventFrequency, RoomEventInstance, RoomEventInterest, RoomEventInterestState, RoomEventList, RoomEventOccurrence, RoomEventRecurrence, RoomEventRoomRef, RoomEventSeries, RoomEventStatus, SetInterestInput, UpdateRoomEventInput, } from "./room-events";
 export type { CreateRoomInput, GlobalRole, ModerationSubject, MyRooms, RoleChangeVerdict, RoomChannel, RoomDetail, RoomList, RoomMemberEntry, RoomMembers, RoomOccupancy, RoomOwner, RoomPresenceEntry, RoomPresenceSnapshot, RoomRestrictionKind, RoomRole, RoomSummary, RoomSurfaceSettings, RoomsApi, RoomVisibility, StaffEntry, UpdateRoomInput, VerifyRoomContext, Viewer, } from "./rooms";
-export type { AccessKeyOptions, AccessKeyPreparation, Address, CreateDialogHostOptions, CreateFlowOptions, DialogHost, DialogOpenOptions, FinalizeAccessKeyParams, Flow, FlowConnectorParameters, FlowCookieNames, FlowIdProviderProps, FlowSessionState, FlowState, FlowWidgetHandle, FlowWidgetName, FlowWidgetProps, Listener, LoginOptions, MountFlowWidgetOptions, MountProfileOptions, PrepareArgsWithAuth, PrepareTransactionRequestPhase, ProfileButtonHandle, ProfileButtonProps, ProfilePosition, ResolveAccountParams, ResolvedAccessKeyOptions, RootCredential, RunLoginParams, RunLoginResult, SendCallsArgs, SendTransactionArgs, Session, SigningContext, SignMessageArgs, SignTypedDataArgs, Store, StoredAccessKey, WagmiConnectCapabilities, WagmiConnectParams, } from "./sdk";
+export type { AccessKeyOptions, AccessKeyPreparation, Address, ColorScheme, CreateDialogHostOptions, CreateFlowOptions, DialogHost, DialogOpenOptions, FinalizeAccessKeyParams, Flow, FlowConnectorParameters, FlowCookieNames, FlowIdProviderProps, FlowSessionState, FlowState, FlowWidgetHandle, FlowWidgetName, FlowWidgetProps, Listener, LoginOptions, MountFlowWidgetOptions, MountProfileOptions, PrepareArgsWithAuth, PrepareTransactionRequestPhase, ProfileButtonHandle, ProfileButtonProps, ProfilePosition, ResolveAccountParams, ResolvedAccessKeyOptions, RootCredential, RunLoginParams, RunLoginResult, SendCallsArgs, SendTransactionArgs, Session, SigningContext, SignMessageArgs, SignTypedDataArgs, Store, StoredAccessKey, WagmiConnectCapabilities, WagmiConnectParams, } from "./sdk";
 export type { ResolvedFlowSession, ResolveSessionOptions, SessionRouteOptions, SessionRouteResponse, SessionRouteSession, } from "./server";
 export type { CoinAsset, IdentifiedTx, TxApprove, TxConvert, TxSend, TxSwap, } from "./tx";
 export type { ActionDayContext, ActionEventKind, ActionSessionState, ActiveActionResponse, LevelProgress, PublicProfile, XpGrantResult, XpRecentGrant, XpSummary, } from "./xp";

package/dist/sdk/types/sdk.d.ts

@@ -187,6 +187,11 @@ export type DialogOpenOptions = {
         icon?: string;
     };
 };
+/**
+ * Color scheme for Flow ID iframe chrome. "light dark" follows the OS, which
+ * is the default; a host with its own theme toggle passes the resolved value.
+ */
+export type ColorScheme = "light" | "dark" | "light dark";
 /** Anchor for an auto-created (host-less) profile widget container. */
 export type ProfilePosition = "top-right" | "top-left" | "bottom-right" | "bottom-left";
 export type MountProfileOptions = {
@@ -209,11 +214,17 @@ export type MountProfileOptions = {
      * Color scheme for the widget chrome. Set this to match the host (the dark
      * game UI passes "dark"). Defaults to "light dark" (follows the OS).
      */
-    theme?: "light" | "dark" | "light dark";
+    theme?: ColorScheme;
     /** Explicit Flow instance. Defaults to the createFlow() singleton. */
     flow?: Flow;
 };
 export type ProfileButtonHandle = {
+    /**
+     * Recolors the mounted pill (and its profile dialog) in place. A host with a
+     * theme toggle calls this instead of remounting: rebuilding the iframe would
+     * reload the widget and flash the pill out of the layout on every toggle.
+     */
+    setTheme: (theme: ColorScheme) => void;
     /** Tears down the iframe, listeners, and any auto-created container. */
     destroy: () => void;
 };
@@ -237,7 +248,7 @@ export type MountFlowWidgetOptions = {
      * Color scheme for the widget chrome. Set this to match the host (the dark
      * game UI passes "dark"). Defaults to "light dark" (follows the OS).
      */
-    theme?: "light" | "dark" | "light dark";
+    theme?: ColorScheme;
     /** Explicit Flow instance. Defaults to the createFlow() singleton. */
     flow?: Flow;
 };
@@ -252,6 +263,11 @@ export type FlowWidgetHandle = {
      * the Flow ID origin.
      */
     post: (message: unknown) => void;
+    /**
+     * Recolors the mounted widget in place, for the same reason the pill exposes
+     * it: a remount reloads the frame and flashes it out of the host's layout.
+     */
+    setTheme: (theme: ColorScheme) => void;
     /** Tears down the iframe and its bridge. */
     destroy: () => void;
 };
@@ -263,7 +279,7 @@ export type FlowWidgetProps = {
     /** Override the Flow ID origin; defaults to the resolved Flow's `host`. */
     host?: string;
     /** Color scheme for the widget chrome; defaults to "light dark" (the OS). */
-    theme?: "light" | "dark" | "light dark";
+    theme?: ColorScheme;
 };
 export type DialogHost = {
     open: (options?: DialogOpenOptions) => void;
@@ -364,7 +380,7 @@ export type ProfileButtonProps = {
     /** Override the Flow ID origin; defaults to the resolved Flow's `host`. */
     host?: string;
     /** Color scheme for the widget chrome; defaults to "light dark" (the OS). */
-    theme?: "light" | "dark" | "light dark";
+    theme?: ColorScheme;
 };
 export type RunLoginParams = {
     dialog: DialogHost;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flow-industries/id",
-  "version": "0.17.0",
+  "version": "0.18.0",
   "main": "./dist/sdk/client/index.js",
   "module": "./dist/sdk/client/index.js",
   "types": "./dist/sdk/client/index.d.ts",