@comergehq/studio 0.1.3 → 0.1.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@comergehq/studio",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "description": "Comerge studio",
   "main": "src/index.ts",
   "module": "dist/index.mjs",

package/src/core/services/http/public.ts

@@ -2,6 +2,9 @@ import axios from "axios";
 
 import { BASE_URL } from "./baseUrl";
 
+const CLIENT_KEY_HEADER = "x-comerge-api-key";
+let clientApiKey: string | null = null;
+
 export const publicApi = axios.create({
 	baseURL: BASE_URL,
 	timeout: 30_000,
@@ -11,4 +14,20 @@ export const publicApi = axios.create({
 	},
 });
 
+export function setClientApiKey(apiKey: string) {
+	const trimmed = apiKey?.trim?.() ?? "";
+	if (!trimmed) {
+		throw new Error("comerge-studio: apiKey is required");
+	}
+	clientApiKey = trimmed;
+	publicApi.defaults.headers.common[CLIENT_KEY_HEADER] = trimmed;
+}
+
+publicApi.interceptors.request.use((config) => {
+	if (!clientApiKey) return config;
+	config.headers = config.headers ?? {};
+	(config.headers as any)[CLIENT_KEY_HEADER] = clientApiKey;
+	return config;
+});
+
 

package/src/studio/ComergeStudio.tsx

@@ -15,23 +15,16 @@ import { RuntimeRenderer } from './ui/RuntimeRenderer';
 import { StudioOverlay } from './ui/StudioOverlay';
 
 export type ComergeStudioProps = {
-  /**
-   * App to open in the runtime and studio.
-   */
   appId: string;
-  /**
-   * App root key exposed by the bundle (defaults to MicroMain).
-   */
+  apiKey: string;
   appKey?: string;
-  /**
-   * Optional callback for a “home” button.
-   */
   onNavigateHome?: () => void;
   style?: ViewStyle;
 };
 
 export function ComergeStudio({
   appId,
+  apiKey,
   appKey = 'MicroMain',
   onNavigateHome,
   style,
@@ -50,7 +43,7 @@ export function ComergeStudio({
   const captureTargetRef = React.useRef<View | null>(null);
 
   return (
-    <StudioBootstrap>
+    <StudioBootstrap apiKey={apiKey}>
       {({ userId }) => (
         <BottomSheetModalProvider>
           <ComergeStudioInner

package/src/studio/bootstrap/StudioBootstrap.tsx

@@ -16,8 +16,8 @@ export type StudioBootstrapProps = UseStudioBootstrapOptions & {
   renderError?: (error: Error) => React.ReactNode;
 };
 
-export function StudioBootstrap({ children, fallback, renderError }: StudioBootstrapProps) {
-  const { ready, error, userId } = useStudioBootstrap({});
+export function StudioBootstrap({ children, fallback, renderError, apiKey }: StudioBootstrapProps) {
+  const { ready, error, userId } = useStudioBootstrap({ apiKey });
 
   if (error) {
     return (

package/src/studio/bootstrap/useStudioBootstrap.ts

@@ -1,10 +1,13 @@
 import * as React from 'react';
 
+import { setClientApiKey } from '../../core/services/http/public';
 import { ensureAuthenticatedSession, ensureAnonymousSession } from '../../core/services/supabase/auth';
 import { isSupabaseClientInjected, setSupabaseConfig } from '../../core/services/supabase/client';
 import { studioConfigRepository } from '../../data/public/studio-config/repository';
 
-export type UseStudioBootstrapOptions = {};
+export type UseStudioBootstrapOptions = {
+  apiKey: string;
+};
 
 export type StudioBootstrapState = {
   ready: boolean;
@@ -12,7 +15,7 @@ export type StudioBootstrapState = {
   error: Error | null;
 };
 
-export function useStudioBootstrap(options?: UseStudioBootstrapOptions): StudioBootstrapState {
+export function useStudioBootstrap(options: UseStudioBootstrapOptions): StudioBootstrapState {
   const [state, setState] = React.useState<StudioBootstrapState>({
     ready: false,
     userId: null,
@@ -24,6 +27,7 @@ export function useStudioBootstrap(options?: UseStudioBootstrapOptions): StudioB
 
     (async () => {
       try {
+        setClientApiKey(options.apiKey);
         const requireAuth = isSupabaseClientInjected();
         if (!requireAuth) {
           const cfg = await studioConfigRepository.get();
@@ -43,7 +47,7 @@ export function useStudioBootstrap(options?: UseStudioBootstrapOptions): StudioB
     return () => {
       cancelled = true;
     };
-  }, []);
+  }, [options.apiKey]);
 
   return state;
 }