@comergehq/studio 0.1.24 → 0.1.26

package/package.json

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

package/src/components/chat/ChatMessageBubble.tsx

@@ -41,7 +41,7 @@ export function ChatMessageBubble({ message, renderContent, isLast, retrying, on
 
   const bodyColor =
     metaStatus === 'success' ? theme.colors.success : metaStatus === 'error' ? theme.colors.danger : undefined;
-  const showRetry = Boolean(onRetry) && isLast && metaStatus === 'error';
+  const showRetry = Boolean(onRetry) && isLast && metaStatus === 'error' && message.author === 'human';
   const retryLabel = retrying ? 'Retrying...' : 'Retry';
 
   return (

package/src/components/chat/ChatPage.tsx

@@ -49,7 +49,7 @@ export function ChatPage({
   const insets = useSafeAreaInsets();
   const [composerHeight, setComposerHeight] = React.useState(0);
   const [composerTopHeight, setComposerTopHeight] = React.useState(0);
-  const footerBottomPadding = Platform.OS === 'ios' ? insets.bottom : insets.bottom + 10;
+  const footerBottomPadding = Platform.OS === 'ios' ? insets.bottom - 24 : insets.bottom + 10;
   const totalComposerHeight = composerHeight + composerTopHeight;
   const overlayBottom = totalComposerHeight + footerBottomPadding + theme.spacing.lg;
   const bottomInset = totalComposerHeight + footerBottomPadding + theme.spacing.xl;

package/src/components/merge-requests/ReviewMergeRequestCard.tsx

@@ -64,7 +64,7 @@ export function ReviewMergeRequestCard({
             padding: 16,
             backgroundColor: withAlpha(theme.colors.surfaceRaised, 0.5),
             borderWidth: 1,
-            borderColor: withAlpha('#3700B3', 0.2),
+            borderColor: withAlpha('#007A75', 0.2),
           } as any,
         ]}
       >

package/src/components/overlays/EdgeGlowFrame.tsx

@@ -32,7 +32,7 @@ function baseColor(role: NonNullable<EdgeGlowFrameProps['role']>, theme: ReturnT
       return theme.colors.warning;
     case 'accent':
     default:
-      return '#A855F7';
+      return theme.colors.primary;
   }
 }
 

package/src/components/preview/PreviewStatusBadge.tsx

@@ -19,7 +19,7 @@ const STATUS_BG: Record<AppStatus, string> = {
   ready: '#10B981', // emerald-500
   creating: '#3B82F6', // blue-500
   editing: '#F59E0B', // amber-500
-  forking: '#8B5CF6', // violet-500
+  forking: '#00CBC0', // brand teal
   merging: '#06B6D4', // cyan-500
   error: '#F43F5E', // rose-500
   archived: '#71717A', // zinc-500

package/src/components/primitives/MarkdownText.tsx

@@ -1,8 +1,9 @@
-import { Platform, Pressable, Text, View, type ViewStyle } from 'react-native';
+import { Dimensions, Keyboard, Modal, Platform, Pressable, Text, View, type ViewStyle } from 'react-native';
 
 import Markdown from 'react-native-markdown-display';
 
 import { useTheme } from '../../theme';
+import { impact } from '../draw/optionalHaptics';
 import { useEffect, useRef, useState } from 'react';
 
 export type MarkdownTextVariant = 'chat' | 'mergeRequest';
@@ -54,14 +55,13 @@ export function MarkdownText({ markdown, variant = 'chat', bodyColor, style }: M
   const theme = useTheme();
   const isDark = theme.scheme === 'dark';
   const [showCopied, setShowCopied] = useState(false);
-  const [tooltipPosition, setTooltipPosition] = useState<{ x: number; y: number } | null>(null);
+  const [tooltipAnchor, setTooltipAnchor] = useState<{ x: number; y: number } | null>(null);
   const [tooltipWidth, setTooltipWidth] = useState(0);
   const hideTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-  const containerRef = useRef<View>(null);
 
   const baseBodyColor = variant === 'mergeRequest' ? theme.colors.textMuted : theme.colors.text;
   const linkColor =
-    variant === 'mergeRequest' ? (isDark ? theme.colors.primary : '#3700B3') : theme.colors.link;
+    variant === 'mergeRequest' ? (isDark ? theme.colors.primary : '#007A75') : theme.colors.link;
   const linkWeight = variant === 'mergeRequest' ? theme.typography.fontWeight.semibold : undefined;
 
   const codeBgColor = isDark ? '#27272A' : '#E4E4E7';
@@ -69,6 +69,18 @@ export function MarkdownText({ markdown, variant = 'chat', bodyColor, style }: M
 
   const paragraphBottom = variant === 'mergeRequest' ? 8 : 6;
   const baseLineHeight = variant === 'mergeRequest' ? 22 : 20;
+  const screen = Dimensions.get('window');
+  const tooltipPadding = theme.spacing.sm;
+  const tooltipYOffset = theme.spacing.lg + 32;
+  const minTooltipY = theme.spacing.xl;
+
+  const tooltipTop = tooltipAnchor ? Math.max(minTooltipY, tooltipAnchor.y - tooltipYOffset) : 0;
+  const tooltipLeft = tooltipAnchor
+    ? Math.min(
+        Math.max(tooltipAnchor.x, tooltipPadding),
+        Math.max(tooltipPadding, screen.width - tooltipPadding - Math.max(tooltipWidth, 1))
+      )
+    : 0;
 
   useEffect(() => {
     return () => {
@@ -81,16 +93,11 @@ export function MarkdownText({ markdown, variant = 'chat', bodyColor, style }: M
   const handleLongPress = (event: {
     nativeEvent: { locationX: number; locationY: number; pageX: number; pageY: number };
   }) => {
-    const { locationX, locationY, pageX, pageY } = event.nativeEvent;
-
-    if (containerRef.current?.measureInWindow) {
-      containerRef.current.measureInWindow((x, y) => {
-        setTooltipPosition({ x: pageX - x, y: pageY - y });
-      });
-    } else {
-      setTooltipPosition({ x: locationX, y: locationY });
-    }
+    const { pageX, pageY } = event.nativeEvent;
+    setTooltipAnchor({ x: pageX, y: pageY });
+    setTooltipWidth(0);
     copyMarkdownToClipboard(markdown);
+    void impact('light');
     setShowCopied(true);
 
     if (hideTimerRef.current) {
@@ -103,8 +110,8 @@ export function MarkdownText({ markdown, variant = 'chat', bodyColor, style }: M
   };
 
   return (
-    <Pressable style={style} onLongPress={handleLongPress}>
-      <View ref={containerRef} style={{ position: 'relative' }}>
+    <Pressable style={style} onPress={Keyboard.dismiss} onLongPress={handleLongPress}>
+      <View style={{ position: 'relative' }}>
         <Markdown
           style={{
             body: { color: bodyColor ?? baseBodyColor, fontSize: 14, lineHeight: baseLineHeight },
@@ -137,31 +144,34 @@ export function MarkdownText({ markdown, variant = 'chat', bodyColor, style }: M
         >
           {markdown}
         </Markdown>
-        {showCopied && tooltipPosition ? (
-          <View
-            pointerEvents="none"
-            style={{
-              position: 'absolute',
-              left: tooltipPosition.x,
-              top: tooltipPosition.y - theme.spacing.lg - 32,
-              backgroundColor: theme.colors.success,
-              borderRadius: theme.radii.pill,
-              paddingHorizontal: theme.spacing.sm,
-              paddingVertical: theme.spacing.xs,
-              transform: [{ translateX: tooltipWidth ? -tooltipWidth / 2 : 0 }],
-            }}
-            onLayout={(event) => setTooltipWidth(event.nativeEvent.layout.width)}
-          >
-            <Text
-              style={{
-                color: theme.colors.onSuccess,
-                fontSize: theme.typography.fontSize.xs,
-                fontWeight: theme.typography.fontWeight.medium,
-              }}
-            >
-              Copied
-            </Text>
-          </View>
+        {showCopied && tooltipAnchor ? (
+          <Modal transparent visible statusBarTranslucent>
+            <View pointerEvents="none" style={{ flex: 1 }}>
+              <View
+                pointerEvents="none"
+                style={{
+                  position: 'absolute',
+                  left: tooltipLeft,
+                  top: tooltipTop,
+                  backgroundColor: theme.colors.success,
+                  borderRadius: theme.radii.pill,
+                  paddingHorizontal: theme.spacing.sm,
+                  paddingVertical: theme.spacing.xs,
+                }}
+                onLayout={(event) => setTooltipWidth(event.nativeEvent.layout.width)}
+              >
+                <Text
+                  style={{
+                    color: theme.colors.onSuccess,
+                    fontSize: theme.typography.fontSize.xs,
+                    fontWeight: theme.typography.fontWeight.medium,
+                  }}
+                >
+                  Copied
+                </Text>
+              </View>
+            </View>
+          </Modal>
         ) : null}
       </View>
     </Pressable>

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

@@ -27,7 +27,7 @@ export function PreviewMetaSection({ app, isOwner, creator, downloadsCount }: Pr
       creatorName={creator?.name ?? null}
       tag={
         isOwner || app.forkedFromAppId ? (
-          <View style={{ paddingHorizontal: 8, paddingVertical: 2, borderRadius: 999, backgroundColor: '#3700B3' }}>
+          <View style={{ paddingHorizontal: 8, paddingVertical: 2, borderRadius: 999, backgroundColor: '#007A75' }}>
             <Text variant="caption" style={{ color: '#fff', fontWeight: theme.typography.fontWeight.semibold }}>
               {app.forkedFromAppId ? 'Remix' : 'Owner'}
             </Text>

package/src/theme/tokens.ts

@@ -14,7 +14,7 @@ export const lightTheme = {
     border: '#E4E4E7',
     borderStrong: '#D4D4D8',
 
-    primary: '#6200EE',
+    primary: '#00CBC0',
     onPrimary: '#FFFFFF',
 
     neutral: '#ECECEE',
@@ -32,7 +32,7 @@ export const lightTheme = {
     onWarning: '#09090B',
     warningSubtle: 'rgba(250, 204, 21, 0.14)',
 
-    link: '#6200EE',
+    link: '#00CBC0',
 
     backdrop: 'rgba(0, 0, 0, 0.35)',
 
@@ -41,8 +41,8 @@ export const lightTheme = {
     floatingSurface: 'rgba(255, 255, 255, 0.6)',
     floatingContent: '#000000',
 
-    accentRingFrom: 'rgba(98, 0, 238, 0.20)',
-    accentRingTo: 'rgba(98, 0, 238, 0.90)',
+    accentRingFrom: 'rgba(0, 203, 192, 0.20)',
+    accentRingTo: 'rgba(0, 203, 192, 0.90)',
     dangerRingFrom: 'rgba(244, 63, 94, 0.35)',
     dangerRingTo: 'rgba(244, 63, 94, 1.0)',
   },
@@ -69,7 +69,7 @@ export const darkTheme = {
     border: '#404049',
     borderStrong: '#52525B',
 
-    primary: '#6200EE',
+    primary: '#00CBC0',
     onPrimary: '#FFFFFF',
 
     neutral: '#0B080F',
@@ -87,7 +87,7 @@ export const darkTheme = {
     onWarning: '#0B080F',
     warningSubtle: 'rgba(251, 191, 36, 0.18)',
 
-    link: '#6200EE',
+    link: '#00CBC0',
 
     backdrop: 'rgba(0, 0, 0, 0.55)',
 
@@ -96,8 +96,8 @@ export const darkTheme = {
     floatingSurface: 'rgba(0, 0, 0, 0.6)',
     floatingContent: '#FFFFFF',
 
-    accentRingFrom: 'rgba(98, 0, 238, 0.20)',
-    accentRingTo: 'rgba(98, 0, 238, 0.90)',
+    accentRingFrom: 'rgba(0, 203, 192, 0.20)',
+    accentRingTo: 'rgba(0, 203, 192, 0.90)',
     dangerRingFrom: 'rgba(244, 63, 94, 0.35)',
     dangerRingTo: 'rgba(244, 63, 94, 1.0)',
   },