@comergehq/studio 0.1.2 → 0.1.4

package/dist/index.mjs

@@ -184,6 +184,39 @@ function Text({
 // src/studio/bootstrap/useStudioBootstrap.ts
 import * as React from "react";
 
+// src/core/services/http/public.ts
+import axios from "axios";
+
+// src/core/services/http/baseUrl.ts
+var BASE_URL = "http://192.168.8.175:8080";
+
+// src/core/services/http/public.ts
+var CLIENT_KEY_HEADER = "x-comerge-api-key";
+var clientApiKey = null;
+var publicApi = axios.create({
+  baseURL: BASE_URL,
+  timeout: 3e4,
+  headers: {
+    Accept: "application/json",
+    "Content-Type": "application/json"
+  }
+});
+function setClientApiKey(apiKey) {
+  var _a;
+  const trimmed = ((_a = apiKey == null ? void 0 : apiKey.trim) == null ? void 0 : _a.call(apiKey)) ?? "";
+  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[CLIENT_KEY_HEADER] = clientApiKey;
+  return config;
+});
+
 // src/core/services/supabase/client.ts
 import { createClient } from "@supabase/supabase-js";
 var clientSingleton = null;
@@ -254,22 +287,6 @@ var BaseRepository = class {
   }
 };
 
-// src/core/services/http/public.ts
-import axios from "axios";
-
-// src/core/services/http/baseUrl.ts
-var BASE_URL = "http://192.168.8.175:8080";
-
-// src/core/services/http/public.ts
-var publicApi = axios.create({
-  baseURL: BASE_URL,
-  timeout: 3e4,
-  headers: {
-    Accept: "application/json",
-    "Content-Type": "application/json"
-  }
-});
-
 // src/data/base-remote.ts
 var BaseRemote = class {
 };
