feat: load style from cloud

examples/vanilla-js/cloud/index.js

@@ -1,5 +1,5 @@
 window.FlowsJS?.init({
-  projectId: "rbnd-test",
+  projectId: "993b3bc3-ebce-4a3e-ba8e-44ca62e3fc9e",
   customApiUrl: "http://localhost:3005",
   userId: "rbnd-test-user",
   flows: [

src/cloud/index.ts

@@ -5,6 +5,7 @@ import { hash } from "../utils";
 import { log } from "../log";
 import { validateFlowsOptions, validateCloudFlowsOptions } from "../validation";
 import { api } from "./api";
+import { loadStyle } from "./style";
 
 export * from "../index";
 
@@ -23,6 +24,8 @@ export const init = async (options: FlowsCloudOptions): Promise<void> => {
 
   const apiUrl = options.customApiUrl ?? "https://api.flows-cloud.com";
 
+  loadStyle({ apiUrl, projectId: options.projectId });
+
   const flows = await api(apiUrl)
     .getFlows({
       projectId: options.projectId,

src/cloud/style.ts

@@ -0,0 +1,9 @@
+export const loadStyle = ({ apiUrl, projectId }: { apiUrl: string; projectId: string }): void => {
+  const styleEl =
+    (document.querySelector("#flows-cloud-styles") as HTMLLinkElement | undefined) ??
+    document.createElement("link");
+  styleEl.id = "flows-cloud-styles";
+  styleEl.rel = "stylesheet";
+  styleEl.href = `${apiUrl}/sdk/css?projectId=${projectId}`;
+  document.head.appendChild(styleEl);
+};