@comergehq/studio 0.1.11 → 0.1.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@comergehq/studio",
-  "version": "0.1.11",
+  "version": "0.1.12",
   "description": "Comerge studio",
   "main": "src/index.ts",
   "module": "dist/index.mjs",
@@ -42,6 +42,7 @@
   },
   "dependencies": {
     "axios": "^1.13.1",
+    "@comergehq/studio-control": "^0.1.5",
     "react-native-markdown-display": "^7.0.2",
     "react-native-logs": "^5.5.0"
   },

package/src/studio/ComergeStudio.tsx

@@ -21,6 +21,8 @@ export type ComergeStudioProps = {
   appKey?: string;
   onNavigateHome?: () => void;
   style?: ViewStyle;
+  showFloatingButton?: boolean;
+  studioControlOptions?: import('@comergehq/studio-control').StudioControlOptions;
 };
 
 export function ComergeStudio({
@@ -29,6 +31,8 @@ export function ComergeStudio({
   appKey = 'MicroMain',
   onNavigateHome,
   style,
+  showFloatingButton = true,
+  studioControlOptions,
 }: ComergeStudioProps) {
   const [activeAppId, setActiveAppId] = React.useState(appId);
   const [runtimeAppId, setRuntimeAppId] = React.useState(appId);
@@ -61,6 +65,8 @@ export function ComergeStudio({
               onNavigateHome={onNavigateHome}
               captureTargetRef={captureTargetRef}
               style={style}
+              showFloatingButton={showFloatingButton}
+              studioControlOptions={studioControlOptions}
             />
           </LiquidGlassResetProvider>
         </BottomSheetModalProvider>
@@ -82,6 +88,8 @@ type InnerProps = {
   onNavigateHome?: () => void;
   captureTargetRef: React.RefObject<View | null>;
   style?: ViewStyle;
+  showFloatingButton: boolean;
+  studioControlOptions?: import('@comergehq/studio-control').StudioControlOptions;
 };
 
 function ComergeStudioInner({
@@ -97,6 +105,8 @@ function ComergeStudioInner({
   onNavigateHome,
   captureTargetRef,
   style,
+  showFloatingButton,
+  studioControlOptions,
 }: InnerProps) {
   const { app, loading: appLoading } = useApp(activeAppId);
   const { app: runtimeAppFromHook } = useApp(runtimeAppId, { enabled: runtimeAppId !== activeAppId });
@@ -266,6 +276,8 @@ function ComergeStudioInner({
           chatShowTypingIndicator={chatShowTypingIndicator}
           onSendChat={(text, attachments) => actions.sendEdit({ prompt: text, attachments })}
           onNavigateHome={onNavigateHome}
+          showFloatingButton={showFloatingButton}
+          studioControlOptions={studioControlOptions}
         />
       </View>
     </View>

package/src/studio/ui/StudioOverlay.tsx

@@ -15,6 +15,11 @@ import { ConfirmMergeFlow } from './ConfirmMergeFlow';
 import type { MergeRequestSummary } from '../../components/models/types';
 import { useTheme } from '../../theme';
 import { useOptimisticChatMessages } from '../hooks/useOptimisticChatMessages';
+import {
+  publishComergeStudioUIState,
+  startStudioControlPolling,
+  type StudioControlOptions,
+} from '@comergehq/studio-control';
 
 import { MergeIcon } from '../../components/icons/MergeIcon';
 
@@ -56,6 +61,8 @@ export type StudioOverlayProps = {
 
   // Navigation callbacks
   onNavigateHome?: () => void;
+  showFloatingButton: boolean;
+  studioControlOptions?: StudioControlOptions;
 };
 
 type SheetPage = 'preview' | 'chat';
@@ -87,11 +94,14 @@ export function StudioOverlay({
   chatShowTypingIndicator,
   onSendChat,
   onNavigateHome,
+  showFloatingButton,
+  studioControlOptions,
 }: StudioOverlayProps) {
   const theme = useTheme();
   const { width } = useWindowDimensions();
 
   const [sheetOpen, setSheetOpen] = React.useState(false);
+  const sheetOpenRef = React.useRef(sheetOpen);
   const [activePage, setActivePage] = React.useState<SheetPage>('preview');
 
   const [drawing, setDrawing] = React.useState(false);
@@ -186,6 +196,23 @@ export function StudioOverlay({
     [closeSheet, onTestMr]
   );
 
+  React.useEffect(() => {
+    sheetOpenRef.current = sheetOpen;
+  }, [sheetOpen]);
+
+  React.useEffect(() => {
+    const poller = startStudioControlPolling((action) => {
+      if (action === 'show' && !sheetOpenRef.current) openSheet();
+      if (action === 'hide' && sheetOpenRef.current) closeSheet();
+      if (action === 'toggle') toggleSheet();
+    }, studioControlOptions);
+    return () => poller.stop();
+  }, [closeSheet, openSheet, studioControlOptions, toggleSheet]);
+
+  React.useEffect(() => {
+    void publishComergeStudioUIState(sheetOpen, studioControlOptions);
+  }, [sheetOpen, studioControlOptions]);
+
   return (
     <>
       {/* Testing glow around runtime */}
@@ -243,17 +270,19 @@ export function StudioOverlay({
         />
       </StudioBottomSheet>
 
-      <FloatingDraggableButton
-        visible={!sheetOpen && !drawing}
-        ariaLabel={sheetOpen ? 'Hide studio' : 'Show studio'}
-        badgeCount={incomingMergeRequests.length}
-        onPress={toggleSheet}
-        isLoading={app?.status === 'editing'}
-      >
-        <View style={{ width: 28, height: 28, alignItems: 'center', justifyContent: 'center' }}>
-          <MergeIcon width={24} height={24} color={theme.colors.floatingContent} />
-        </View>
-      </FloatingDraggableButton>
+      {showFloatingButton && (
+        <FloatingDraggableButton
+          visible={!sheetOpen && !drawing}
+          ariaLabel={sheetOpen ? 'Hide studio' : 'Show studio'}
+          badgeCount={incomingMergeRequests.length}
+          onPress={toggleSheet}
+          isLoading={app?.status === 'editing'}
+        >
+          <View style={{ width: 28, height: 28, alignItems: 'center', justifyContent: 'center' }}>
+            <MergeIcon width={24} height={24} color={theme.colors.floatingContent} />
+          </View>
+        </FloatingDraggableButton>
+      )}
 
       <DrawModeOverlay
         visible={drawing}