@comergehq/studio 0.1.17 → 0.1.18

package/package.json

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

package/src/components/icons/StudioIcons.tsx

@@ -12,6 +12,7 @@ import {
   Send,
   X,
   Check,
+  Share2,
 } from 'lucide-react-native';
 
 import { useTheme } from '../../theme';
@@ -62,5 +63,6 @@ export const IconSend = makeIcon(Send);
 export const IconPlay = makeIcon(Play);
 export const IconArrowDown = makeIcon(ArrowDown);
 export const IconApprove = makeIcon(Check);
+export const IconShare = makeIcon(Share2);
 
 

package/src/studio/ui/PreviewPanel.tsx

@@ -1,8 +1,9 @@
 import * as React from 'react';
-import { ActivityIndicator, View } from 'react-native';
+import { ActivityIndicator, Platform, Share, View } from 'react-native';
 
 import type { App } from '../../data/apps/types';
 import type { MergeRequest } from '../../data/merge-requests/types';
+import { log } from '../../core/logger';
 import { PreviewPage } from '../../components/preview/PreviewPage';
 import { Text } from '../../components/primitives/Text';
 import { PreviewPanelHeader } from './preview-panel/PreviewPanelHeader';
@@ -59,6 +60,29 @@ export function PreviewPanel({
   onOpenComments,
   commentCountOverride,
 }: PreviewPanelProps) {
+  const handleShare = React.useCallback(async () => {
+    if (!app || !app.isPublic) return;
+    const shareUrl = `https://comerge.ai/app/${app.id}`;
+    const message = app.name ? `${app.name} on Comerge\n${shareUrl}` : `Check out this app on Comerge\n${shareUrl}`;
+    try {
+      const title = app.name ?? 'Comerge app';
+      const payload =
+        Platform.OS === 'ios'
+          ? {
+              title,
+              message,
+            }
+          : {
+              title,
+              message,
+              url: shareUrl,
+            };
+      await Share.share(payload);
+    } catch (error) {
+      log.warn('PreviewPanel share failed', error);
+    }
+  }, [app]);
+
   const { imageUrl, imageLoaded, setImageLoaded, creator, insights, stats, showProcessing, canSubmitMergeRequest } = usePreviewPanelData({
     app,
     isOwner,
@@ -67,7 +91,16 @@ export function PreviewPanel({
     commentCountOverride,
   });
 
-  const header = <PreviewPanelHeader isOwner={isOwner} onClose={onClose} onNavigateHome={onNavigateHome} onGoToChat={onGoToChat} />;
+  const header = (
+    <PreviewPanelHeader
+      isOwner={isOwner}
+      isPublic={Boolean(app?.isPublic)}
+      onClose={onClose}
+      onNavigateHome={onNavigateHome}
+      onGoToChat={onGoToChat}
+      onShare={handleShare}
+    />
+  );
 
   if (loading || !app) {
     return (

package/src/studio/ui/preview-panel/PreviewPanelHeader.tsx

@@ -3,16 +3,25 @@ import { View } from 'react-native';
 
 import { StudioSheetHeader } from '../../../components/studio-sheet/StudioSheetHeader';
 import { StudioSheetHeaderIconButton } from '../../../components/studio-sheet/StudioSheetHeaderIconButton';
-import { IconChat, IconClose, IconHome } from '../../../components/icons/StudioIcons';
+import { IconChat, IconClose, IconHome, IconShare } from '../../../components/icons/StudioIcons';
 
 export type PreviewPanelHeaderProps = {
   isOwner: boolean;
+  isPublic: boolean;
   onClose: () => void;
   onNavigateHome?: () => void;
   onGoToChat: () => void;
+  onShare?: () => void;
 };
 
-export function PreviewPanelHeader({ isOwner, onClose, onNavigateHome, onGoToChat }: PreviewPanelHeaderProps) {
+export function PreviewPanelHeader({
+  isOwner,
+  isPublic,
+  onClose,
+  onNavigateHome,
+  onGoToChat,
+  onShare,
+}: PreviewPanelHeaderProps) {
   return (
     <StudioSheetHeader
       left={
@@ -36,6 +45,17 @@ export function PreviewPanelHeader({ isOwner, onClose, onNavigateHome, onGoToCha
               <IconChat size={20} colorToken="onPrimary" />
             </StudioSheetHeaderIconButton>
           ) : null}
+          {isPublic && onShare ? (
+            <StudioSheetHeaderIconButton
+              onPress={onShare}
+              accessibilityLabel="Share"
+              intent="primary"
+              appearance="glass"
+              style={{ marginRight: 8 }}
+            >
+              <IconShare size={20} colorToken="onPrimary" />
+            </StudioSheetHeaderIconButton>
+          ) : null}
           <StudioSheetHeaderIconButton onPress={onClose} accessibilityLabel="Close" appearance="glass" intent="primary">
             <IconClose size={20} colorToken="onPrimary" />
           </StudioSheetHeaderIconButton>