@feelflow/ffid-sdk 0.1.0

package/dist/chunk-YCMQXJOS.cjs

@@ -0,0 +1,872 @@
+'use strict';
+
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/constants.ts
+var DEFAULT_API_BASE_URL = "https://id.feelflow.co.jp";
+
+// src/client/ffid-client.ts
+var NO_CONTENT_STATUS = 204;
+var SESSION_ENDPOINT = "/api/v1/auth/session";
+var LOGOUT_ENDPOINT = "/api/v1/auth/signout";
+var SDK_LOG_PREFIX = "[FFID SDK]";
+var noopLogger = {
+  debug: () => {
+  },
+  info: () => {
+  },
+  warn: () => {
+  },
+  error: (...args) => console.error(SDK_LOG_PREFIX, ...args)
+};
+var consoleLogger = {
+  debug: (...args) => console.debug(SDK_LOG_PREFIX, ...args),
+  info: (...args) => console.info(SDK_LOG_PREFIX, ...args),
+  warn: (...args) => console.warn(SDK_LOG_PREFIX, ...args),
+  error: (...args) => console.error(SDK_LOG_PREFIX, ...args)
+};
+var FFID_ERROR_CODES = {
+  /** Network request failed (fetch threw) */
+  NETWORK_ERROR: "NETWORK_ERROR",
+  /** Server returned non-JSON response (e.g., HTML error page) */
+  PARSE_ERROR: "PARSE_ERROR",
+  /** Server returned error without structured error body */
+  UNKNOWN_ERROR: "UNKNOWN_ERROR"
+};
+function createFFIDClient(config) {
+  if (!config.serviceCode || !config.serviceCode.trim()) {
+    throw new Error("FFID Client: serviceCode \u304C\u672A\u8A2D\u5B9A\u3067\u3059");
+  }
+  const baseUrl = config.apiBaseUrl ?? DEFAULT_API_BASE_URL;
+  const logger = config.logger ?? (config.debug ? consoleLogger : noopLogger);
+  async function fetchWithAuth(endpoint, options = {}) {
+    const url = `${baseUrl}${endpoint}`;
+    logger.debug("Fetching:", url);
+    let response;
+    try {
+      response = await fetch(url, {
+        ...options,
+        credentials: "include",
+        // Include cookies for authentication
+        headers: {
+          "Content-Type": "application/json",
+          ...options.headers
+        }
+      });
+    } catch (error) {
+      logger.error("Network error:", error);
+      return {
+        error: {
+          code: FFID_ERROR_CODES.NETWORK_ERROR,
+          message: error instanceof Error ? error.message : "\u30CD\u30C3\u30C8\u30EF\u30FC\u30AF\u30A8\u30E9\u30FC\u304C\u767A\u751F\u3057\u307E\u3057\u305F"
+        }
+      };
+    }
+    let raw;
+    try {
+      raw = await response.json();
+    } catch (parseError) {
+      logger.error("Parse error:", parseError, "Status:", response.status);
+      return {
+        error: {
+          code: FFID_ERROR_CODES.PARSE_ERROR,
+          message: `\u30B5\u30FC\u30D0\u30FC\u304B\u3089\u4E0D\u6B63\u306A\u30EC\u30B9\u30DD\u30F3\u30B9\u3092\u53D7\u4FE1\u3057\u307E\u3057\u305F (status: ${response.status})`
+        }
+      };
+    }
+    logger.debug("Response:", response.status, raw);
+    if (!response.ok) {
+      return {
+        error: raw.error ?? {
+          code: FFID_ERROR_CODES.UNKNOWN_ERROR,
+          message: "\u4E0D\u660E\u306A\u30A8\u30E9\u30FC\u304C\u767A\u751F\u3057\u307E\u3057\u305F"
+        }
+      };
+    }
+    if (raw.data === void 0) {
+      return {
+        error: {
+          code: FFID_ERROR_CODES.UNKNOWN_ERROR,
+          message: "\u30B5\u30FC\u30D0\u30FC\u304B\u3089\u30C7\u30FC\u30BF\u304C\u8FD4\u3055\u308C\u307E\u305B\u3093\u3067\u3057\u305F"
+        }
+      };
+    }
+    return { data: raw.data };
+  }
+  async function getSession() {
+    return fetchWithAuth(SESSION_ENDPOINT);
+  }
+  async function signOut() {
+    const url = `${baseUrl}${LOGOUT_ENDPOINT}`;
+    logger.debug("Fetching:", url);
+    let response;
+    try {
+      response = await fetch(url, {
+        method: "POST",
+        credentials: "include",
+        headers: { "Content-Type": "application/json" }
+      });
+    } catch (error) {
+      logger.error("Network error:", error);
+      return {
+        error: {
+          code: FFID_ERROR_CODES.NETWORK_ERROR,
+          message: error instanceof Error ? error.message : "\u30CD\u30C3\u30C8\u30EF\u30FC\u30AF\u30A8\u30E9\u30FC\u304C\u767A\u751F\u3057\u307E\u3057\u305F"
+        }
+      };
+    }
+    if (response.status === NO_CONTENT_STATUS) {
+      logger.debug("Response: 204 No Content");
+      return { data: void 0 };
+    }
+    if (!response.ok) {
+      try {
+        const raw = await response.json();
+        return {
+          error: raw.error ?? {
+            code: FFID_ERROR_CODES.UNKNOWN_ERROR,
+            message: "\u4E0D\u660E\u306A\u30A8\u30E9\u30FC\u304C\u767A\u751F\u3057\u307E\u3057\u305F"
+          }
+        };
+      } catch {
+        return {
+          error: {
+            code: FFID_ERROR_CODES.PARSE_ERROR,
+            message: `\u30B5\u30FC\u30D0\u30FC\u304B\u3089\u4E0D\u6B63\u306A\u30EC\u30B9\u30DD\u30F3\u30B9\u3092\u53D7\u4FE1\u3057\u307E\u3057\u305F (status: ${response.status})`
+          }
+        };
+      }
+    }
+    logger.debug("Response:", response.status);
+    return { data: void 0 };
+  }
+  function redirectToLogin() {
+    if (typeof window === "undefined") {
+      logger.debug("Cannot redirect in SSR context");
+      return false;
+    }
+    const currentUrl = window.location.href;
+    const loginUrl = `${baseUrl}/login?redirect=${encodeURIComponent(currentUrl)}&service=${encodeURIComponent(config.serviceCode)}`;
+    logger.debug("Redirecting to login:", loginUrl);
+    window.location.href = loginUrl;
+    return true;
+  }
+  function getLoginUrl(redirectUrl) {
+    const redirect = redirectUrl ?? (typeof window !== "undefined" ? window.location.href : "");
+    return `${baseUrl}/login?redirect=${encodeURIComponent(redirect)}&service=${encodeURIComponent(config.serviceCode)}`;
+  }
+  function createError(code, message) {
+    return { code, message };
+  }
+  return {
+    getSession,
+    signOut,
+    redirectToLogin,
+    getLoginUrl,
+    createError,
+    /** Resolved logger instance */
+    logger,
+    baseUrl,
+    serviceCode: config.serviceCode
+  };
+}
+var DEFAULT_REFRESH_INTERVAL = 5 * 60 * 1e3;
+var FFIDContext = react.createContext(null);
+var FFIDClientContext = react.createContext(null);
+function FFIDProvider({
+  children,
+  serviceCode,
+  apiBaseUrl,
+  debug = false,
+  logger,
+  refreshInterval = DEFAULT_REFRESH_INTERVAL,
+  onAuthStateChange,
+  onError
+}) {
+  const [user, setUser] = react.useState(null);
+  const [organizations, setOrganizations] = react.useState([]);
+  const [subscriptions, setSubscriptions] = react.useState([]);
+  const [currentOrganizationId, setCurrentOrganizationId] = react.useState(null);
+  const [isLoading, setIsLoading] = react.useState(true);
+  const [error, setError] = react.useState(null);
+  const onAuthStateChangeRef = react.useRef(onAuthStateChange);
+  const onErrorRef = react.useRef(onError);
+  react.useEffect(() => {
+    onAuthStateChangeRef.current = onAuthStateChange;
+  }, [onAuthStateChange]);
+  react.useEffect(() => {
+    onErrorRef.current = onError;
+  }, [onError]);
+  const client = react.useMemo(
+    () => createFFIDClient({
+      serviceCode,
+      apiBaseUrl,
+      debug,
+      logger
+    }),
+    [serviceCode, apiBaseUrl, debug, logger]
+  );
+  const refresh = react.useCallback(async () => {
+    client.logger.debug("Refreshing session...");
+    try {
+      const response = await client.getSession();
+      if (response.error) {
+        client.logger.debug("Session error:", response.error);
+        setUser(null);
+        setOrganizations([]);
+        setSubscriptions([]);
+        setError(response.error);
+        onAuthStateChangeRef.current?.(null);
+        if (response.error.code !== "SESSION_NOT_FOUND") {
+          onErrorRef.current?.(response.error);
+        }
+        return;
+      }
+      if (response.data) {
+        const { user: sessionUser, organizations: orgs, subscriptions: subs } = response.data;
+        setUser(sessionUser);
+        setOrganizations(orgs);
+        setSubscriptions(subs);
+        setError(null);
+        setCurrentOrganizationId((prev) => {
+          if (!prev && orgs.length > 0) {
+            return orgs[0].id;
+          }
+          return prev;
+        });
+        onAuthStateChangeRef.current?.(sessionUser);
+        client.logger.debug("Session refreshed:", sessionUser.email);
+      }
+    } catch (err) {
+      client.logger.error("Refresh error:", err);
+      const ffidError = client.createError(
+        "REFRESH_ERROR",
+        err instanceof Error ? err.message : "\u30BB\u30C3\u30B7\u30E7\u30F3\u306E\u66F4\u65B0\u306B\u5931\u6557\u3057\u307E\u3057\u305F"
+      );
+      setError(ffidError);
+      onErrorRef.current?.(ffidError);
+    } finally {
+      setIsLoading(false);
+    }
+  }, [client]);
+  const login = react.useCallback(() => {
+    client.redirectToLogin();
+  }, [client]);
+  const logout = react.useCallback(async () => {
+    client.logger.debug("Signing out...");
+    try {
+      const response = await client.signOut();
+      if (response.error) {
+        client.logger.debug("Logout warning from server:", response.error);
+        const ffidError = client.createError(
+          "LOGOUT_WARNING",
+          `Logged out locally but server returned: ${response.error.message}`
+        );
+        setError(ffidError);
+        onErrorRef.current?.(ffidError);
+      }
+      setUser(null);
+      setOrganizations([]);
+      setSubscriptions([]);
+      setCurrentOrganizationId(null);
+      onAuthStateChangeRef.current?.(null);
+      client.logger.debug("Signed out successfully");
+    } catch (err) {
+      client.logger.error("Logout error:", err);
+      const ffidError = client.createError(
+        "LOGOUT_ERROR",
+        err instanceof Error ? err.message : "\u30B5\u30A4\u30F3\u30A2\u30A6\u30C8\u306B\u5931\u6557\u3057\u307E\u3057\u305F"
+      );
+      setError(ffidError);
+      onErrorRef.current?.(ffidError);
+      setUser(null);
+      setOrganizations([]);
+      setSubscriptions([]);
+      setCurrentOrganizationId(null);
+      onAuthStateChangeRef.current?.(null);
+    }
+  }, [client]);
+  const switchOrganization = react.useCallback(
+    (organizationId) => {
+      const org = organizations.find((o) => o.id === organizationId);
+      if (org) {
+        setCurrentOrganizationId(organizationId);
+        setError(null);
+        client.logger.debug("Switched organization:", org.name);
+      } else {
+        client.logger.debug("Organization not found:", organizationId);
+        const ffidError = client.createError(
+          "ORGANIZATION_NOT_FOUND",
+          `Organization with ID "${organizationId}" not found`
+        );
+        setError(ffidError);
+        onErrorRef.current?.(ffidError);
+      }
+    },
+    [organizations, client]
+  );
+  react.useEffect(() => {
+    refresh();
+  }, [refresh]);
+  react.useEffect(() => {
+    if (!user || refreshInterval <= 0) return;
+    const intervalId = setInterval(() => {
+      refresh();
+    }, refreshInterval);
+    return () => clearInterval(intervalId);
+  }, [user, refreshInterval, refresh]);
+  const currentOrganization = react.useMemo(
+    () => organizations.find((o) => o.id === currentOrganizationId) ?? null,
+    [organizations, currentOrganizationId]
+  );
+  const contextValue = react.useMemo(
+    () => ({
+      user,
+      organizations,
+      currentOrganization,
+      subscriptions,
+      isLoading,
+      isAuthenticated: user !== null,
+      error,
+      login,
+      logout,
+      switchOrganization,
+      refresh
+    }),
+    [
+      user,
+      organizations,
+      currentOrganization,
+      subscriptions,
+      isLoading,
+      error,
+      login,
+      logout,
+      switchOrganization,
+      refresh
+    ]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(FFIDClientContext.Provider, { value: client, children: /* @__PURE__ */ jsxRuntime.jsx(FFIDContext.Provider, { value: contextValue, children }) });
+}
+function useFFIDContext() {
+  const context = react.useContext(FFIDContext);
+  if (!context) {
+    throw new Error("useFFIDContext must be used within FFIDProvider");
+  }
+  return context;
+}
+function useFFIDClient() {
+  const client = react.useContext(FFIDClientContext);
+  if (!client) {
+    throw new Error("useFFIDClient must be used within FFIDProvider");
+  }
+  return client;
+}
+
+// src/hooks/useFFID.ts
+function useFFID() {
+  const context = useFFIDContext();
+  return {
+    user: context.user,
+    organizations: context.organizations,
+    currentOrganization: context.currentOrganization,
+    isLoading: context.isLoading,
+    isAuthenticated: context.isAuthenticated,
+    error: context.error,
+    login: context.login,
+    logout: context.logout,
+    switchOrganization: context.switchOrganization,
+    refresh: context.refresh
+  };
+}
+function FFIDLoginButton({
+  children,
+  className = "",
+  showLoading = true,
+  disabled,
+  ...props
+}) {
+  const { login, isLoading, isAuthenticated } = useFFID();
+  if (isAuthenticated) {
+    return null;
+  }
+  const handleClick = () => {
+    login();
+  };
+  const isDisabled = disabled || showLoading && isLoading;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      type: "button",
+      onClick: handleClick,
+      disabled: isDisabled,
+      className,
+      ...props,
+      children: showLoading && isLoading ? "\u8AAD\u307F\u8FBC\u307F\u4E2D..." : children ?? "\u30ED\u30B0\u30A4\u30F3"
+    }
+  );
+}
+
+// src/components/styles.ts
+var FONT_SIZE_SM = 14;
+var FONT_SIZE_XS = 12;
+var SPACING_XS = 4;
+var SPACING_SM = 8;
+var SPACING_MD = 12;
+var SPACING_LG = 16;
+var SIZE_ICON_SM = 16;
+var SIZE_AVATAR_MD = 32;
+var BORDER_RADIUS_SM = 6;
+var BORDER_RADIUS_MD = 8;
+var BORDER_RADIUS_PILL = 9999;
+var DROPDOWN_MIN_WIDTH = 200;
+var DROPDOWN_MAX_HEIGHT = 300;
+var Z_INDEX_BACKDROP = 40;
+var Z_INDEX_DROPDOWN = 50;
+var COLOR_TEXT_MUTED = "#6b7280";
+var COLOR_BORDER = "#e5e7eb";
+var COLOR_BG_SELECTED = "#f3f4f6";
+var COLOR_BG_SKELETON = "#e5e7eb";
+var COLOR_PRIMARY = "#6366f1";
+var COLOR_DANGER = "#dc2626";
+var COLOR_BG_WHITE = "white";
+var SHADOW_DROPDOWN = "0 4px 6px -1px rgba(0,0,0,0.1)";
+var BORDER_DEFAULT = `1px solid ${COLOR_BORDER}`;
+function isValidAvatarUrl(url) {
+  try {
+    const parsed = new URL(url);
+    return parsed.protocol === "https:" || parsed.protocol === "http:" && parsed.hostname === "localhost";
+  } catch {
+    return false;
+  }
+}
+function FFIDUserMenu({
+  className = "",
+  classNames = {},
+  renderAvatar,
+  menuItems = [],
+  showOrganization = true,
+  logoutText = "\u30ED\u30B0\u30A2\u30A6\u30C8"
+}) {
+  const { user, currentOrganization, logout, isLoading, isAuthenticated } = useFFID();
+  const [isOpen, setIsOpen] = react.useState(false);
+  if (!isAuthenticated || !user) {
+    return null;
+  }
+  if (isLoading) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: [className, classNames.container].filter(Boolean).join(" ") || void 0, children: /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: classNames.avatar,
+        style: { width: SIZE_AVATAR_MD, height: SIZE_AVATAR_MD, borderRadius: "50%", background: COLOR_BG_SKELETON }
+      }
+    ) });
+  }
+  const displayName = user.displayName ?? user.email;
+  const handleLogout = async () => {
+    setIsOpen(false);
+    await logout();
+  };
+  const defaultAvatar = /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: classNames.avatar,
+      style: {
+        width: SIZE_AVATAR_MD,
+        height: SIZE_AVATAR_MD,
+        borderRadius: "50%",
+        background: COLOR_PRIMARY,
+        color: COLOR_BG_WHITE,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        fontSize: FONT_SIZE_SM,
+        fontWeight: 500
+      },
+      children: displayName.charAt(0).toUpperCase()
+    }
+  );
+  const avatarElement = renderAvatar ? renderAvatar({ avatarUrl: user.avatarUrl, displayName: user.displayName, email: user.email }) : user.avatarUrl && isValidAvatarUrl(user.avatarUrl) ? /* @__PURE__ */ jsxRuntime.jsx("img", { className: classNames.avatar, src: user.avatarUrl, alt: displayName, style: { width: SIZE_AVATAR_MD, height: SIZE_AVATAR_MD, borderRadius: "50%" } }) : defaultAvatar;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: [className, classNames.container].filter(Boolean).join(" ") || void 0, style: { position: "relative" }, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "button",
+        className: classNames.button,
+        onClick: () => setIsOpen(!isOpen),
+        style: { background: "none", border: "none", cursor: "pointer", padding: 0 },
+        "aria-label": "\u30E6\u30FC\u30B6\u30FC\u30E1\u30CB\u30E5\u30FC",
+        "aria-expanded": isOpen,
+        children: avatarElement
+      }
+    ),
+    isOpen && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          style: {
+            position: "fixed",
+            inset: 0,
+            zIndex: Z_INDEX_BACKDROP
+          },
+          onClick: () => setIsOpen(false)
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          className: classNames.menu,
+          style: {
+            position: "absolute",
+            right: 0,
+            top: "100%",
+            marginTop: SPACING_SM,
+            minWidth: DROPDOWN_MIN_WIDTH,
+            background: COLOR_BG_WHITE,
+            border: BORDER_DEFAULT,
+            borderRadius: BORDER_RADIUS_MD,
+            boxShadow: SHADOW_DROPDOWN,
+            zIndex: Z_INDEX_DROPDOWN
+          },
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classNames.userInfo, style: { padding: `${SPACING_MD}px ${SPACING_LG}px`, borderBottom: BORDER_DEFAULT }, children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontWeight: 500, fontSize: FONT_SIZE_SM }, children: displayName }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { style: { color: COLOR_TEXT_MUTED, fontSize: FONT_SIZE_XS }, children: user.email }),
+              showOrganization && currentOrganization && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { color: COLOR_TEXT_MUTED, fontSize: FONT_SIZE_XS, marginTop: SPACING_XS }, children: currentOrganization.name })
+            ] }),
+            menuItems.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { borderBottom: BORDER_DEFAULT }, children: menuItems.map((item) => /* @__PURE__ */ jsxRuntime.jsxs(
+              "button",
+              {
+                type: "button",
+                className: classNames.menuItem,
+                onClick: () => {
+                  setIsOpen(false);
+                  item.onClick();
+                },
+                style: {
+                  width: "100%",
+                  padding: `${SPACING_SM}px ${SPACING_LG}px`,
+                  background: "none",
+                  border: "none",
+                  textAlign: "left",
+                  cursor: "pointer",
+                  fontSize: FONT_SIZE_SM,
+                  display: "flex",
+                  alignItems: "center",
+                  gap: SPACING_SM
+                },
+                children: [
+                  item.icon,
+                  item.label
+                ]
+              },
+              item.label
+            )) }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                className: classNames.logout,
+                onClick: handleLogout,
+                style: {
+                  width: "100%",
+                  padding: `${SPACING_SM}px ${SPACING_LG}px`,
+                  background: "none",
+                  border: "none",
+                  textAlign: "left",
+                  cursor: "pointer",
+                  fontSize: FONT_SIZE_SM,
+                  color: COLOR_DANGER
+                },
+                children: logoutText
+              }
+            ) })
+          ]
+        }
+      )
+    ] })
+  ] });
+}
+function FFIDOrganizationSwitcher({
+  className = "",
+  classNames = {},
+  renderOrganization,
+  label = "\u7D44\u7E54",
+  emptyText = "\u7D44\u7E54\u304C\u3042\u308A\u307E\u305B\u3093",
+  onSwitch
+}) {
+  const { organizations, currentOrganization, switchOrganization, isAuthenticated } = useFFID();
+  const [isOpen, setIsOpen] = react.useState(false);
+  if (!isAuthenticated) {
+    return null;
+  }
+  if (organizations.length === 0) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: [className, classNames.container].filter(Boolean).join(" ") || void 0, style: { color: COLOR_TEXT_MUTED, fontSize: FONT_SIZE_SM }, children: emptyText });
+  }
+  const handleSelect = (orgId) => {
+    switchOrganization(orgId);
+    onSwitch?.(orgId);
+    setIsOpen(false);
+  };
+  if (organizations.length === 1) {
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: [className, classNames.container].filter(Boolean).join(" ") || void 0, style: { fontSize: FONT_SIZE_SM }, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { color: COLOR_TEXT_MUTED, marginRight: SPACING_XS }, children: [
+        label,
+        ":"
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontWeight: 500 }, children: currentOrganization?.name ?? organizations[0]?.name })
+    ] });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: [className, classNames.container].filter(Boolean).join(" ") || void 0, style: { position: "relative" }, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        type: "button",
+        className: classNames.button,
+        onClick: () => setIsOpen(!isOpen),
+        style: {
+          display: "flex",
+          alignItems: "center",
+          gap: SPACING_SM,
+          padding: `${SPACING_SM}px ${SPACING_MD}px`,
+          background: COLOR_BG_WHITE,
+          border: BORDER_DEFAULT,
+          borderRadius: BORDER_RADIUS_SM,
+          cursor: "pointer",
+          fontSize: FONT_SIZE_SM
+        },
+        "aria-expanded": isOpen,
+        "aria-haspopup": "listbox",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontWeight: 500 }, children: currentOrganization?.name ?? label }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "svg",
+            {
+              width: SIZE_ICON_SM,
+              height: SIZE_ICON_SM,
+              viewBox: "0 0 16 16",
+              fill: "none",
+              style: { transform: isOpen ? "rotate(180deg)" : "none" },
+              children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M4 6L8 10L12 6", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" })
+            }
+          )
+        ]
+      }
+    ),
+    isOpen && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          style: { position: "fixed", inset: 0, zIndex: Z_INDEX_BACKDROP },
+          onClick: () => setIsOpen(false)
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          role: "listbox",
+          className: classNames.dropdown,
+          style: {
+            position: "absolute",
+            left: 0,
+            top: "100%",
+            marginTop: SPACING_XS,
+            minWidth: DROPDOWN_MIN_WIDTH,
+            background: COLOR_BG_WHITE,
+            border: BORDER_DEFAULT,
+            borderRadius: BORDER_RADIUS_MD,
+            boxShadow: SHADOW_DROPDOWN,
+            zIndex: Z_INDEX_DROPDOWN,
+            maxHeight: DROPDOWN_MAX_HEIGHT,
+            overflow: "auto"
+          },
+          children: organizations.map((org) => {
+            const isCurrent = org.id === currentOrganization?.id;
+            const optionClassName = isCurrent ? [classNames.option, classNames.optionSelected].filter(Boolean).join(" ") || void 0 : classNames.option;
+            if (renderOrganization) {
+              return /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  type: "button",
+                  role: "option",
+                  "aria-selected": isCurrent,
+                  className: optionClassName,
+                  onClick: () => handleSelect(org.id),
+                  style: {
+                    all: "unset",
+                    display: "block",
+                    width: "100%",
+                    cursor: "pointer",
+                    boxSizing: "border-box"
+                  },
+                  children: renderOrganization(org, isCurrent)
+                },
+                org.id
+              );
+            }
+            return /* @__PURE__ */ jsxRuntime.jsxs(
+              "button",
+              {
+                type: "button",
+                role: "option",
+                "aria-selected": isCurrent,
+                className: optionClassName,
+                onClick: () => handleSelect(org.id),
+                style: {
+                  width: "100%",
+                  padding: `10px ${SPACING_LG}px`,
+                  background: isCurrent ? COLOR_BG_SELECTED : COLOR_BG_WHITE,
+                  border: "none",
+                  textAlign: "left",
+                  cursor: "pointer",
+                  fontSize: FONT_SIZE_SM,
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "space-between"
+                },
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontWeight: 500 }, children: org.name }),
+                    /* @__PURE__ */ jsxRuntime.jsx("div", { style: { color: COLOR_TEXT_MUTED, fontSize: FONT_SIZE_XS }, children: org.role === "owner" ? "\u30AA\u30FC\u30CA\u30FC" : org.role === "admin" ? "\u7BA1\u7406\u8005" : "\u30E1\u30F3\u30D0\u30FC" })
+                  ] }),
+                  isCurrent && /* @__PURE__ */ jsxRuntime.jsx("svg", { width: SIZE_ICON_SM, height: SIZE_ICON_SM, viewBox: "0 0 16 16", fill: COLOR_PRIMARY, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z" }) })
+                ]
+              },
+              org.id
+            );
+          })
+        }
+      )
+    ] })
+  ] });
+}
+function useSubscription() {
+  const context = useFFIDContext();
+  const client = useFFIDClient();
+  const subscription = react.useMemo(() => {
+    const subs = context.subscriptions.filter(
+      (sub) => sub.serviceCode === client.serviceCode
+    );
+    const activeSub = subs.find((s) => s.status === "active");
+    if (activeSub) return activeSub;
+    const trialingSub = subs.find((s) => s.status === "trialing");
+    if (trialingSub) return trialingSub;
+    return subs[0] ?? null;
+  }, [context.subscriptions, client.serviceCode]);
+  const planCode = subscription?.planCode ?? null;
+  const isActive = subscription?.status === "active";
+  const isTrialing = subscription?.status === "trialing";
+  const isCanceled = subscription?.status === "canceled";
+  const hasPlan = react.useCallback(
+    (plans) => {
+      if (!planCode) return false;
+      const planList = Array.isArray(plans) ? plans : [plans];
+      return planList.includes(planCode);
+    },
+    [planCode]
+  );
+  const hasAccess = react.useCallback(() => {
+    return isActive || isTrialing;
+  }, [isActive, isTrialing]);
+  return {
+    subscription,
+    planCode,
+    isActive,
+    isTrialing,
+    isCanceled,
+    hasPlan,
+    hasAccess
+  };
+}
+function withSubscription(Component, options = {}) {
+  const WrappedComponent = (props) => {
+    const { hasAccess, hasPlan } = useSubscription();
+    const { isLoading } = useFFIDContext();
+    if (isLoading) {
+      return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: options.loading ?? null });
+    }
+    if (!hasAccess()) {
+      return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: options.fallback ?? null });
+    }
+    if (options.plans && options.plans.length > 0 && !hasPlan(options.plans)) {
+      return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: options.fallback ?? null });
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(Component, { ...props });
+  };
+  WrappedComponent.displayName = `withSubscription(${Component.displayName ?? Component.name ?? "Component"})`;
+  return WrappedComponent;
+}
+var BADGE_PADDING_X = 10;
+var STATUS_COLORS = {
+  active: { bg: "#dcfce7", text: "#166534" },
+  trialing: { bg: "#dbeafe", text: "#1e40af" },
+  past_due: { bg: "#fef3c7", text: "#92400e" },
+  canceled: { bg: "#fee2e2", text: "#991b1b" },
+  paused: { bg: "#f3f4f6", text: "#4b5563" },
+  none: { bg: "#f3f4f6", text: "#6b7280" }
+};
+var DEFAULT_LABELS = {
+  active: "\u5951\u7D04\u4E2D",
+  trialing: "\u30C8\u30E9\u30A4\u30A2\u30EB",
+  pastDue: "\u652F\u6255\u3044\u9045\u5EF6",
+  canceled: "\u89E3\u7D04\u6E08\u307F",
+  paused: "\u4E00\u6642\u505C\u6B62",
+  none: "\u672A\u5951\u7D04"
+};
+function FFIDSubscriptionBadge({
+  className = "",
+  classNames = {},
+  style,
+  showPlanName = false,
+  labels = {},
+  render
+}) {
+  const { subscription } = useSubscription();
+  const status = subscription?.status ?? "none";
+  const planName = subscription?.planName ?? null;
+  if (render) {
+    return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: render(status, planName) });
+  }
+  const mergedLabels = { ...DEFAULT_LABELS, ...labels };
+  const statusToLabelKey = {
+    active: "active",
+    trialing: "trialing",
+    past_due: "pastDue",
+    canceled: "canceled",
+    paused: "paused"
+  };
+  const labelKey = statusToLabelKey[status] ?? "none";
+  const label = mergedLabels[labelKey];
+  const colors = STATUS_COLORS[status] ?? STATUS_COLORS.none;
+  const displayText = showPlanName && planName ? `${planName} (${label})` : label;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      className: [className, classNames.badge].filter(Boolean).join(" ") || void 0,
+      style: {
+        display: "inline-flex",
+        alignItems: "center",
+        padding: `${SPACING_XS}px ${BADGE_PADDING_X}px`,
+        borderRadius: BORDER_RADIUS_PILL,
+        fontSize: FONT_SIZE_XS,
+        fontWeight: 500,
+        backgroundColor: colors.bg,
+        color: colors.text,
+        ...style
+      },
+      children: displayText
+    }
+  );
+}
+
+exports.DEFAULT_API_BASE_URL = DEFAULT_API_BASE_URL;
+exports.FFIDLoginButton = FFIDLoginButton;
+exports.FFIDOrganizationSwitcher = FFIDOrganizationSwitcher;
+exports.FFIDProvider = FFIDProvider;
+exports.FFIDSubscriptionBadge = FFIDSubscriptionBadge;
+exports.FFIDUserMenu = FFIDUserMenu;
+exports.useFFID = useFFID;
+exports.useFFIDContext = useFFIDContext;
+exports.useSubscription = useSubscription;
+exports.withSubscription = withSubscription;