@comergehq/studio 0.1.12 → 0.1.15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@comergehq/studio",
-  "version": "0.1.12",
+  "version": "0.1.15",
   "description": "Comerge studio",
   "main": "src/index.ts",
   "module": "dist/index.mjs",
@@ -57,6 +57,7 @@
     "@gorhom/bottom-sheet": "*",
     "@comergehq/runtime": "^0.1.1",
     "expo": "*",
+    "expo-asset": "*",
     "expo-file-system": "*",
     "expo-haptics": "*",
     "expo-linear-gradient": "*",
@@ -67,6 +68,7 @@
     "react-native": "*",
     "react-native-safe-area-context": "*",
     "react-native-svg": "*",
+    "react-native-zip-archive": "*",
     "react-native-view-shot": "*"
   },
   "peerDependenciesMeta": {}

package/src/components/{floating-draggable-button/FloatingDraggableButton.tsx → bubble/Bubble.tsx}

@@ -23,7 +23,7 @@ import Animated, {
 import { isLiquidGlassSupported } from '@callstack/liquid-glass';
 
 import { DEFAULT_EDGE_PADDING, DEFAULT_OFFSET, DEFAULT_SIZE, ENTER_ROTATION_FROM_DEG, ENTER_SCALE_FROM, PULSE_DURATION_MS } from './constants';
-import type { FloatingDraggableButtonProps } from './types';
+import type { BubbleProps } from './types';
 import { useTheme } from '../../theme';
 import { ResettableLiquidGlassView } from '../utils/ResettableLiquidGlassView';
 
@@ -53,7 +53,7 @@ function getFinalTranslateY(height: number, size: number, bottomOffset: number)
   return height - size - bottomOffset;
 }
 