@@ -307,6 +324,7 @@ function useStudioBootstrap(options) {
     let cancelled = false;
     (async () => {
       try {
+        setClientApiKey(options.apiKey);
         const requireAuth = isSupabaseClientInjected();
         if (!requireAuth) {
           const cfg = await studioConfigRepository.get();
@@ -324,14 +342,14 @@ function useStudioBootstrap(options) {
     return () => {
       cancelled = true;
     };
-  }, []);
+  }, [options.apiKey]);
   return state;
 }
 
 // src/studio/bootstrap/StudioBootstrap.tsx
 import { Fragment, jsx as jsx2 } from "react/jsx-runtime";
-function StudioBootstrap({ children, fallback, renderError }) {
-  const { ready, error, userId } = useStudioBootstrap({});
+function StudioBootstrap({ children, fallback, renderError, apiKey }) {
+  const { ready, error, userId } = useStudioBootstrap({ apiKey });
   if (error) {
     return /* @__PURE__ */ jsx2(View, { style: { flex: 1, justifyContent: "center", alignItems: "center", padding: 24 }, children: renderError ? renderError(error) : /* @__PURE__ */ jsx2(Text, { variant: "bodyMuted", children: error.message }) });
   }
@@ -3852,11 +3870,21 @@ import { Pressable as Pressable7, View as View21 } from "react-native";
 import { LiquidGlassView as LiquidGlassView6, isLiquidGlassSupported as isLiquidGlassSupported6 } from "@callstack/liquid-glass";
 import { Heart, MessageCircle } from "lucide-react-native";
 
-// src/assets/images/merge.svg
-var merge_default = "./merge-72UG27QV.svg";
+// src/components/icons/MergeIcon.tsx
+import Svg2, { Path as Path2 } from "react-native-svg";
+import { jsx as jsx28 } from "react/jsx-runtime";
+function MergeIcon({ color = "currentColor", width = 24, height = 24, ...props }) {
+  return /* @__PURE__ */ jsx28(Svg2, { viewBox: "0 0 486 486", width, height, ...props, children: /* @__PURE__ */ jsx28(
+    Path2,
+    {
+      d: "M237.025 0H243.664C254.876 95.0361 275.236 175.597 304.743 241.684C334.249 307.478 367.002 357.774 403 392.572L389.722 486C361.691 458.22 338.233 429.417 319.349 399.59C300.464 369.764 284.531 335.843 271.548 297.829C258.565 259.522 246.615 214.343 235.697 162.292L237.91 161.415C228.468 214.928 217.993 261.569 206.485 301.338C194.978 341.107 179.634 375.904 160.455 405.731C141.571 435.265 115.752 462.022 83 486L96.278 392.572C124.014 369.179 147.62 336.72 167.094 295.197C186.864 253.381 202.65 206.886 214.452 155.713C226.255 104.247 233.779 52.343 237.025 0Z",
+      fill: color
+    }
+  ) });
+}
 
 // src/components/preview/StatsBar.tsx
-import { jsx as jsx28, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx29, jsxs as jsxs16 } from "react/jsx-runtime";
 function StatsBar({
   likeCount,
   commentCount,
@@ -3870,7 +3898,7 @@ function StatsBar({
 }) {
   const theme = useTheme();
   const statsBgColor = theme.scheme === "dark" ? "rgba(24, 24, 27, 0.5)" : "rgba(255, 255, 255, 0.5)";
-  return /* @__PURE__ */ jsx28(
+  return /* @__PURE__ */ jsx29(
     View21,
     {
       style: [
@@ -3878,7 +3906,7 @@ function StatsBar({
         centered && { alignItems: "center" },
         style
       ],
-      children: /* @__PURE__ */ jsx28(
+      children: /* @__PURE__ */ jsx29(
         LiquidGlassView6,
         {
           style: [
@@ -3888,7 +3916,7 @@ function StatsBar({
           ],
           effect: "clear",
           children: /* @__PURE__ */ jsxs16(View21, { style: { flexDirection: "row", alignItems: "center", justifyContent: "space-between", paddingHorizontal: 16 }, children: [
-            /* @__PURE__ */ jsx28(
+            /* @__PURE__ */ jsx29(
               Pressable7,
               {
                 disabled: !onPressLike,
@@ -3896,7 +3924,7 @@ function StatsBar({
                 hitSlop: 8,
                 style: { paddingVertical: 8 },
                 children: /* @__PURE__ */ jsxs16(View21, { style: { flexDirection: "row", alignItems: "center" }, children: [
-                  /* @__PURE__ */ jsx28(
+                  /* @__PURE__ */ jsx29(
                     Heart,
                     {
                       size: 16,
@@ -3905,8 +3933,8 @@ function StatsBar({
                       fill: isLiked ? theme.colors.danger : "transparent"
                     }
                   ),
-                  /* @__PURE__ */ jsx28(View21, { style: { width: 4 } }),
-                  /* @__PURE__ */ jsx28(
+                  /* @__PURE__ */ jsx29(View21, { style: { width: 4 } }),
+                  /* @__PURE__ */ jsx29(
                     Text,
                     {
                       variant: "caption",
@@ -3920,7 +3948,7 @@ function StatsBar({
                 ] })
               }
             ),
-            /* @__PURE__ */ jsx28(
+            /* @__PURE__ */ jsx29(
               Pressable7,
               {
                 disabled: !onPressComments,
@@ -3928,16 +3956,16 @@ function StatsBar({
                 hitSlop: 8,
                 style: { paddingVertical: 8 },
                 children: /* @__PURE__ */ jsxs16(View21, { style: { flexDirection: "row", alignItems: "center" }, children: [
-                  /* @__PURE__ */ jsx28(MessageCircle, { size: 16, strokeWidth: 2.5, color: "#FFFFFF" }),
-                  /* @__PURE__ */ jsx28(View21, { style: { width: 4 } }),
-                  /* @__PURE__ */ jsx28(Text, { variant: "caption", style: { color: "#FFFFFF", fontWeight: theme.typography.fontWeight.bold }, children: commentCount })
+                  /* @__PURE__ */ jsx29(MessageCircle, { size: 16, strokeWidth: 2.5, color: "#FFFFFF" }),
+                  /* @__PURE__ */ jsx29(View21, { style: { width: 4 } }),
+                  /* @__PURE__ */ jsx29(Text, { variant: "caption", style: { color: "#FFFFFF", fontWeight: theme.typography.fontWeight.bold }, children: commentCount })
                 ] })
               }
             ),
             /* @__PURE__ */ jsxs16(View21, { style: { flexDirection: "row", alignItems: "center", paddingVertical: 8 }, children: [
-              /* @__PURE__ */ jsx28(View21, { style: { transform: [{ scaleY: -1 }] }, children: /* @__PURE__ */ jsx28(merge_default, { width: 14, height: 14, color: "#FFFFFF" }) }),
-              /* @__PURE__ */ jsx28(View21, { style: { width: 4 } }),
-              /* @__PURE__ */ jsx28(Text, { variant: "caption", style: { color: "#FFFFFF", fontWeight: theme.typography.fontWeight.bold }, children: forkCount })
+              /* @__PURE__ */ jsx29(View21, { style: { transform: [{ scaleY: -1 }] }, children: /* @__PURE__ */ jsx29(MergeIcon, { width: 14, height: 14, color: "#FFFFFF" }) }),
+              /* @__PURE__ */ jsx29(View21, { style: { width: 4 } }),
+              /* @__PURE__ */ jsx29(Text, { variant: "caption", style: { color: "#FFFFFF", fontWeight: theme.typography.fontWeight.bold }, children: forkCount })
             ] })
           ] })
         }
@@ -3970,7 +3998,7 @@ var APP_STATUS_LABEL = {
 };
 
 // src/components/preview/PreviewStatusBadge.tsx
-import { jsx as jsx29, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx30, jsxs as jsxs17 } from "react/jsx-runtime";
 var STATUS_BG = {
   ready: "#10B981",
   // emerald-500
@@ -4011,15 +4039,15 @@ function PreviewStatusBadge({ status }) {
         backgroundColor: STATUS_BG[status]
       },
       children: [
-        /* @__PURE__ */ jsx29(IconComp, { size: 12, color: "#FFFFFF", style: { marginRight: 4 } }),
-        /* @__PURE__ */ jsx29(Text, { style: { color: "#FFFFFF", fontSize: 11, lineHeight: 14 }, children: label })
+        /* @__PURE__ */ jsx30(IconComp, { size: 12, color: "#FFFFFF", style: { marginRight: 4 } }),
+        /* @__PURE__ */ jsx30(Text, { style: { color: "#FFFFFF", fontSize: 11, lineHeight: 14 }, children: label })
       ]
     }
   );
 }
 
 // src/studio/ui/preview-panel/PreviewHeroSection.tsx
-import { jsx as jsx30 } from "react/jsx-runtime";
+import { jsx as jsx31 } from "react/jsx-runtime";
 function PreviewHeroSection({
   appStatus,
   showProcessing,
@@ -4028,13 +4056,13 @@ function PreviewHeroSection({
   onImageLoad,
   stats
 }) {
-  return /* @__PURE__ */ jsx30(
+  return /* @__PURE__ */ jsx31(
     PreviewHeroCard,
     {
-      overlayTopLeft: showProcessing ? /* @__PURE__ */ jsx30(PreviewStatusBadge, { status: appStatus }) : null,
-      background: /* @__PURE__ */ jsx30(PreviewPlaceholder, { visible: !imageLoaded }),
-      image: /* @__PURE__ */ jsx30(PreviewImage, { uri: imageUrl, onLoad: onImageLoad }),
-      overlayBottom: /* @__PURE__ */ jsx30(
+      overlayTopLeft: showProcessing ? /* @__PURE__ */ jsx31(PreviewStatusBadge, { status: appStatus }) : null,
+      background: /* @__PURE__ */ jsx31(PreviewPlaceholder, { visible: !imageLoaded }),
+      image: /* @__PURE__ */ jsx31(PreviewImage, { uri: imageUrl, onLoad: onImageLoad }),
+      overlayBottom: /* @__PURE__ */ jsx31(
         StatsBar,
         {
           likeCount: stats.likeCount,
@@ -4057,7 +4085,7 @@ import { View as View24 } from "react-native";
 
 // src/components/preview/PreviewMetaRow.tsx
 import { View as View23 } from "react-native";
-import { jsx as jsx31, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx32, jsxs as jsxs18 } from "react/jsx-runtime";
 function PreviewMetaRow({
   avatarUri,
   creatorName,
@@ -4070,9 +4098,9 @@ function PreviewMetaRow({
   const theme = useTheme();
   return /* @__PURE__ */ jsxs18(View23, { style: [{ alignSelf: "stretch" }, style], children: [
     /* @__PURE__ */ jsxs18(View23, { style: { flexDirection: "row", alignItems: "center" }, children: [
-      /* @__PURE__ */ jsx31(Avatar, { uri: avatarUri, name: creatorName, size: 24, style: { marginRight: theme.spacing.sm } }),
+      /* @__PURE__ */ jsx32(Avatar, { uri: avatarUri, name: creatorName, size: 24, style: { marginRight: theme.spacing.sm } }),
       /* @__PURE__ */ jsxs18(View23, { style: { flexDirection: "row", alignItems: "center", flex: 1, minWidth: 0, marginRight: theme.spacing.sm }, children: [
-        /* @__PURE__ */ jsx31(
+        /* @__PURE__ */ jsx32(
           Text,
           {
             numberOfLines: 1,
@@ -4086,11 +4114,11 @@ function PreviewMetaRow({
             children: title
           }
         ),
-        tag ? /* @__PURE__ */ jsx31(View23, { style: { marginLeft: theme.spacing.sm }, children: tag }) : null
+        tag ? /* @__PURE__ */ jsx32(View23, { style: { marginLeft: theme.spacing.sm }, children: tag }) : null
       ] }),
-      rightMetric ? /* @__PURE__ */ jsx31(View23, { children: rightMetric }) : null
+      rightMetric ? /* @__PURE__ */ jsx32(View23, { children: rightMetric }) : null
     ] }),
-    subtitle ? /* @__PURE__ */ jsx31(
+    subtitle ? /* @__PURE__ */ jsx32(
       Text,
       {
         numberOfLines: 2,
@@ -4133,18 +4161,18 @@ function statusDescription(status, statusError) {
 }
 
 // src/studio/ui/preview-panel/PreviewMetaSection.tsx
-import { jsx as jsx32, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx33, jsxs as jsxs19 } from "react/jsx-runtime";
 function PreviewMetaSection({ app, isOwner, creator, downloadsCount }) {
   var _a;
   const theme = useTheme();
-  return /* @__PURE__ */ jsx32(
+  return /* @__PURE__ */ jsx33(
     PreviewMetaRow,
     {
       title: app.name,
       subtitle: app.description,
       avatarUri: (creator == null ? void 0 : creator.avatar) ?? null,
       creatorName: (creator == null ? void 0 : creator.name) ?? null,
-      tag: isOwner || app.forkedFromAppId ? /* @__PURE__ */ jsx32(View24, { style: { paddingHorizontal: 8, paddingVertical: 2, borderRadius: 999, backgroundColor: "#3700B3" }, children: /* @__PURE__ */ jsx32(Text, { variant: "caption", style: { color: "#fff", fontWeight: theme.typography.fontWeight.semibold }, children: app.forkedFromAppId ? "Remix" : "Owner" }) }) : null,
+      tag: isOwner || app.forkedFromAppId ? /* @__PURE__ */ jsx33(View24, { style: { paddingHorizontal: 8, paddingVertical: 2, borderRadius: 999, backgroundColor: "#3700B3" }, children: /* @__PURE__ */ jsx33(Text, { variant: "caption", style: { color: "#fff", fontWeight: theme.typography.fontWeight.semibold }, children: app.forkedFromAppId ? "Remix" : "Owner" }) }) : null,
       rightMetric: /* @__PURE__ */ jsxs19(
         View24,
         {
@@ -4157,7 +4185,7 @@ function PreviewMetaSection({ app, isOwner, creator, downloadsCount }) {
             backgroundColor: withAlpha(theme.colors.neutral, 0.3)
           },
           children: [
-            /* @__PURE__ */ jsx32(
+            /* @__PURE__ */ jsx33(
               Text,
               {
                 style: {
@@ -4170,7 +4198,7 @@ function PreviewMetaSection({ app, isOwner, creator, downloadsCount }) {
                 children: formatCount(downloadsCount ?? ((_a = app.insights) == null ? void 0 : _a.totalDownloads) ?? 0)
               }
             ),
-            /* @__PURE__ */ jsx32(IconPlay, { size: 14, colorToken: "textMuted", fill: theme.colors.textMuted })
+            /* @__PURE__ */ jsx33(IconPlay, { size: 14, colorToken: "textMuted", fill: theme.colors.textMuted })
           ]
         }
       ),
@@ -4184,7 +4212,7 @@ import { ActivityIndicator as ActivityIndicator4, View as View26 } from "react-n
 
 // src/studio/ui/preview-panel/PressableCardRow.tsx
 import { Pressable as Pressable8, View as View25 } from "react-native";
-import { jsx as jsx33, jsxs as jsxs20 } from "react/jsx-runtime";
+import { jsx as jsx34, jsxs as jsxs20 } from "react/jsx-runtime";
 function PressableCardRow({
   accessibilityLabel,
   onPress,
@@ -4195,7 +4223,7 @@ function PressableCardRow({
   right,
   style
 }) {
-  return /* @__PURE__ */ jsx33(
+  return /* @__PURE__ */ jsx34(
     Pressable8,
     {
       accessibilityRole: "button",
@@ -4203,23 +4231,23 @@ function PressableCardRow({
       disabled,
       onPress,
       style: ({ pressed }) => ({ opacity: disabled ? 0.6 : pressed ? 0.85 : 1 }),
-      children: /* @__PURE__ */ jsx33(Card, { padded: false, border: false, style, children: /* @__PURE__ */ jsxs20(View25, { style: { flexDirection: "row", alignItems: "center" }, children: [
+      children: /* @__PURE__ */ jsx34(Card, { padded: false, border: false, style, children: /* @__PURE__ */ jsxs20(View25, { style: { flexDirection: "row", alignItems: "center" }, children: [
         left,
         /* @__PURE__ */ jsxs20(View25, { style: { flex: 1, minWidth: 0 }, children: [
           title,
           subtitle ? subtitle : null
         ] }),
-        right ? /* @__PURE__ */ jsx33(View25, { style: { marginLeft: 16 }, children: right }) : null
+        right ? /* @__PURE__ */ jsx34(View25, { style: { marginLeft: 16 }, children: right }) : null
       ] }) })
     }
   );
 }
 
 // src/studio/ui/preview-panel/SectionTitle.tsx
-import { jsx as jsx34 } from "react/jsx-runtime";
+import { jsx as jsx35 } from "react/jsx-runtime";
 function SectionTitle({ children, marginTop }) {
   const theme = useTheme();
-  return /* @__PURE__ */ jsx34(
+  return /* @__PURE__ */ jsx35(
     Text,
     {
       style: {
@@ -4238,7 +4266,7 @@ function SectionTitle({ children, marginTop }) {
 }
 
 // src/studio/ui/preview-panel/PreviewCustomizeSection.tsx
-import { Fragment as Fragment4, jsx as jsx35, jsxs as jsxs21 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx36, jsxs as jsxs21 } from "react/jsx-runtime";
 function PreviewCustomizeSection({
   app,
   isOwner,
@@ -4249,7 +4277,7 @@ function PreviewCustomizeSection({
 }) {
   const theme = useTheme();
   return /* @__PURE__ */ jsxs21(Fragment4, { children: [
-    /* @__PURE__ */ jsx35(SectionTitle, { children: "Customize" }),
+    /* @__PURE__ */ jsx36(SectionTitle, { children: "Customize" }),
     showProcessing ? /* @__PURE__ */ jsxs21(
       View26,
       {
@@ -4264,7 +4292,7 @@ function PreviewCustomizeSection({
           marginBottom: theme.spacing.sm
         },
         children: [
-          /* @__PURE__ */ jsx35(
+          /* @__PURE__ */ jsx36(
             View26,
             {
               style: {
@@ -4276,17 +4304,17 @@ function PreviewCustomizeSection({
                 backgroundColor: withAlpha(theme.colors.warning, 0.1),
                 marginRight: theme.spacing.lg
               },
-              children: /* @__PURE__ */ jsx35(ActivityIndicator4, { color: theme.colors.warning, size: "small" })
+              children: /* @__PURE__ */ jsx36(ActivityIndicator4, { color: theme.colors.warning, size: "small" })
             }
           ),
           /* @__PURE__ */ jsxs21(View26, { style: { flex: 1, minWidth: 0 }, children: [
-            /* @__PURE__ */ jsx35(Text, { style: { color: theme.colors.text, fontSize: 16, lineHeight: 20, fontWeight: theme.typography.fontWeight.semibold }, children: app.status === "error" ? "Error" : "Processing" }),
-            /* @__PURE__ */ jsx35(Text, { style: { color: theme.colors.textMuted, fontSize: 12, lineHeight: 16, marginTop: 2 }, children: statusDescription(app.status, app.statusError) })
+            /* @__PURE__ */ jsx36(Text, { style: { color: theme.colors.text, fontSize: 16, lineHeight: 20, fontWeight: theme.typography.fontWeight.semibold }, children: app.status === "error" ? "Error" : "Processing" }),
+            /* @__PURE__ */ jsx36(Text, { style: { color: theme.colors.textMuted, fontSize: 12, lineHeight: 16, marginTop: 2 }, children: statusDescription(app.status, app.statusError) })
           ] })
         ]
       }
     ) : null,
-    /* @__PURE__ */ jsx35(
+    /* @__PURE__ */ jsx36(
       PressableCardRow,
       {
         accessibilityLabel: isOwner ? "Edit app" : "Remix app",
@@ -4299,7 +4327,7 @@ function PreviewCustomizeSection({
           borderColor: withAlpha(theme.colors.primary, 0.1),
           marginBottom: theme.spacing.sm
         },
-        left: /* @__PURE__ */ jsx35(
+        left: /* @__PURE__ */ jsx36(
           View26,
           {
             style: {
@@ -4311,15 +4339,15 @@ function PreviewCustomizeSection({
               backgroundColor: withAlpha(theme.colors.primary, 0.1),
               marginRight: theme.spacing.lg
             },
-            children: /* @__PURE__ */ jsx35(IconChat, { size: 20, colorToken: "primary" })
+            children: /* @__PURE__ */ jsx36(IconChat, { size: 20, colorToken: "primary" })
           }
         ),
-        title: /* @__PURE__ */ jsx35(Text, { style: { color: theme.colors.text, fontSize: 16, lineHeight: 20, fontWeight: theme.typography.fontWeight.semibold }, children: isOwner ? app.forkedFromAppId ? "Edit your Remix" : "Edit Your App" : "Remix App" }),
-        subtitle: /* @__PURE__ */ jsx35(Text, { style: { color: theme.colors.textMuted, fontSize: 12, lineHeight: 16, marginTop: 2 }, children: isOwner && app.forkedFromAppId ? "Make changes to your remix with chat" : shouldForkOnEdit ? "Chat to create your own copy and edit it" : "Chat to apply changes" }),
-        right: /* @__PURE__ */ jsx35(IconChevronRight, { size: 20, colorToken: "textMuted" })
+        title: /* @__PURE__ */ jsx36(Text, { style: { color: theme.colors.text, fontSize: 16, lineHeight: 20, fontWeight: theme.typography.fontWeight.semibold }, children: isOwner ? app.forkedFromAppId ? "Edit your Remix" : "Edit Your App" : "Remix App" }),
+        subtitle: /* @__PURE__ */ jsx36(Text, { style: { color: theme.colors.textMuted, fontSize: 12, lineHeight: 16, marginTop: 2 }, children: isOwner && app.forkedFromAppId ? "Make changes to your remix with chat" : shouldForkOnEdit ? "Chat to create your own copy and edit it" : "Chat to apply changes" }),
+        right: /* @__PURE__ */ jsx36(IconChevronRight, { size: 20, colorToken: "textMuted" })
       }
     ),
-    isOwner && onStartDraw ? /* @__PURE__ */ jsx35(
+    isOwner && onStartDraw ? /* @__PURE__ */ jsx36(
       PressableCardRow,
       {
         accessibilityLabel: "Draw changes",
@@ -4332,7 +4360,7 @@ function PreviewCustomizeSection({
           borderColor: withAlpha(theme.colors.danger, 0.1),
           marginBottom: theme.spacing.sm
         },
-        left: /* @__PURE__ */ jsx35(
+        left: /* @__PURE__ */ jsx36(
           View26,
           {
             style: {
@@ -4344,12 +4372,12 @@ function PreviewCustomizeSection({
               backgroundColor: withAlpha(theme.colors.danger, 0.1),
               marginRight: theme.spacing.lg
             },
-            children: /* @__PURE__ */ jsx35(IconDraw, { size: 20, colorToken: "danger" })
+            children: /* @__PURE__ */ jsx36(IconDraw, { size: 20, colorToken: "danger" })
           }
         ),
-        title: /* @__PURE__ */ jsx35(Text, { style: { color: theme.colors.text, fontSize: 16, lineHeight: 20, fontWeight: theme.typography.fontWeight.semibold }, children: "Draw Changes" }),
-        subtitle: /* @__PURE__ */ jsx35(Text, { style: { color: theme.colors.textMuted, fontSize: 12, lineHeight: 16, marginTop: 2 }, children: "Annotate the app with drawings" }),
-        right: /* @__PURE__ */ jsx35(IconChevronRight, { size: 20, colorToken: "textMuted" })
+        title: /* @__PURE__ */ jsx36(Text, { style: { color: theme.colors.text, fontSize: 16, lineHeight: 20, fontWeight: theme.typography.fontWeight.semibold }, children: "Draw Changes" }),
+        subtitle: /* @__PURE__ */ jsx36(Text, { style: { color: theme.colors.textMuted, fontSize: 12, lineHeight: 16, marginTop: 2 }, children: "Annotate the app with drawings" }),
+        right: /* @__PURE__ */ jsx36(IconChevronRight, { size: 20, colorToken: "textMuted" })
       }
     ) : null
   ] });
@@ -4368,7 +4396,7 @@ import { Ban, Check as Check3, CheckCheck, ChevronDown as ChevronDown2 } from "l
 // src/components/primitives/MarkdownText.tsx
 import { Platform as Platform4, View as View27 } from "react-native";
 import Markdown from "react-native-markdown-display";
-import { jsx as jsx36 } from "react/jsx-runtime";
+import { jsx as jsx37 } from "react/jsx-runtime";
 function MarkdownText({ markdown, variant = "chat", bodyColor, style }) {
   const theme = useTheme();
   const isDark = theme.scheme === "dark";
@@ -4379,7 +4407,7 @@ function MarkdownText({ markdown, variant = "chat", bodyColor, style }) {
   const codeTextColor = isDark ? "#FFFFFF" : theme.colors.text;
   const paragraphBottom = variant === "mergeRequest" ? 8 : 6;
   const baseLineHeight = variant === "mergeRequest" ? 22 : 20;
-  return /* @__PURE__ */ jsx36(View27, { style, children: /* @__PURE__ */ jsx36(
+  return /* @__PURE__ */ jsx37(View27, { style, children: /* @__PURE__ */ jsx37(
     Markdown,
     {
       style: {
@@ -4459,7 +4487,7 @@ function useControlledExpansion(props) {
 }
 
 // src/components/merge-requests/MergeRequestStatusCard.tsx
-import { jsx as jsx37, jsxs as jsxs22 } from "react/jsx-runtime";
+import { jsx as jsx38, jsxs as jsxs22 } from "react/jsx-runtime";
 function MergeRequestStatusCard({
   mergeRequest,
   expanded: expandedProp,
@@ -4512,7 +4540,7 @@ function MergeRequestStatusCard({
       useNativeDriver: true
     }).start();
   }, [expanded, rotate]);
-  return /* @__PURE__ */ jsx37(Pressable9, { onPress: () => setExpanded(!expanded), style: ({ pressed }) => [{ opacity: pressed ? 0.95 : 1 }], children: /* @__PURE__ */ jsxs22(
+  return /* @__PURE__ */ jsx38(Pressable9, { onPress: () => setExpanded(!expanded), style: ({ pressed }) => [{ opacity: pressed ? 0.95 : 1 }], children: /* @__PURE__ */ jsxs22(
     Card,
     {
       padded: false,
@@ -4526,10 +4554,10 @@ function MergeRequestStatusCard({
       ],
       children: [
         /* @__PURE__ */ jsxs22(View28, { style: { flexDirection: "row", alignItems: "center", gap: theme.spacing.lg }, children: [
-          /* @__PURE__ */ jsx37(View28, { style: { width: 40, height: 40, borderRadius: 999, alignItems: "center", justifyContent: "center", backgroundColor: bgColor }, children: /* @__PURE__ */ jsx37(StatusIcon, { size: 20, color: iconColor }) }),
+          /* @__PURE__ */ jsx38(View28, { style: { width: 40, height: 40, borderRadius: 999, alignItems: "center", justifyContent: "center", backgroundColor: bgColor }, children: /* @__PURE__ */ jsx38(StatusIcon, { size: 20, color: iconColor }) }),
           /* @__PURE__ */ jsxs22(View28, { style: { flex: 1, minWidth: 0 }, children: [
             /* @__PURE__ */ jsxs22(View28, { style: { flexDirection: "row", alignItems: "center", justifyContent: "space-between" }, children: [
-              /* @__PURE__ */ jsx37(
+              /* @__PURE__ */ jsx38(
                 Text,
                 {
                   style: {
@@ -4543,11 +4571,11 @@ function MergeRequestStatusCard({
                   children: statusText
                 }
               ),
-              headerTimeAgo ? /* @__PURE__ */ jsx37(Text, { style: { fontSize: 10, lineHeight: 14, marginLeft: theme.spacing.sm, color: withAlpha(theme.colors.textMuted, 0.6) }, children: headerTimeAgo }) : null
+              headerTimeAgo ? /* @__PURE__ */ jsx38(Text, { style: { fontSize: 10, lineHeight: 14, marginLeft: theme.spacing.sm, color: withAlpha(theme.colors.textMuted, 0.6) }, children: headerTimeAgo }) : null
             ] }),
-            /* @__PURE__ */ jsx37(Text, { style: { fontSize: 12, lineHeight: 16, color: theme.colors.textMuted }, numberOfLines: 1, children: mergeRequest.title ?? "Untitled merge request" })
+            /* @__PURE__ */ jsx38(Text, { style: { fontSize: 12, lineHeight: 16, color: theme.colors.textMuted }, numberOfLines: 1, children: mergeRequest.title ?? "Untitled merge request" })
           ] }),
-          headerRight ? /* @__PURE__ */ jsx37(View28, { children: headerRight }) : /* @__PURE__ */ jsx37(
+          headerRight ? /* @__PURE__ */ jsx38(View28, { children: headerRight }) : /* @__PURE__ */ jsx38(
             Animated7.View,
             {
               style: {
@@ -4557,12 +4585,12 @@ function MergeRequestStatusCard({
                   }
                 ]
               },
-              children: /* @__PURE__ */ jsx37(ChevronDown2, { size: 20, color: withAlpha(theme.colors.textMuted, 0.4) })
+              children: /* @__PURE__ */ jsx38(ChevronDown2, { size: 20, color: withAlpha(theme.colors.textMuted, 0.4) })
             }
           )
         ] }),
         expanded ? /* @__PURE__ */ jsxs22(View28, { style: { marginTop: 16, marginLeft: 56 }, children: [
-          /* @__PURE__ */ jsx37(
+          /* @__PURE__ */ jsx38(
             Text,
             {
               style: {
@@ -4576,7 +4604,7 @@ function MergeRequestStatusCard({
               children: status.text
             }
           ),
-          createdTimeAgo ? /* @__PURE__ */ jsx37(
+          createdTimeAgo ? /* @__PURE__ */ jsx38(
             Text,
             {
               style: {
@@ -4587,8 +4615,8 @@ function MergeRequestStatusCard({
               children: createdTimeAgo
             }
           ) : null,
-          /* @__PURE__ */ jsx37(Text, { style: { fontSize: 16, fontWeight: "600", color: textColor, marginBottom: 8 }, children: mergeRequest.title ?? "Untitled merge request" }),
-          mergeRequest.description ? /* @__PURE__ */ jsx37(MarkdownText, { markdown: mergeRequest.description, variant: "mergeRequest" }) : null
+          /* @__PURE__ */ jsx38(Text, { style: { fontSize: 16, fontWeight: "600", color: textColor, marginBottom: 8 }, children: mergeRequest.title ?? "Untitled merge request" }),
+          mergeRequest.description ? /* @__PURE__ */ jsx38(MarkdownText, { markdown: mergeRequest.description, variant: "mergeRequest" }) : null
         ] }) : null
       ]
     }
@@ -4607,7 +4635,7 @@ import { Check as Check4, ChevronDown as ChevronDown3, Play as Play3, X as X3 }
 // src/components/merge-requests/ReviewMergeRequestActionButton.tsx
 import * as React25 from "react";
 import { Pressable as Pressable10, View as View29 } from "react-native";
-import { jsx as jsx38 } from "react/jsx-runtime";
+import { jsx as jsx39 } from "react/jsx-runtime";
 function ReviewMergeRequestActionButton({
   accessibilityLabel,
   backgroundColor,
@@ -4622,7 +4650,7 @@ function ReviewMergeRequestActionButton({
   const paddingHorizontal = iconOnly ? 0 : 16;
   const paddingVertical = iconOnly ? 0 : 8;
   const opacity = disabled ? 0.5 : pressed ? 0.9 : 1;
-  return /* @__PURE__ */ jsx38(
+  return /* @__PURE__ */ jsx39(
     View29,
     {
       style: {
@@ -4637,7 +4665,7 @@ function ReviewMergeRequestActionButton({
         paddingVertical,
         justifyContent: "center"
       },
-      children: /* @__PURE__ */ jsx38(
+      children: /* @__PURE__ */ jsx39(
         Pressable10,
         {
           accessibilityRole: "button",
@@ -4661,7 +4689,7 @@ function ReviewMergeRequestActionButton({
 }
 
 // src/components/merge-requests/ReviewMergeRequestCard.tsx
-import { jsx as jsx39, jsxs as jsxs23 } from "react/jsx-runtime";
+import { jsx as jsx40, jsxs as jsxs23 } from "react/jsx-runtime";
 function ReviewMergeRequestCard({
   mr,
   index,
@@ -4685,7 +4713,7 @@ function ReviewMergeRequestCard({
     Animated8.timing(rotate, { toValue: isExpanded ? 1 : 0, duration: 200, useNativeDriver: true }).start();
   }, [isExpanded, rotate]);
   const position = total > 1 ? `${index + 1}/${total}` : "Merge request";
-  return /* @__PURE__ */ jsx39(Pressable11, { onPress: onToggle, style: ({ pressed }) => ({ opacity: pressed ? 0.95 : 1 }), children: /* @__PURE__ */ jsxs23(
+  return /* @__PURE__ */ jsx40(Pressable11, { onPress: onToggle, style: ({ pressed }) => ({ opacity: pressed ? 0.95 : 1 }), children: /* @__PURE__ */ jsxs23(
     Card,
     {
       padded: false,
@@ -4699,9 +4727,9 @@ function ReviewMergeRequestCard({
       ],
       children: [
         /* @__PURE__ */ jsxs23(View30, { style: { flexDirection: "row", alignItems: "center", gap: 12 }, children: [
-          /* @__PURE__ */ jsx39(Avatar, { size: 40, uri: (creator == null ? void 0 : creator.avatar) ?? null, name: (creator == null ? void 0 : creator.name) ?? void 0 }),
+          /* @__PURE__ */ jsx40(Avatar, { size: 40, uri: (creator == null ? void 0 : creator.avatar) ?? null, name: (creator == null ? void 0 : creator.name) ?? void 0 }),
           /* @__PURE__ */ jsxs23(View30, { style: { flex: 1, minWidth: 0 }, children: [
-            /* @__PURE__ */ jsx39(
+            /* @__PURE__ */ jsx40(
               Text,
               {
                 style: { fontWeight: theme.typography.fontWeight.semibold, color: theme.colors.text, fontSize: 16, lineHeight: 20 },
@@ -4715,18 +4743,18 @@ function ReviewMergeRequestCard({
               position
             ] })
           ] }),
-          /* @__PURE__ */ jsx39(
+          /* @__PURE__ */ jsx40(
             Animated8.View,
             {
               style: {
                 transform: [{ rotate: rotate.interpolate({ inputRange: [0, 1], outputRange: ["0deg", "180deg"] }) }]
               },
-              children: /* @__PURE__ */ jsx39(ChevronDown3, { size: 20, color: withAlpha(theme.colors.textMuted, 0.4) })
+              children: /* @__PURE__ */ jsx40(ChevronDown3, { size: 20, color: withAlpha(theme.colors.textMuted, 0.4) })
             }
           )
         ] }),
         isExpanded ? /* @__PURE__ */ jsxs23(View30, { style: { marginTop: 16 }, children: [
-          /* @__PURE__ */ jsx39(
+          /* @__PURE__ */ jsx40(
             Text,
             {
               style: {
@@ -4740,13 +4768,13 @@ function ReviewMergeRequestCard({
               children: status.text
             }
           ),
-          /* @__PURE__ */ jsx39(Text, { style: { color: theme.colors.textMuted, fontSize: 12, lineHeight: 16, marginBottom: 12 }, children: creator ? `${creator.approvedOpenedMergeRequests} approved merge${creator.approvedOpenedMergeRequests !== 1 ? "s" : ""}` : "Loading stats..." }),
-          mr.description ? /* @__PURE__ */ jsx39(MarkdownText, { markdown: mr.description, variant: "mergeRequest" }) : null
+          /* @__PURE__ */ jsx40(Text, { style: { color: theme.colors.textMuted, fontSize: 12, lineHeight: 16, marginBottom: 12 }, children: creator ? `${creator.approvedOpenedMergeRequests} approved merge${creator.approvedOpenedMergeRequests !== 1 ? "s" : ""}` : "Loading stats..." }),
+          mr.description ? /* @__PURE__ */ jsx40(MarkdownText, { markdown: mr.description, variant: "mergeRequest" }) : null
         ] }) : null,
-        /* @__PURE__ */ jsx39(View30, { style: { height: 1, backgroundColor: withAlpha(theme.colors.borderStrong, 0.5), marginTop: 12, marginBottom: 12 } }),
+        /* @__PURE__ */ jsx40(View30, { style: { height: 1, backgroundColor: withAlpha(theme.colors.borderStrong, 0.5), marginTop: 12, marginBottom: 12 } }),
         /* @__PURE__ */ jsxs23(View30, { style: { flexDirection: "row", alignItems: "center", justifyContent: "space-between" }, children: [
           /* @__PURE__ */ jsxs23(View30, { style: { flexDirection: "row", gap: 8 }, children: [
-            /* @__PURE__ */ jsx39(
+            /* @__PURE__ */ jsx40(
               ReviewMergeRequestActionButton,
               {
                 accessibilityLabel: "Reject",
@@ -4755,12 +4783,12 @@ function ReviewMergeRequestCard({
                 onPress: onReject,
                 iconOnly: !isExpanded,
                 children: /* @__PURE__ */ jsxs23(View30, { style: { flexDirection: "row", alignItems: "center", gap: isExpanded ? 4 : 0 }, children: [
-                  /* @__PURE__ */ jsx39(X3, { size: 18, color: "#FFFFFF" }),
-                  isExpanded ? /* @__PURE__ */ jsx39(Text, { style: { fontSize: 13, color: "#FFFFFF", fontWeight: theme.typography.fontWeight.semibold }, children: "Reject" }) : null
+                  /* @__PURE__ */ jsx40(X3, { size: 18, color: "#FFFFFF" }),
+                  isExpanded ? /* @__PURE__ */ jsx40(Text, { style: { fontSize: 13, color: "#FFFFFF", fontWeight: theme.typography.fontWeight.semibold }, children: "Reject" }) : null
                 ] })
               }
             ),
-            /* @__PURE__ */ jsx39(
+            /* @__PURE__ */ jsx40(
               ReviewMergeRequestActionButton,
               {
                 accessibilityLabel: !canAct ? "Not actionable" : isProcessing ? "Processing" : "Approve",
@@ -4769,16 +4797,16 @@ function ReviewMergeRequestCard({
                 onPress: onApprove,
                 iconOnly: !isExpanded,
                 children: isProcessing ? /* @__PURE__ */ jsxs23(View30, { style: { flexDirection: "row", alignItems: "center", gap: isExpanded ? 4 : 0 }, children: [
-                  /* @__PURE__ */ jsx39(ActivityIndicator5, { size: "small", color: "#FFFFFF" }),
-                  isExpanded ? /* @__PURE__ */ jsx39(Text, { style: { fontSize: 13, color: "#FFFFFF", fontWeight: theme.typography.fontWeight.semibold }, children: "Processing" }) : null
+                  /* @__PURE__ */ jsx40(ActivityIndicator5, { size: "small", color: "#FFFFFF" }),
+                  isExpanded ? /* @__PURE__ */ jsx40(Text, { style: { fontSize: 13, color: "#FFFFFF", fontWeight: theme.typography.fontWeight.semibold }, children: "Processing" }) : null
                 ] }) : /* @__PURE__ */ jsxs23(View30, { style: { flexDirection: "row", alignItems: "center", gap: isExpanded ? 4 : 0 }, children: [
-                  /* @__PURE__ */ jsx39(Check4, { size: 18, color: "#FFFFFF" }),
-                  isExpanded ? /* @__PURE__ */ jsx39(Text, { style: { fontSize: 13, color: "#FFFFFF", fontWeight: theme.typography.fontWeight.semibold }, children: "Approve" }) : null
+                  /* @__PURE__ */ jsx40(Check4, { size: 18, color: "#FFFFFF" }),
+                  isExpanded ? /* @__PURE__ */ jsx40(Text, { style: { fontSize: 13, color: "#FFFFFF", fontWeight: theme.typography.fontWeight.semibold }, children: "Approve" }) : null
                 ] })
               }
             )
           ] }),
-          /* @__PURE__ */ jsx39(
+          /* @__PURE__ */ jsx40(
             ReviewMergeRequestActionButton,
             {
               accessibilityLabel: "Test",
@@ -4786,9 +4814,9 @@ function ReviewMergeRequestCard({
               disabled: isBuilding || isTestingThis,
               onPress: onTest,
               iconOnly: !isExpanded,
-              children: isTestingThis ? /* @__PURE__ */ jsx39(ActivityIndicator5, { size: "small", color: "#888" }) : /* @__PURE__ */ jsxs23(View30, { style: { flexDirection: "row", alignItems: "center", gap: isExpanded ? 4 : 0 }, children: [
-                /* @__PURE__ */ jsx39(Play3, { size: 14, color: theme.colors.text }),
-                isExpanded ? /* @__PURE__ */ jsx39(Text, { style: { fontSize: 13, color: theme.colors.text, fontWeight: theme.typography.fontWeight.semibold }, children: "Test" }) : null
+              children: isTestingThis ? /* @__PURE__ */ jsx40(ActivityIndicator5, { size: "small", color: "#888" }) : /* @__PURE__ */ jsxs23(View30, { style: { flexDirection: "row", alignItems: "center", gap: isExpanded ? 4 : 0 }, children: [
+                /* @__PURE__ */ jsx40(Play3, { size: 14, color: theme.colors.text }),
+                isExpanded ? /* @__PURE__ */ jsx40(Text, { style: { fontSize: 13, color: theme.colors.text, fontWeight: theme.typography.fontWeight.semibold }, children: "Test" }) : null
               ] })
             }
           )
@@ -4799,7 +4827,7 @@ function ReviewMergeRequestCard({
 }
 
 // src/components/merge-requests/ReviewMergeRequestCarousel.tsx
-import { jsx as jsx40, jsxs as jsxs24 } from "react/jsx-runtime";
+import { jsx as jsx41, jsxs as jsxs24 } from "react/jsx-runtime";
 function ReviewMergeRequestCarousel({
   mergeRequests,
   creatorStatsById,
@@ -4822,7 +4850,7 @@ function ReviewMergeRequestCarousel({
   const dotColor = theme.scheme === "dark" ? "#FFFFFF" : "#000000";
   if (mergeRequests.length === 0) return null;
   return /* @__PURE__ */ jsxs24(View31, { style: [{ marginHorizontal: -theme.spacing.lg }, style], children: [
-    /* @__PURE__ */ jsx40(
+    /* @__PURE__ */ jsx41(
       FlatList,
       {
         horizontal: true,
@@ -4830,13 +4858,13 @@ function ReviewMergeRequestCarousel({
         keyExtractor: (mr) => mr.id,
         showsHorizontalScrollIndicator: false,
         contentContainerStyle: { paddingHorizontal: theme.spacing.lg, paddingVertical: theme.spacing.sm },
-        ItemSeparatorComponent: () => /* @__PURE__ */ jsx40(View31, { style: { width: gap } }),
+        ItemSeparatorComponent: () => /* @__PURE__ */ jsx41(View31, { style: { width: gap } }),
         snapToAlignment: "start",
         decelerationRate: "fast",
         snapToInterval: snapInterval,
         disableIntervalMomentum: true,
         style: { paddingRight: peekAmount },
-        ListFooterComponent: /* @__PURE__ */ jsx40(View31, { style: { width: peekAmount } }),
+        ListFooterComponent: /* @__PURE__ */ jsx41(View31, { style: { width: peekAmount } }),
         onScroll: Animated9.event([{ nativeEvent: { contentOffset: { x: carouselScrollX } } }], {
           useNativeDriver: false
         }),
@@ -4848,7 +4876,7 @@ function ReviewMergeRequestCarousel({
           const isProcessing = Boolean(processingMrId && processingMrId === item.id);
           const isAnyProcessing = Boolean(processingMrId);
           const isTestingThis = Boolean(testingMrId && testingMrId === item.id);
-          return /* @__PURE__ */ jsx40(View31, { style: { width: cardWidth }, children: /* @__PURE__ */ jsx40(
+          return /* @__PURE__ */ jsx41(View31, { style: { width: cardWidth }, children: /* @__PURE__ */ jsx41(
             ReviewMergeRequestCard,
             {
               mr: item,
@@ -4869,7 +4897,7 @@ function ReviewMergeRequestCarousel({
         }
       }
     ),
-    mergeRequests.length >= 1 ? /* @__PURE__ */ jsx40(View31, { style: { flexDirection: "row", justifyContent: "center", columnGap: 8, marginTop: theme.spacing.md }, children: mergeRequests.map((mr, index) => {
+    mergeRequests.length >= 1 ? /* @__PURE__ */ jsx41(View31, { style: { flexDirection: "row", justifyContent: "center", columnGap: 8, marginTop: theme.spacing.md }, children: mergeRequests.map((mr, index) => {
       const inputRange = [(index - 1) * snapInterval, index * snapInterval, (index + 1) * snapInterval];
       const scale = carouselScrollX.interpolate({
         inputRange,
@@ -4881,7 +4909,7 @@ function ReviewMergeRequestCarousel({
         outputRange: [0.4, 1, 0.4],
         extrapolate: "clamp"
       });
-      return /* @__PURE__ */ jsx40(
+      return /* @__PURE__ */ jsx41(
         Animated9.View,
         {
           style: {
@@ -4900,7 +4928,7 @@ function ReviewMergeRequestCarousel({
 }
 
 // src/studio/ui/preview-panel/PreviewCollaborateSection.tsx
-import { Fragment as Fragment5, jsx as jsx41, jsxs as jsxs25 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx42, jsxs as jsxs25 } from "react/jsx-runtime";
 function PreviewCollaborateSection({
   canSubmitMergeRequest,
   incomingMergeRequests,
@@ -4921,8 +4949,8 @@ function PreviewCollaborateSection({
   if (!hasSection) return null;
   const showActionsSubtitle = canSubmitMergeRequest && onSubmitMergeRequest || onTestMr && incomingMergeRequests.length > 0;
   return /* @__PURE__ */ jsxs25(Fragment5, { children: [
-    /* @__PURE__ */ jsx41(SectionTitle, { marginTop: theme.spacing.xl, children: "Collaborate" }),
-    showActionsSubtitle ? /* @__PURE__ */ jsx41(
+    /* @__PURE__ */ jsx42(SectionTitle, { marginTop: theme.spacing.xl, children: "Collaborate" }),
+    showActionsSubtitle ? /* @__PURE__ */ jsx42(
       Text,
       {
         style: {
@@ -4937,7 +4965,7 @@ function PreviewCollaborateSection({
         children: "Actions"
       }
     ) : null,
-    canSubmitMergeRequest && onSubmitMergeRequest ? /* @__PURE__ */ jsx41(
+    canSubmitMergeRequest && onSubmitMergeRequest ? /* @__PURE__ */ jsx42(
       PressableCardRow,
       {
         accessibilityLabel: "Submit merge request",
@@ -4968,7 +4996,7 @@ function PreviewCollaborateSection({
           borderColor: withAlpha("#03DAC6", 0.2),
           marginBottom: theme.spacing.sm
         },
-        left: /* @__PURE__ */ jsx41(
+        left: /* @__PURE__ */ jsx42(
           View32,
           {
             style: {
@@ -4980,15 +5008,15 @@ function PreviewCollaborateSection({
               backgroundColor: withAlpha("#03DAC6", 0.1),
               marginRight: theme.spacing.lg
             },
-            children: submittingMr ? /* @__PURE__ */ jsx41(ActivityIndicator6, { color: "#03DAC6", size: "small" }) : /* @__PURE__ */ jsx41(merge_default, { width: 20, height: 20, color: "#03DAC6" })
+            children: submittingMr ? /* @__PURE__ */ jsx42(ActivityIndicator6, { color: "#03DAC6", size: "small" }) : /* @__PURE__ */ jsx42(MergeIcon, { width: 20, height: 20, color: "#03DAC6" })
           }
         ),
-        title: /* @__PURE__ */ jsx41(Text, { style: { color: theme.colors.text, fontSize: 16, lineHeight: 20, fontWeight: theme.typography.fontWeight.semibold }, children: "Submit your new changes" }),
-        subtitle: /* @__PURE__ */ jsx41(Text, { style: { color: theme.colors.textMuted, fontSize: 12, lineHeight: 16, marginTop: 2 }, children: "Ask to merge this remix to the original app" }),
-        right: /* @__PURE__ */ jsx41(Send2, { size: 16, color: "#03DAC6" })
+        title: /* @__PURE__ */ jsx42(Text, { style: { color: theme.colors.text, fontSize: 16, lineHeight: 20, fontWeight: theme.typography.fontWeight.semibold }, children: "Submit your new changes" }),
+        subtitle: /* @__PURE__ */ jsx42(Text, { style: { color: theme.colors.textMuted, fontSize: 12, lineHeight: 16, marginTop: 2 }, children: "Ask to merge this remix to the original app" }),
+        right: /* @__PURE__ */ jsx42(Send2, { size: 16, color: "#03DAC6" })
       }
     ) : null,
-    onTestMr && incomingMergeRequests.length > 0 ? /* @__PURE__ */ jsx41(
+    onTestMr && incomingMergeRequests.length > 0 ? /* @__PURE__ */ jsx42(
       ReviewMergeRequestCarousel,
       {
         mergeRequests: incomingMergeRequests,
@@ -5002,7 +5030,7 @@ function PreviewCollaborateSection({
       }
     ) : null,
     outgoingMergeRequests.length > 0 ? /* @__PURE__ */ jsxs25(Fragment5, { children: [
-      /* @__PURE__ */ jsx41(
+      /* @__PURE__ */ jsx42(
         Text,
         {
           style: {
@@ -5018,7 +5046,7 @@ function PreviewCollaborateSection({
           children: "History"
         }
       ),
-      outgoingMergeRequests.map((mr) => /* @__PURE__ */ jsx41(View32, { style: { marginBottom: theme.spacing.sm }, children: /* @__PURE__ */ jsx41(MergeRequestStatusCard, { mergeRequest: toMergeRequestSummary(mr) }) }, mr.id))
+      outgoingMergeRequests.map((mr) => /* @__PURE__ */ jsx42(View32, { style: { marginBottom: theme.spacing.sm }, children: /* @__PURE__ */ jsx42(MergeRequestStatusCard, { mergeRequest: toMergeRequestSummary(mr) }) }, mr.id))
     ] }) : null
   ] });
 }
@@ -5309,7 +5337,7 @@ function usePreviewPanelData(params) {
 }
 
 // src/studio/ui/PreviewPanel.tsx
-import { jsx as jsx42, jsxs as jsxs26 } from "react/jsx-runtime";
+import { jsx as jsx43, jsxs as jsxs26 } from "react/jsx-runtime";
 function PreviewPanel({
   app,
   loading,
@@ -5340,16 +5368,16 @@ function PreviewPanel({
     onOpenComments,
     commentCountOverride
   });
-  const header = /* @__PURE__ */ jsx42(PreviewPanelHeader, { isOwner, onClose, onNavigateHome, onGoToChat });
+  const header = /* @__PURE__ */ jsx43(PreviewPanelHeader, { isOwner, onClose, onNavigateHome, onGoToChat });
   if (loading || !app) {
-    return /* @__PURE__ */ jsx42(PreviewPage, { header, children: /* @__PURE__ */ jsxs26(View33, { style: { flex: 1, justifyContent: "center", alignItems: "center", padding: 24 }, children: [
-      /* @__PURE__ */ jsx42(ActivityIndicator7, {}),
-      /* @__PURE__ */ jsx42(View33, { style: { height: 12 } }),
-      /* @__PURE__ */ jsx42(Text, { variant: "bodyMuted", children: "Loading app\u2026" })
+    return /* @__PURE__ */ jsx43(PreviewPage, { header, children: /* @__PURE__ */ jsxs26(View33, { style: { flex: 1, justifyContent: "center", alignItems: "center", padding: 24 }, children: [
+      /* @__PURE__ */ jsx43(ActivityIndicator7, {}),
+      /* @__PURE__ */ jsx43(View33, { style: { height: 12 } }),
+      /* @__PURE__ */ jsx43(Text, { variant: "bodyMuted", children: "Loading app\u2026" })
     ] }) });
   }
   return /* @__PURE__ */ jsxs26(PreviewPage, { header, children: [
-    /* @__PURE__ */ jsx42(
+    /* @__PURE__ */ jsx43(
       PreviewHeroSection,
       {
         appStatus: app.status,
@@ -5367,8 +5395,8 @@ function PreviewPanel({
         }
       }
     ),
-    /* @__PURE__ */ jsx42(PreviewMetaSection, { app, isOwner, creator, downloadsCount: insights.downloads }),
-    /* @__PURE__ */ jsx42(
+    /* @__PURE__ */ jsx43(PreviewMetaSection, { app, isOwner, creator, downloadsCount: insights.downloads }),
+    /* @__PURE__ */ jsx43(
       PreviewCustomizeSection,
       {
         app,
@@ -5379,7 +5407,7 @@ function PreviewPanel({
         onStartDraw
       }
     ),
-    /* @__PURE__ */ jsx42(
+    /* @__PURE__ */ jsx43(
       PreviewCollaborateSection,
       {
         canSubmitMergeRequest,
@@ -5415,7 +5443,7 @@ import { BottomSheetFlatList } from "@gorhom/bottom-sheet";
 // src/components/chat/ChatMessageBubble.tsx
 import { View as View34 } from "react-native";
 import { CheckCheck as CheckCheck2, GitMerge as GitMerge2 } from "lucide-react-native";
-import { jsx as jsx43, jsxs as jsxs27 } from "react/jsx-runtime";
+import { jsx as jsx44, jsxs as jsxs27 } from "react/jsx-runtime";
 function ChatMessageBubble({ message, renderContent, style }) {
   var _a, _b;
   const theme = useTheme();
@@ -5429,7 +5457,7 @@ function ChatMessageBubble({ message, renderContent, style }) {
   const bubbleVariant = isHuman ? "surface" : "surfaceRaised";
   const cornerStyle = isHuman ? { borderTopRightRadius: 0 } : { borderTopLeftRadius: 0 };
   const bodyColor = metaStatus === "success" ? theme.colors.success : metaStatus === "error" ? theme.colors.danger : void 0;
-  return /* @__PURE__ */ jsx43(View34, { style: [align, style], children: /* @__PURE__ */ jsx43(
+  return /* @__PURE__ */ jsx44(View34, { style: [align, style], children: /* @__PURE__ */ jsx44(
     Surface,
     {
       variant: bubbleVariant,
@@ -5445,9 +5473,9 @@ function ChatMessageBubble({ message, renderContent, style }) {
         cornerStyle
       ],
       children: /* @__PURE__ */ jsxs27(View34, { style: { flexDirection: "row", alignItems: "center" }, children: [
-        isMergeCompleted ? /* @__PURE__ */ jsx43(CheckCheck2, { size: 16, color: theme.colors.success, style: { marginRight: theme.spacing.sm } }) : null,
-        isMergeApproved ? /* @__PURE__ */ jsx43(GitMerge2, { size: 16, color: theme.colors.text, style: { marginRight: theme.spacing.sm } }) : null,
-        /* @__PURE__ */ jsx43(View34, { style: { flexShrink: 1, minWidth: 0 }, children: renderContent ? renderContent(message) : /* @__PURE__ */ jsx43(MarkdownText, { markdown: message.content, variant: "chat", bodyColor }) })
+        isMergeCompleted ? /* @__PURE__ */ jsx44(CheckCheck2, { size: 16, color: theme.colors.success, style: { marginRight: theme.spacing.sm } }) : null,
+        isMergeApproved ? /* @__PURE__ */ jsx44(GitMerge2, { size: 16, color: theme.colors.text, style: { marginRight: theme.spacing.sm } }) : null,
+        /* @__PURE__ */ jsx44(View34, { style: { flexShrink: 1, minWidth: 0 }, children: renderContent ? renderContent(message) : /* @__PURE__ */ jsx44(MarkdownText, { markdown: message.content, variant: "chat", bodyColor }) })
       ] })
     }
   ) });
@@ -5456,7 +5484,7 @@ function ChatMessageBubble({ message, renderContent, style }) {
 // src/components/chat/TypingIndicator.tsx
 import * as React31 from "react";
 import { Animated as Animated10, View as View35 } from "react-native";
-import { jsx as jsx44 } from "react/jsx-runtime";
+import { jsx as jsx45 } from "react/jsx-runtime";
 function TypingIndicator({ style }) {
   const theme = useTheme();
   const dotColor = theme.colors.textSubtle;
@@ -5479,7 +5507,7 @@ function TypingIndicator({ style }) {
       loops.forEach((l) => l.stop());
     };
   }, [anims]);
-  return /* @__PURE__ */ jsx44(View35, { style: [{ flexDirection: "row", alignItems: "center" }, style], children: anims.map((a, i) => /* @__PURE__ */ jsx44(
+  return /* @__PURE__ */ jsx45(View35, { style: [{ flexDirection: "row", alignItems: "center" }, style], children: anims.map((a, i) => /* @__PURE__ */ jsx45(
     Animated10.View,
     {
       style: {
@@ -5497,7 +5525,7 @@ function TypingIndicator({ style }) {
 }
 
 // src/components/chat/ChatMessageList.tsx
-import { jsx as jsx45 } from "react/jsx-runtime";
+import { jsx as jsx46 } from "react/jsx-runtime";
 var ChatMessageList = React32.forwardRef(
   ({
     messages,
@@ -5556,7 +5584,7 @@ var ChatMessageList = React32.forwardRef(
       }
       return void 0;
     }, [showTypingIndicator, scrollToBottom]);
-    return /* @__PURE__ */ jsx45(
+    return /* @__PURE__ */ jsx46(
       BottomSheetFlatList,
       {
         ref: listRef,
@@ -5573,8 +5601,8 @@ var ChatMessageList = React32.forwardRef(
           },
           contentStyle
         ],
-        renderItem: ({ item, index }) => /* @__PURE__ */ jsx45(View36, { style: { marginTop: index === 0 ? 0 : theme.spacing.sm }, children: /* @__PURE__ */ jsx45(ChatMessageBubble, { message: item, renderContent: renderMessageContent }) }),
-        ListFooterComponent: showTypingIndicator ? /* @__PURE__ */ jsx45(View36, { style: { marginTop: theme.spacing.sm, alignSelf: "flex-start", paddingHorizontal: theme.spacing.lg }, children: /* @__PURE__ */ jsx45(TypingIndicator, {}) }) : null,
+        renderItem: ({ item, index }) => /* @__PURE__ */ jsx46(View36, { style: { marginTop: index === 0 ? 0 : theme.spacing.sm }, children: /* @__PURE__ */ jsx46(ChatMessageBubble, { message: item, renderContent: renderMessageContent }) }),
+        ListFooterComponent: showTypingIndicator ? /* @__PURE__ */ jsx46(View36, { style: { marginTop: theme.spacing.sm, alignSelf: "flex-start", paddingHorizontal: theme.spacing.lg }, children: /* @__PURE__ */ jsx46(TypingIndicator, {}) }) : null,
         maintainVisibleContentPosition: { minIndexForVisible: 0, autoscrollToTopThreshold: nearBottomThreshold }
       }
     );
@@ -5583,7 +5611,7 @@ var ChatMessageList = React32.forwardRef(
 ChatMessageList.displayName = "ChatMessageList";
 
 // src/components/chat/ChatPage.tsx
-import { jsx as jsx46, jsxs as jsxs28 } from "react/jsx-runtime";
+import { jsx as jsx47, jsxs as jsxs28 } from "react/jsx-runtime";
 function ChatPage({
   header,
   messages,
@@ -5599,10 +5627,10 @@ function ChatPage({
   const theme = useTheme();
   const [composerHeight, setComposerHeight] = React33.useState(0);
   return /* @__PURE__ */ jsxs28(View37, { style: [{ flex: 1 }, style], children: [
-    header ? /* @__PURE__ */ jsx46(View37, { children: header }) : null,
-    topBanner ? /* @__PURE__ */ jsx46(View37, { style: { paddingHorizontal: theme.spacing.lg, paddingTop: theme.spacing.sm }, children: topBanner }) : null,
+    header ? /* @__PURE__ */ jsx47(View37, { children: header }) : null,
+    topBanner ? /* @__PURE__ */ jsx47(View37, { style: { paddingHorizontal: theme.spacing.lg, paddingTop: theme.spacing.sm }, children: topBanner }) : null,
     /* @__PURE__ */ jsxs28(View37, { style: { flex: 1 }, children: [
-      /* @__PURE__ */ jsx46(
+      /* @__PURE__ */ jsx47(
         ChatMessageList,
         {
           ref: listRef,
@@ -5615,7 +5643,7 @@ function ChatPage({
       ),
       overlay
     ] }),
-    /* @__PURE__ */ jsx46(
+    /* @__PURE__ */ jsx47(
       ChatComposer,
       {
         ...composer,
@@ -5630,7 +5658,7 @@ function ChatPage({
 import * as React34 from "react";
 import { Pressable as Pressable12, View as View38 } from "react-native";
 import Animated11, { Easing as Easing2, useAnimatedStyle as useAnimatedStyle2, useSharedValue as useSharedValue2, withTiming as withTiming2 } from "react-native-reanimated";
-import { jsx as jsx47 } from "react/jsx-runtime";
+import { jsx as jsx48 } from "react/jsx-runtime";
 function ScrollToBottomButton({ visible, onPress, children, style }) {
   const theme = useTheme();
   const progress = useSharedValue2(visible ? 1 : 0);
@@ -5644,7 +5672,7 @@ function ScrollToBottomButton({ visible, onPress, children, style }) {
   }));
   const bg = theme.scheme === "dark" ? "rgba(39,39,42,0.9)" : "rgba(244,244,245,0.95)";
   const border = theme.scheme === "dark" ? withAlpha("#FFFFFF", 0.12) : withAlpha("#000000", 0.08);
-  return /* @__PURE__ */ jsx47(
+  return /* @__PURE__ */ jsx48(
     Animated11.View,
     {
       pointerEvents: visible ? "auto" : "none",
@@ -5658,7 +5686,7 @@ function ScrollToBottomButton({ visible, onPress, children, style }) {
         style,
         animStyle
       ],
-      children: /* @__PURE__ */ jsx47(
+      children: /* @__PURE__ */ jsx48(
         View38,
         {
           style: {
@@ -5677,7 +5705,7 @@ function ScrollToBottomButton({ visible, onPress, children, style }) {
             elevation: 5,
             opacity: pressed ? 0.85 : 1
           },
-          children: /* @__PURE__ */ jsx47(
+          children: /* @__PURE__ */ jsx48(
             Pressable12,
             {
               onPress,
@@ -5696,7 +5724,7 @@ function ScrollToBottomButton({ visible, onPress, children, style }) {
 
 // src/components/chat/ChatHeader.tsx
 import { StyleSheet as StyleSheet4 } from "react-native";
-import { jsx as jsx48 } from "react/jsx-runtime";
+import { jsx as jsx49 } from "react/jsx-runtime";
 function ChatHeader({ left, right, center, style }) {
   const flattenedStyle = StyleSheet4.flatten([
     {
@@ -5704,7 +5732,7 @@ function ChatHeader({ left, right, center, style }) {
     },
     style
   ]);
-  return /* @__PURE__ */ jsx48(
+  return /* @__PURE__ */ jsx49(
     StudioSheetHeader,
     {
       left,
@@ -5717,12 +5745,12 @@ function ChatHeader({ left, right, center, style }) {
 
 // src/components/chat/ForkNoticeBanner.tsx
 import { View as View40 } from "react-native";
-import { jsx as jsx49, jsxs as jsxs29 } from "react/jsx-runtime";
+import { jsx as jsx50, jsxs as jsxs29 } from "react/jsx-runtime";
 function ForkNoticeBanner({ isOwner = true, title, description, style }) {
   const theme = useTheme();
   const resolvedTitle = title ?? (isOwner ? "Remixed app" : "Remix app");
   const resolvedDescription = description ?? (isOwner ? "Any changes you make will be a remix of the original app. You can view the edited version in the Remix tab in your apps page." : "Once you make edits, this remixed version will appear on your Remixed apps page.");
-  return /* @__PURE__ */ jsx49(
+  return /* @__PURE__ */ jsx50(
     Card,
     {
       variant: "surfaceRaised",
@@ -5738,7 +5766,7 @@ function ForkNoticeBanner({ isOwner = true, title, description, style }) {
         style
       ],
       children: /* @__PURE__ */ jsxs29(View40, { style: { minWidth: 0 }, children: [
-        /* @__PURE__ */ jsx49(
+        /* @__PURE__ */ jsx50(
           Text,
           {
             style: {
@@ -5752,7 +5780,7 @@ function ForkNoticeBanner({ isOwner = true, title, description, style }) {
             children: resolvedTitle
           }
         ),
-        /* @__PURE__ */ jsx49(
+        /* @__PURE__ */ jsx50(
           Text,
           {
             style: {
@@ -5770,7 +5798,7 @@ function ForkNoticeBanner({ isOwner = true, title, description, style }) {
 }
 
 // src/studio/ui/ChatPanel.tsx
-import { jsx as jsx50, jsxs as jsxs30 } from "react/jsx-runtime";
+import { jsx as jsx51, jsxs as jsxs30 } from "react/jsx-runtime";
 function ChatPanel({
   title = "Chat",
   autoFocusComposer = false,
@@ -5808,21 +5836,21 @@ function ChatPanel({
     var _a;
     (_a = listRef.current) == null ? void 0 : _a.scrollToBottom({ animated: true });
   }, []);
-  const header = /* @__PURE__ */ jsx50(
+  const header = /* @__PURE__ */ jsx51(
     ChatHeader,
     {
       left: /* @__PURE__ */ jsxs30(View41, { style: { flexDirection: "row", alignItems: "center" }, children: [
-        /* @__PURE__ */ jsx50(StudioSheetHeaderIconButton, { onPress: onBack, accessibilityLabel: "Back", style: { marginRight: 8 }, children: /* @__PURE__ */ jsx50(IconBack, { size: 20, colorToken: "floatingContent" }) }),
-        onNavigateHome ? /* @__PURE__ */ jsx50(StudioSheetHeaderIconButton, { onPress: onNavigateHome, accessibilityLabel: "Home", children: /* @__PURE__ */ jsx50(IconHome, { size: 20, colorToken: "floatingContent" }) }) : null
+        /* @__PURE__ */ jsx51(StudioSheetHeaderIconButton, { onPress: onBack, accessibilityLabel: "Back", style: { marginRight: 8 }, children: /* @__PURE__ */ jsx51(IconBack, { size: 20, colorToken: "floatingContent" }) }),
+        onNavigateHome ? /* @__PURE__ */ jsx51(StudioSheetHeaderIconButton, { onPress: onNavigateHome, accessibilityLabel: "Home", children: /* @__PURE__ */ jsx51(IconHome, { size: 20, colorToken: "floatingContent" }) }) : null
       ] }),
       right: /* @__PURE__ */ jsxs30(View41, { style: { flexDirection: "row", alignItems: "center" }, children: [
-        onStartDraw ? /* @__PURE__ */ jsx50(StudioSheetHeaderIconButton, { onPress: onStartDraw, accessibilityLabel: "Draw", intent: "danger", style: { marginRight: 8 }, children: /* @__PURE__ */ jsx50(IconDraw, { size: 20, colorToken: "onDanger" }) }) : null,
-        /* @__PURE__ */ jsx50(StudioSheetHeaderIconButton, { onPress: onClose, accessibilityLabel: "Close", children: /* @__PURE__ */ jsx50(IconClose, { size: 20, colorToken: "floatingContent" }) })
+        onStartDraw ? /* @__PURE__ */ jsx51(StudioSheetHeaderIconButton, { onPress: onStartDraw, accessibilityLabel: "Draw", intent: "danger", style: { marginRight: 8 }, children: /* @__PURE__ */ jsx51(IconDraw, { size: 20, colorToken: "onDanger" }) }) : null,
+        /* @__PURE__ */ jsx51(StudioSheetHeaderIconButton, { onPress: onClose, accessibilityLabel: "Close", children: /* @__PURE__ */ jsx51(IconClose, { size: 20, colorToken: "floatingContent" }) })
       ] }),
       center: null
     }
   );
-  const topBanner = shouldForkOnEdit ? /* @__PURE__ */ jsx50(
+  const topBanner = shouldForkOnEdit ? /* @__PURE__ */ jsx51(
     ForkNoticeBanner,
     {
       isOwner: !shouldForkOnEdit,
@@ -5832,16 +5860,16 @@ function ChatPanel({
   const showMessagesLoading = Boolean(loading) && messages.length === 0 || forking;
   if (showMessagesLoading) {
     return /* @__PURE__ */ jsxs30(View41, { style: { flex: 1 }, children: [
-      /* @__PURE__ */ jsx50(View41, { children: header }),
-      topBanner ? /* @__PURE__ */ jsx50(View41, { style: { paddingHorizontal: 16, paddingTop: 8 }, children: topBanner }) : null,
+      /* @__PURE__ */ jsx51(View41, { children: header }),
+      topBanner ? /* @__PURE__ */ jsx51(View41, { style: { paddingHorizontal: 16, paddingTop: 8 }, children: topBanner }) : null,
       /* @__PURE__ */ jsxs30(View41, { style: { flex: 1, alignItems: "center", justifyContent: "center", paddingHorizontal: 24, paddingVertical: 12 }, children: [
-        /* @__PURE__ */ jsx50(ActivityIndicator8, {}),
-        /* @__PURE__ */ jsx50(View41, { style: { height: 12 } }),
-        /* @__PURE__ */ jsx50(Text, { variant: "bodyMuted", children: forking ? "Creating your copy\u2026" : "Loading messages\u2026" })
+        /* @__PURE__ */ jsx51(ActivityIndicator8, {}),
+        /* @__PURE__ */ jsx51(View41, { style: { height: 12 } }),
+        /* @__PURE__ */ jsx51(Text, { variant: "bodyMuted", children: forking ? "Creating your copy\u2026" : "Loading messages\u2026" })
       ] })
     ] });
   }
-  return /* @__PURE__ */ jsx50(
+  return /* @__PURE__ */ jsx51(
     ChatPage,
     {
       header,
@@ -5850,13 +5878,13 @@ function ChatPanel({
       topBanner,
       listRef,
       onNearBottomChange: setNearBottom,
-      overlay: /* @__PURE__ */ jsx50(
+      overlay: /* @__PURE__ */ jsx51(
         ScrollToBottomButton,
         {
           visible: !nearBottom,
           onPress: handleScrollToBottom,
           style: { bottom: 80 },
-          children: /* @__PURE__ */ jsx50(IconArrowDown, { size: 20, colorToken: "floatingContent" })
+          children: /* @__PURE__ */ jsx51(IconArrowDown, { size: 20, colorToken: "floatingContent" })
         }
       ),
       composer: {
@@ -5883,7 +5911,7 @@ import {
   Pressable as Pressable13,
   View as View42
 } from "react-native";
-import { jsx as jsx51, jsxs as jsxs31 } from "react/jsx-runtime";
+import { jsx as jsx52, jsxs as jsxs31 } from "react/jsx-runtime";
 function Modal({
   visible,
   onRequestClose,
@@ -5892,7 +5920,7 @@ function Modal({
   contentStyle
 }) {
   const theme = useTheme();
-  return /* @__PURE__ */ jsx51(
+  return /* @__PURE__ */ jsx52(
     RNModal,
     {
       visible,
@@ -5900,7 +5928,7 @@ function Modal({
       animationType: "fade",
       onRequestClose,
       children: /* @__PURE__ */ jsxs31(View42, { style: { flex: 1, backgroundColor: theme.colors.backdrop, justifyContent: "center", padding: theme.spacing.lg }, children: [
-        /* @__PURE__ */ jsx51(
+        /* @__PURE__ */ jsx52(
           Pressable13,
           {
             accessibilityRole: "button",
@@ -5908,14 +5936,14 @@ function Modal({
             style: { position: "absolute", inset: 0 }
           }
         ),
-        /* @__PURE__ */ jsx51(Card, { variant: "surfaceRaised", padded: true, style: [{ borderRadius: theme.radii.xl }, contentStyle], children })
+        /* @__PURE__ */ jsx52(Card, { variant: "surfaceRaised", padded: true, style: [{ borderRadius: theme.radii.xl }, contentStyle], children })
       ] })
     }
   );
 }
 
 // src/components/dialogs/ConfirmMergeRequestDialog.tsx
-import { jsx as jsx52, jsxs as jsxs32 } from "react/jsx-runtime";
+import { jsx as jsx53, jsxs as jsxs32 } from "react/jsx-runtime";
 function ConfirmMergeRequestDialog({
   visible,
   onOpenChange,
@@ -5956,7 +5984,7 @@ function ConfirmMergeRequestDialog({
         backgroundColor: theme.colors.background
       },
       children: [
-        /* @__PURE__ */ jsx52(View43, { children: /* @__PURE__ */ jsx52(
+        /* @__PURE__ */ jsx53(View43, { children: /* @__PURE__ */ jsx53(
           Text,
           {
             style: {
@@ -5969,7 +5997,7 @@ function ConfirmMergeRequestDialog({
           }
         ) }),
         /* @__PURE__ */ jsxs32(View43, { style: { marginTop: 16 }, children: [
-          /* @__PURE__ */ jsx52(
+          /* @__PURE__ */ jsx53(
             View43,
             {
               style: [
@@ -5979,7 +6007,7 @@ function ConfirmMergeRequestDialog({
                   opacity: canConfirm ? 1 : 0.5
                 }
               ],
-              children: /* @__PURE__ */ jsx52(
+              children: /* @__PURE__ */ jsx53(
                 Pressable14,
                 {
                   accessibilityRole: "button",
@@ -5987,13 +6015,13 @@ function ConfirmMergeRequestDialog({
                   disabled: !canConfirm,
                   onPress: handleConfirm,
                   style: [fullWidthButtonBase, { flex: 1 }],
-                  children: /* @__PURE__ */ jsx52(Text, { style: { textAlign: "center", color: theme.colors.onPrimary }, children: "Approve Merge" })
+                  children: /* @__PURE__ */ jsx53(Text, { style: { textAlign: "center", color: theme.colors.onPrimary }, children: "Approve Merge" })
                 }
               )
             }
           ),
-          /* @__PURE__ */ jsx52(View43, { style: { height: 8 } }),
-          /* @__PURE__ */ jsx52(
+          /* @__PURE__ */ jsx53(View43, { style: { height: 8 } }),
+          /* @__PURE__ */ jsx53(
             View43,
             {
               style: [
@@ -6005,7 +6033,7 @@ function ConfirmMergeRequestDialog({
                   opacity: isBuilding || !mergeRequest ? 0.5 : 1
                 }
               ],
-              children: /* @__PURE__ */ jsx52(
+              children: /* @__PURE__ */ jsx53(
                 Pressable14,
                 {
                   accessibilityRole: "button",
@@ -6013,13 +6041,13 @@ function ConfirmMergeRequestDialog({
                   disabled: isBuilding || !mergeRequest,
                   onPress: handleTestFirst,
                   style: [fullWidthButtonBase, { flex: 1 }],
-                  children: /* @__PURE__ */ jsx52(Text, { style: { textAlign: "center", color: theme.colors.text }, children: isBuilding ? "Preparing\u2026" : "Test edits first" })
+                  children: /* @__PURE__ */ jsx53(Text, { style: { textAlign: "center", color: theme.colors.text }, children: isBuilding ? "Preparing\u2026" : "Test edits first" })
                 }
               )
             }
           ),
-          /* @__PURE__ */ jsx52(View43, { style: { height: 8 } }),
-          /* @__PURE__ */ jsx52(
+          /* @__PURE__ */ jsx53(View43, { style: { height: 8 } }),
+          /* @__PURE__ */ jsx53(
             View43,
             {
               style: [
@@ -6030,14 +6058,14 @@ function ConfirmMergeRequestDialog({
                   borderColor: theme.colors.border
                 }
               ],
-              children: /* @__PURE__ */ jsx52(
+              children: /* @__PURE__ */ jsx53(
                 Pressable14,
                 {
                   accessibilityRole: "button",
                   accessibilityLabel: "Cancel",
                   onPress: close,
                   style: [fullWidthButtonBase, { flex: 1 }],
-                  children: /* @__PURE__ */ jsx52(Text, { style: { textAlign: "center", color: theme.colors.text }, children: "Cancel" })
+                  children: /* @__PURE__ */ jsx53(Text, { style: { textAlign: "center", color: theme.colors.text }, children: "Cancel" })
                 }
               )
             }
@@ -6049,7 +6077,7 @@ function ConfirmMergeRequestDialog({
 }
 
 // src/studio/ui/ConfirmMergeFlow.tsx
-import { jsx as jsx53 } from "react/jsx-runtime";
+import { jsx as jsx54 } from "react/jsx-runtime";
 function ConfirmMergeFlow({
   visible,
   onOpenChange,
@@ -6060,7 +6088,7 @@ function ConfirmMergeFlow({
   onConfirm,
   onTestFirst
 }) {
-  return /* @__PURE__ */ jsx53(
+  return /* @__PURE__ */ jsx54(
     ConfirmMergeRequestDialog,
     {
       visible,
@@ -6082,7 +6110,7 @@ function ConfirmMergeFlow({
 }
 
 // src/studio/ui/StudioOverlay.tsx
-import { Fragment as Fragment6, jsx as jsx54, jsxs as jsxs33 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx55, jsxs as jsxs33 } from "react/jsx-runtime";
 function StudioOverlay({
   captureTargetRef,
   app,
@@ -6171,13 +6199,13 @@ function StudioOverlay({
     [closeSheet, onTestMr]
   );
   return /* @__PURE__ */ jsxs33(Fragment6, { children: [
-    /* @__PURE__ */ jsx54(EdgeGlowFrame, { visible: isTesting, role: "accent", thickness: 40, intensity: 1 }),
-    /* @__PURE__ */ jsx54(StudioBottomSheet, { open: sheetOpen, onOpenChange: setSheetOpen, children: /* @__PURE__ */ jsx54(
+    /* @__PURE__ */ jsx55(EdgeGlowFrame, { visible: isTesting, role: "accent", thickness: 40, intensity: 1 }),
+    /* @__PURE__ */ jsx55(StudioBottomSheet, { open: sheetOpen, onOpenChange: setSheetOpen, children: /* @__PURE__ */ jsx55(
       StudioSheetPager,
       {
         activePage,
         width,
-        preview: /* @__PURE__ */ jsx54(
+        preview: /* @__PURE__ */ jsx55(
           PreviewPanel,
           {
             app,
@@ -6203,7 +6231,7 @@ function StudioOverlay({
             commentCountOverride: commentsCount ?? void 0
           }
         ),
-        chat: /* @__PURE__ */ jsx54(
+        chat: /* @__PURE__ */ jsx55(
           ChatPanel,
           {
             messages: chatMessages,
@@ -6226,7 +6254,7 @@ function StudioOverlay({
         )
       }
     ) }),
-    /* @__PURE__ */ jsx54(
+    /* @__PURE__ */ jsx55(
       FloatingDraggableButton,
       {
         visible: !sheetOpen && !drawing,
@@ -6234,10 +6262,10 @@ function StudioOverlay({
         badgeCount: incomingMergeRequests.length,
         onPress: toggleSheet,
         isLoading: (app == null ? void 0 : app.status) === "editing",
-        children: /* @__PURE__ */ jsx54(View44, { style: { width: 28, height: 28, alignItems: "center", justifyContent: "center" }, children: /* @__PURE__ */ jsx54(merge_default, { width: 24, height: 24, color: theme.colors.floatingContent }) })
+        children: /* @__PURE__ */ jsx55(View44, { style: { width: 28, height: 28, alignItems: "center", justifyContent: "center" }, children: /* @__PURE__ */ jsx55(MergeIcon, { width: 24, height: 24, color: theme.colors.floatingContent }) })
       }
     ),
-    /* @__PURE__ */ jsx54(
+    /* @__PURE__ */ jsx55(
       DrawModeOverlay,
       {
         visible: drawing,
@@ -6246,7 +6274,7 @@ function StudioOverlay({
         onCapture: handleDrawCapture
       }
     ),
-    /* @__PURE__ */ jsx54(
+    /* @__PURE__ */ jsx55(
       ConfirmMergeFlow,
       {
         visible: Boolean(confirmMr),
@@ -6259,7 +6287,7 @@ function StudioOverlay({
         onTestFirst: handleTestMr
       }
     ),
-    /* @__PURE__ */ jsx54(
+    /* @__PURE__ */ jsx55(
       AppCommentsSheet,
       {
         appId: commentsAppId,
@@ -6272,9 +6300,10 @@ function StudioOverlay({
 }
 
 // src/studio/ComergeStudio.tsx
-import { jsx as jsx55, jsxs as jsxs34 } from "react/jsx-runtime";
+import { jsx as jsx56, jsxs as jsxs34 } from "react/jsx-runtime";
 function ComergeStudio({
   appId,
+  apiKey,
   appKey = "MicroMain",
   onNavigateHome,
   style
@@ -6289,7 +6318,7 @@ function ComergeStudio({
     setPendingRuntimeTargetAppId(null);
   }, [appId]);
   const captureTargetRef = React38.useRef(null);
-  return /* @__PURE__ */ jsx55(StudioBootstrap, { children: ({ userId }) => /* @__PURE__ */ jsx55(BottomSheetModalProvider, { children: /* @__PURE__ */ jsx55(
+  return /* @__PURE__ */ jsx56(StudioBootstrap, { apiKey, children: ({ userId }) => /* @__PURE__ */ jsx56(BottomSheetModalProvider, { children: /* @__PURE__ */ jsx56(
     ComergeStudioInner,
     {
       userId,
@@ -6382,9 +6411,9 @@ function ComergeStudioInner({
     const payloadType = typeof ((_a = last.payload) == null ? void 0 : _a.type) === "string" ? String(last.payload.type) : void 0;
     return payloadType !== "outcome";
   }, [thread.raw]);
-  return /* @__PURE__ */ jsx55(View45, { style: [{ flex: 1 }, style], children: /* @__PURE__ */ jsxs34(View45, { ref: captureTargetRef, style: { flex: 1 }, collapsable: false, children: [
-    /* @__PURE__ */ jsx55(RuntimeRenderer, { appKey, bundlePath: bundle.bundlePath, renderToken: bundle.renderToken }),
-    /* @__PURE__ */ jsx55(
+  return /* @__PURE__ */ jsx56(View45, { style: [{ flex: 1 }, style], children: /* @__PURE__ */ jsxs34(View45, { ref: captureTargetRef, style: { flex: 1 }, collapsable: false, children: [
+    /* @__PURE__ */ jsx56(RuntimeRenderer, { appKey, bundlePath: bundle.bundlePath, renderToken: bundle.renderToken }),
+    /* @__PURE__ */ jsx56(
       StudioOverlay,
       {
         captureTargetRef,