-export function FloatingDraggableButton({
+export function Bubble({
   onPress,
   size = DEFAULT_SIZE,
   disabled = false,
@@ -69,7 +69,7 @@ export function FloatingDraggableButton({
   testID,
   edgePadding = DEFAULT_EDGE_PADDING,
   backgroundColor,
-}: FloatingDraggableButtonProps) {
+}: BubbleProps) {
   const theme = useTheme();
   const { width, height } = useWindowDimensions();
   const isDanger = variant === 'danger';

package/src/components/{floating-draggable-button → bubble}/constants.ts

@@ -1,9 +1,9 @@
-import type { FloatingButtonOffset } from './types';
+import type { BubbleOffset } from './types';
 
 export const DEFAULT_SIZE = 48;
 export const DEFAULT_EDGE_PADDING = 10;
 
-export const DEFAULT_OFFSET: Required<FloatingButtonOffset> = {
+export const DEFAULT_OFFSET: Required<BubbleOffset> = {
   left: 20,
   bottom: 60,
 };

package/src/components/bubble/index.ts

@@ -0,0 +1,4 @@
+export { Bubble } from './Bubble';
+export type { BubbleProps, BubbleOffset } from './types';
+
+

package/src/components/{floating-draggable-button → bubble}/types.ts

@@ -1,14 +1,14 @@
 import type * as React from 'react';
 import type { StyleProp, ViewStyle } from 'react-native';
 
-export type FloatingButtonOffset = {
+export type BubbleOffset = {
   /** Distance from the left edge (in px). */
   left?: number;
   /** Distance from the bottom edge (in px). */
   bottom?: number;
 };
 
-export type FloatingDraggableButtonProps = {
+export type BubbleProps = {
   /**
    * Whether the button should be shown. When toggled, the button animates in/out.
    * The component stays mounted to preserve its last drag position.
@@ -30,7 +30,7 @@ export type FloatingDraggableButtonProps = {
    * Initial placement when it animates in.
    * `left` is measured from the left edge; `bottom` from the bottom edge.
    */
-  offset?: FloatingButtonOffset;
+  offset?: BubbleOffset;
 
   /** Accessible label for screen readers (kept as `ariaLabel` for compatibility). */
   ariaLabel?: string;

package/src/components/index.ts

@@ -1,5 +1,5 @@
-export { FloatingDraggableButton } from './floating-draggable-button';
-export type { FloatingDraggableButtonProps, FloatingButtonOffset } from './floating-draggable-button';
+export { Bubble } from './bubble';
+export type { BubbleProps, BubbleOffset } from './bubble';
 
 export * from './icons/StudioIcons';
 

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

@@ -1,3 +1,3 @@
-export const BASE_URL = "https://comerge.ai";
+export const BASE_URL = "https://api.comerge.ai";
 
 

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

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

package/src/data/apps/bundles/remote.ts

@@ -11,6 +11,11 @@ export interface BundlesRemoteDataSource {
     bundleId: string,
     options?: { redirect?: boolean }
   ): Promise<ServiceResponse<{ url: string; redirect: boolean }>>;
+  getSignedAssetsDownloadUrl(
+    appId: string,
+    bundleId: string,
+    options?: { redirect?: boolean; kind?: string }
+  ): Promise<ServiceResponse<{ url: string; redirect: boolean }>>;
 }
 
 class BundlesRemoteDataSourceImpl extends BaseRemote implements BundlesRemoteDataSource {
@@ -40,6 +45,18 @@ class BundlesRemoteDataSourceImpl extends BaseRemote implements BundlesRemoteDat
     );
     return data;
   }
+
+  async getSignedAssetsDownloadUrl(
+    appId: string,
+    bundleId: string,
+    options?: { redirect?: boolean; kind?: string }
+  ): Promise<ServiceResponse<{ url: string; redirect: boolean }>> {
+    const { data } = await api.get<ServiceResponse<{ url: string; redirect: boolean }>>(
+      `/v1/apps/${encodeURIComponent(appId)}/bundles/${encodeURIComponent(bundleId)}/assets/download`,
+      { params: { redirect: options?.redirect ?? false, kind: options?.kind } }
+    );
+    return data;
+  }
 }
 
 export const bundlesRemoteDataSource: BundlesRemoteDataSource = new BundlesRemoteDataSourceImpl();

package/src/data/apps/bundles/repository.ts

@@ -7,6 +7,11 @@ export interface BundlesRepository {
   initiate(appId: string, payload: InitiateBundleRequest): Promise<Bundle>;
   getById(appId: string, bundleId: string): Promise<Bundle>;
   getSignedDownloadUrl(appId: string, bundleId: string, options?: { redirect?: boolean }): Promise<{ url: string; redirect: boolean }>;
+  getSignedAssetsDownloadUrl(
+    appId: string,
+    bundleId: string,
+    options?: { redirect?: boolean; kind?: string }
+  ): Promise<{ url: string; redirect: boolean }>;
 }
 
 class BundlesRepositoryImpl extends BaseRepository implements BundlesRepository {
@@ -28,6 +33,15 @@ class BundlesRepositoryImpl extends BaseRepository implements BundlesRepository
     const res = await this.remote.getSignedDownloadUrl(appId, bundleId, options);
     return this.unwrapOrThrow(res);
   }
+
+  async getSignedAssetsDownloadUrl(
+    appId: string,
+    bundleId: string,
+    options?: { redirect?: boolean; kind?: string }
+  ): Promise<{ url: string; redirect: boolean }> {
+    const res = await this.remote.getSignedAssetsDownloadUrl(appId, bundleId, options);
+    return this.unwrapOrThrow(res);
+  }
 }
 
 export const bundlesRepository: BundlesRepository = new BundlesRepositoryImpl(bundlesRemoteDataSource);

package/src/data/apps/bundles/types.ts

@@ -2,6 +2,20 @@ export type Platform = 'ios' | 'android';
 
 export type BundleStatus = 'pending' | 'building' | 'succeeded' | 'failed';
 
+export type BundleAssetKind = 'metro-assets' | string;
+
+export type BundleAsset = {
+  id: string;
+  kind: BundleAssetKind;
+  storageBucket: string;
+  storageKey: string;
+  contentType: string | null;
+  size: number | null;
+  checksumSha256: string | null;
+  createdAt: string;
+  updatedAt: string;
+};
+
 export type Bundle = {
   id: string;
   appId: string;
@@ -15,6 +29,7 @@ export type Bundle = {
   createdAt: string;
   updatedAt: string;
   expiresAt: string | null;
+  assets?: BundleAsset[];
 };
 
 export type InitiateBundleRequest = {

package/src/studio/ComergeStudio.tsx

@@ -7,6 +7,7 @@ import { StudioBootstrap } from './bootstrap/StudioBootstrap';
 import { useApp } from './hooks/useApp';
 import { useThreadMessages } from './hooks/useThreadMessages';
 import { useBundleManager } from './hooks/useBundleManager';
+import type { EmbeddedBaseBundles } from './hooks/useBundleManager';
 import { useMergeRequests } from './hooks/useMergeRequests';
 import { useAttachmentUpload } from './hooks/useAttachmentUpload';
 import { useStudioActions } from './hooks/useStudioActions';
@@ -17,22 +18,24 @@ import { LiquidGlassResetProvider } from '../components/utils/liquidGlassReset';
 
 export type ComergeStudioProps = {
   appId: string;
-  apiKey: string;
+  clientKey: string;
   appKey?: string;
   onNavigateHome?: () => void;
   style?: ViewStyle;
-  showFloatingButton?: boolean;
+  showBubble?: boolean;
   studioControlOptions?: import('@comergehq/studio-control').StudioControlOptions;
+  embeddedBaseBundles?: EmbeddedBaseBundles;
 };
 
 export function ComergeStudio({
   appId,
-  apiKey,
+  clientKey,
   appKey = 'MicroMain',
   onNavigateHome,
   style,
-  showFloatingButton = true,
+  showBubble = true,
   studioControlOptions,
+  embeddedBaseBundles,
 }: ComergeStudioProps) {
   const [activeAppId, setActiveAppId] = React.useState(appId);
   const [runtimeAppId, setRuntimeAppId] = React.useState(appId);
@@ -48,7 +51,7 @@ export function ComergeStudio({
   const captureTargetRef = React.useRef<View | null>(null);
 
   return (
-    <StudioBootstrap apiKey={apiKey}>
+    <StudioBootstrap clientKey={clientKey} fallback={<View style={{ flex: 1 }} />}>
       {({ userId }) => (
         <BottomSheetModalProvider>
           <LiquidGlassResetProvider resetTriggers={[appId, activeAppId, runtimeAppId]}>
@@ -65,8 +68,9 @@ export function ComergeStudio({
               onNavigateHome={onNavigateHome}
               captureTargetRef={captureTargetRef}
               style={style}
-              showFloatingButton={showFloatingButton}
+              showBubble={showBubble}
               studioControlOptions={studioControlOptions}
+              embeddedBaseBundles={embeddedBaseBundles}
             />
           </LiquidGlassResetProvider>
         </BottomSheetModalProvider>
@@ -88,8 +92,9 @@ type InnerProps = {
   onNavigateHome?: () => void;
   captureTargetRef: React.RefObject<View | null>;
   style?: ViewStyle;
-  showFloatingButton: boolean;
+  showBubble: boolean;
   studioControlOptions?: import('@comergehq/studio-control').StudioControlOptions;
+  embeddedBaseBundles?: EmbeddedBaseBundles;
 };
 
 function ComergeStudioInner({
@@ -105,8 +110,9 @@ function ComergeStudioInner({
   onNavigateHome,
   captureTargetRef,
   style,
-  showFloatingButton,
+  showBubble,
   studioControlOptions,
+  embeddedBaseBundles,
 }: InnerProps) {
   const { app, loading: appLoading } = useApp(activeAppId);
   const { app: runtimeAppFromHook } = useApp(runtimeAppId, { enabled: runtimeAppId !== activeAppId });
@@ -136,6 +142,7 @@ function ComergeStudioInner({
     base: { appId: runtimeAppId, commitId: runtimeApp?.headCommitId ?? undefined },
     platform,
     canRequestLatest: runtimeApp?.status === 'ready',
+    embeddedBaseBundles,
   });
 
   const sawEditingOnActiveAppRef = React.useRef(false);
@@ -219,6 +226,7 @@ function ComergeStudioInner({
           bundlePath={bundle.bundlePath}
           forcePreparing={showPostEditPreparing}
           renderToken={bundle.renderToken}
+          allowInitialPreparing={!embeddedBaseBundles}
         />
 
         <StudioOverlay
@@ -276,7 +284,7 @@ function ComergeStudioInner({
           chatShowTypingIndicator={chatShowTypingIndicator}
           onSendChat={(text, attachments) => actions.sendEdit({ prompt: text, attachments })}
           onNavigateHome={onNavigateHome}
-          showFloatingButton={showFloatingButton}
+          showBubble={showBubble}
           studioControlOptions={studioControlOptions}
         />
       </View>

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, apiKey }: StudioBootstrapProps) {
-  const { ready, error, userId } = useStudioBootstrap({ apiKey });
+export function StudioBootstrap({ children, fallback, renderError, clientKey }: StudioBootstrapProps) {
+  const { ready, error, userId } = useStudioBootstrap({ clientKey });
 
   if (error) {
     return (

package/src/studio/bootstrap/useStudioBootstrap.ts

@@ -1,12 +1,13 @@
 import * as React from 'react';
 
-import { setClientApiKey } from '../../core/services/http/public';
+import { setClientKey } 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';
+const SUPABASE_URL = 'https://xtfxwbckjpfmqubnsusu.supabase.co';
+const SUPABASE_ANON_KEY = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6Inh0Znh3YmNranBmbXF1Ym5zdXN1Iiwicm9sZSI6ImFub24iLCJpYXQiOjE3NjA2MDEyMzAsImV4cCI6MjA3NjE3NzIzMH0.dzWGAWrK4CvrmHVHzf8w7JlUZohdap0ZPnLZnABMV8s';
 
 export type UseStudioBootstrapOptions = {
-  apiKey: string;
+  clientKey: string;
 };
 
 export type StudioBootstrapState = {
@@ -27,11 +28,10 @@ export function useStudioBootstrap(options: UseStudioBootstrapOptions): StudioBo
 
     (async () => {
       try {
-        setClientApiKey(options.apiKey);
+        setClientKey(options.clientKey);
         const requireAuth = isSupabaseClientInjected();
         if (!requireAuth) {
-          const cfg = await studioConfigRepository.get();
-          setSupabaseConfig(cfg);
+          setSupabaseConfig({ url: SUPABASE_URL, anonKey: SUPABASE_ANON_KEY });
         }
         const { user } = requireAuth ? await ensureAuthenticatedSession() : await ensureAnonymousSession();
 
@@ -47,7 +47,7 @@ export function useStudioBootstrap(options: UseStudioBootstrapOptions): StudioBo
     return () => {
       cancelled = true;
     };
-  }, [options.apiKey]);
+  }, [options.clientKey]);
 
   return state;
 }