@comergehq/studio 0.1.30 → 0.1.32

package/dist/index.js

@@ -5,6 +5,9 @@ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __commonJS = (cb, mod) => function __require() {
+  return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
+};
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -27,6 +30,482 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
+// src/assets/lottie/remix-x-loop.lottie.json
+var require_remix_x_loop_lottie = __commonJS({
+  "src/assets/lottie/remix-x-loop.lottie.json"(exports2, module2) {
+    module2.exports = {
+      v: "5.7.4",
+      fr: 30,
+      ip: 0,
+      op: 50,
+      w: 120,
+      h: 120,
+      nm: "Remix X Loop",
+      ddd: 0,
+      assets: [],
+      layers: [
+        {
+          ddd: 0,
+          ind: 1,
+          ty: 3,
+          nm: "Controller",
+          ks: {
+            o: { a: 0, k: 100 },
+            r: {
+              a: 1,
+              k: [
+                { t: 0, s: [0] },
+                { t: 5, s: [0] },
+                { t: 9, s: [40] },
+                { t: 13, s: [180] },
+                { t: 17, s: [320] },
+                { t: 20, s: [360] },
+                { t: 29, s: [360] },
+                { t: 33, s: [400] },
+                { t: 37, s: [540] },
+                { t: 41, s: [680] },
+                { t: 44, s: [720] },
+                { t: 50, s: [720] }
+              ]
+            },
+            p: { a: 0, k: [60, 60, 0] },
+            a: { a: 0, k: [35, 35, 0] },
+            s: { a: 0, k: [100, 100, 100] }
+          },
+          ao: 0,
+          ip: 0,
+          op: 50,
+          st: 0,
+          bm: 0
+        },
+        {
+          ddd: 0,
+          ind: 2,
+          ty: 4,
+          nm: "Chevron Right",
+          parent: 1,
+          ks: {
+            o: {
+              a: 1,
+              k: [
+                { t: 0, s: [100] },
+                { t: 17, s: [100] },
+                { t: 20, s: [0] },
+                { t: 29, s: [0] },
+                { t: 44, s: [100] },
+                { t: 50, s: [100] }
+              ]
+            },
+            r: { a: 0, k: 0 },
+            p: {
+              a: 1,
+              k: [
+                { t: 0, s: [73, 35, 0] },
+                { t: 5, s: [73, 35, 0] },
+                { t: 9, s: [69, 35, 0] },
+                { t: 13, s: [54, 35, 0] },
+                { t: 17, s: [39, 35, 0] },
+                { t: 20, s: [35, 35, 0] },
+                { t: 29, s: [35, 35, 0] },
+                { t: 33, s: [39, 35, 0] },
+                { t: 37, s: [54, 35, 0] },
+                { t: 41, s: [69, 35, 0] },
+                { t: 44, s: [73, 35, 0] },
+                { t: 50, s: [73, 35, 0] }
+              ]
+            },
+            a: { a: 0, k: [35, 35, 0] },
+            s: { a: 0, k: [100, 100, 100] }
+          },
+          ao: 0,
+          shapes: [
+            {
+              ty: "gr",
+              nm: "Right",
+              it: [
+                {
+                  ty: "sh",
+                  nm: "Path",
+                  ks: {
+                    a: 0,
+                    k: {
+                      i: [[0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0]],
+                      o: [[0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0]],
+                      v: [[48.2249, 34.8401], [13.266, 69.546], [0, 56.28], [21.44, 34.84], [0, 13.266], [13.266, 0], [48.2249, 34.8401]],
+                      c: true
+                    }
+                  }
+                },
+                {
+                  ty: "fl",
+                  nm: "Fill",
+                  c: { a: 0, k: [0, 0.7961, 0.7529, 1] },
+                  o: { a: 0, k: 100 },
+                  r: 1
+                },
+                {
+                  ty: "tr",
+                  nm: "Transform",
+                  p: { a: 0, k: [0, 0] },
+                  a: { a: 0, k: [0, 0] },
+                  s: { a: 0, k: [100, 100] },
+                  r: { a: 0, k: 0 },
+                  o: { a: 0, k: 100 },
+                  sk: { a: 0, k: 0 },
+                  sa: { a: 0, k: 0 }
+                }
+              ]
+            }
+          ],
+          ip: 0,
+          op: 50,
+          st: 0,
+          bm: 0
+        },
+        {
+          ddd: 0,
+          ind: 3,
+          ty: 4,
+          nm: "Chevron Left",
+          parent: 1,
+          ks: {
+            o: {
+              a: 1,
+              k: [
+                { t: 0, s: [100] },
+                { t: 17, s: [100] },
+                { t: 20, s: [0] },
+                { t: 29, s: [0] },
+                { t: 44, s: [100] },
+                { t: 50, s: [100] }
+              ]
+            },
+            r: { a: 0, k: 0 },
+            p: {
+              a: 1,
+              k: [
+                { t: 0, s: [-3, 35, 0] },
+                { t: 5, s: [-3, 35, 0] },
+                { t: 9, s: [1, 35, 0] },
+                { t: 13, s: [16, 35, 0] },
+                { t: 17, s: [31, 35, 0] },
+                { t: 20, s: [35, 35, 0] },
+                { t: 29, s: [35, 35, 0] },
+                { t: 33, s: [31, 35, 0] },
+                { t: 37, s: [16, 35, 0] },
+                { t: 41, s: [1, 35, 0] },
+                { t: 44, s: [-3, 35, 0] },
+                { t: 50, s: [-3, 35, 0] }
+              ]
+            },
+            a: { a: 0, k: [35, 35, 0] },
+            s: { a: 0, k: [100, 100, 100] }
+          },
+          ao: 0,
+          shapes: [
+            {
+              ty: "gr",
+              nm: "Left",
+              it: [
+                {
+                  ty: "sh",
+                  nm: "Path",
+                  ks: {
+                    a: 0,
+                    k: {
+                      i: [[0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0]],
+                      o: [[0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0]],
+                      v: [[48.106, 56.28], [34.84, 69.546], [0, 34.84], [34.84, 0], [48.106, 13.266], [26.532, 34.84], [48.106, 56.28]],
+                      c: true
+                    }
+                  }
+                },
+                {
+                  ty: "fl",
+                  nm: "Fill",
+                  c: { a: 0, k: [1, 0.0941, 0.1255, 1] },
+                  o: { a: 0, k: 100 },
+                  r: 1
+                },
+                {
+                  ty: "tr",
+                  nm: "Transform",
+                  p: { a: 0, k: [21, 0] },
+                  a: { a: 0, k: [0, 0] },
+                  s: { a: 0, k: [100, 100] },
+                  r: { a: 0, k: 0 },
+                  o: { a: 0, k: 100 },
+                  sk: { a: 0, k: 0 },
+                  sa: { a: 0, k: 0 }
+                }
+              ]
+            }
+          ],
+          ip: 0,
+          op: 50,
+          st: 0,
+          bm: 0
+        },
+        {
+          ddd: 0,
+          ind: 4,
+          ty: 4,
+          nm: "Diamond",
+          parent: 1,
+          ks: {
+            o: {
+              a: 1,
+              k: [
+                { t: 0, s: [0] },
+                { t: 1, s: [0] },
+                { t: 2, s: [0] },
+                { t: 3, s: [0] },
+                { t: 4, s: [0] },
+                { t: 5, s: [0] },
+                { t: 6, s: [0] },
+                { t: 7, s: [0] },
+                { t: 8, s: [0] },
+                { t: 9, s: [0] },
+                { t: 10, s: [5] },
+                { t: 11, s: [33.889] },
+                { t: 12, s: [66.111] },
+                { t: 13, s: [95] },
+                { t: 14, s: [100] },
+                { t: 15, s: [71.111] },
+                { t: 16, s: [40] },
+                { t: 17, s: [17.778] },
+                { t: 18, s: [4.444] },
+                { t: 19, s: [0] },
+                { t: 20, s: [0] },
+                { t: 21, s: [0] },
+                { t: 22, s: [0] },
+                { t: 23, s: [0] },
+                { t: 24, s: [0] },
+                { t: 25, s: [0] },
+                { t: 26, s: [0] },
+                { t: 27, s: [0] },
+                { t: 28, s: [0] },
+                { t: 29, s: [4.444] },
+                { t: 30, s: [17.778] },
+                { t: 31, s: [40] },
+                { t: 32, s: [71.111] },
+                { t: 33, s: [100] },
+                { t: 34, s: [95] },
+                { t: 35, s: [66.111] },
+                { t: 36, s: [33.889] },
+                { t: 37, s: [5] },
+                { t: 38, s: [0] },
+                { t: 39, s: [0] },
+                { t: 40, s: [0] },
+                { t: 41, s: [0] },
+                { t: 42, s: [0] },
+                { t: 43, s: [0] },
+                { t: 44, s: [0] },
+                { t: 45, s: [0] },
+                { t: 46, s: [0] },
+                { t: 47, s: [0] },
+                { t: 48, s: [0] },
+                { t: 49, s: [0] },
+                { t: 50, s: [0] }
+              ]
+            },
+            r: { a: 0, k: 0 },
+            p: { a: 0, k: [35, 35, 0] },
+            a: { a: 0, k: [35, 35, 0] },
+            s: { a: 0, k: [100, 100, 100] }
+          },
+          ao: 0,
+          shapes: [
+            {
+              ty: "gr",
+              nm: "Diamond",
+              it: [
+                {
+                  ty: "sh",
+                  nm: "Path",
+                  ks: {
+                    a: 0,
+                    k: {
+                      i: [[0, 0], [0, 0], [0, 0], [0, 0], [0, 0]],
+                      o: [[0, 0], [0, 0], [0, 0], [0, 0], [0, 0]],
+                      v: [[13.3257, 515e-7], [0, 13.2661], [13.266, 26.5321], [26.532, 13.2661], [13.3257, 515e-7]],
+                      c: true
+                    }
+                  }
+                },
+                {
+                  ty: "fl",
+                  nm: "Fill",
+                  c: { a: 0, k: [0, 0.1961, 0.1647, 1] },
+                  o: { a: 0, k: 100 },
+                  r: 1
+                },
+                {
+                  ty: "tr",
+                  nm: "Transform",
+                  p: { a: 0, k: [21.5, 21.5] },
+                  a: { a: 0, k: [0, 0] },
+                  s: { a: 0, k: [100, 100] },
+                  r: { a: 0, k: 0 },
+                  o: { a: 0, k: 100 },
+                  sk: { a: 0, k: 0 },
+                  sa: { a: 0, k: 0 }
+                }
+              ]
+            }
+          ],
+          ip: 0,
+          op: 50,
+          st: 0,
+          bm: 0
+        },
+        {
+          ddd: 0,
+          ind: 5,
+          ty: 4,
+          nm: "Final X",
+          parent: 1,
+          ks: {
+            o: {
+              a: 1,
+              k: [
+                { t: 0, s: [0] },
+                { t: 17, s: [0] },
+                { t: 20, s: [100] },
+                { t: 29, s: [100] },
+                { t: 44, s: [0] },
+                { t: 50, s: [0] }
+              ]
+            },
+            r: { a: 0, k: 0 },
+            p: { a: 0, k: [35, 35, 0] },
+            a: { a: 0, k: [35, 35, 0] },
+            s: { a: 0, k: [100, 100, 100] }
+          },
+          ao: 0,
+          shapes: [
+            {
+              ty: "gr",
+              nm: "Teal Arm",
+              it: [
+                {
+                  ty: "sh",
+                  nm: "Path",
+                  ks: {
+                    a: 0,
+                    k: {
+                      i: [[0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0]],
+                      o: [[0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0]],
+                      v: [[34.706, 48.106], [13.266, 69.546], [0, 56.28], [21.44, 34.84], [0, 13.266], [13.266, 0], [34.706, 21.574], [21.44, 34.84], [34.706, 48.106]],
+                      c: true
+                    }
+                  }
+                },
+                {
+                  ty: "fl",
+                  nm: "Fill",
+                  c: { a: 0, k: [0, 0.7961, 0.7529, 1] },
+                  o: { a: 0, k: 100 },
+                  r: 1
+                },
+                {
+                  ty: "tr",
+                  nm: "Transform",
+                  p: { a: 0, k: [0, 0] },
+                  a: { a: 0, k: [0, 0] },
+                  s: { a: 0, k: [100, 100] },
+                  r: { a: 0, k: 0 },
+                  o: { a: 0, k: 100 },
+                  sk: { a: 0, k: 0 },
+                  sa: { a: 0, k: 0 }
+                }
+              ]
+            },
+            {
+              ty: "gr",
+              nm: "Red Arm",
+              it: [
+                {
+                  ty: "sh",
+                  nm: "Path",
+                  ks: {
+                    a: 0,
+                    k: {
+                      i: [[0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0]],
+                      o: [[0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0]],
+                      v: [[69.546, 56.2801], [56.28, 69.5461], [34.706, 48.106], [47.972, 34.8401], [34.706, 21.574], [56.28, 534e-7], [69.546, 13.2661], [47.972, 34.8401], [69.546, 56.2801]],
+                      c: true
+                    }
+                  }
+                },
+                {
+                  ty: "fl",
+                  nm: "Fill",
+                  c: { a: 0, k: [1, 0.0941, 0.1255, 1] },
+                  o: { a: 0, k: 100 },
+                  r: 1
+                },
+                {
+                  ty: "tr",
+                  nm: "Transform",
+                  p: { a: 0, k: [0, 0] },
+                  a: { a: 0, k: [0, 0] },
+                  s: { a: 0, k: [100, 100] },
+                  r: { a: 0, k: 0 },
+                  o: { a: 0, k: 100 },
+                  sk: { a: 0, k: 0 },
+                  sa: { a: 0, k: 0 }
+                }
+              ]
+            },
+            {
+              ty: "gr",
+              nm: "Center Diamond",
+              it: [
+                {
+                  ty: "sh",
+                  nm: "Path",
+                  ks: {
+                    a: 0,
+                    k: {
+                      i: [[0, 0], [0, 0], [0, 0], [0, 0], [0, 0]],
+                      o: [[0, 0], [0, 0], [0, 0], [0, 0], [0, 0]],
+                      v: [[34.7656, 48.1061], [21.44, 34.84], [34.706, 21.574], [47.972, 34.8401], [34.7656, 48.1061]],
+                      c: true
+                    }
+                  }
+                },
+                {
+                  ty: "fl",
+                  nm: "Fill",
+                  c: { a: 0, k: [0, 0.1961, 0.1647, 1] },
+                  o: { a: 0, k: 100 },
+                  r: 1
+                },
+                {
+                  ty: "tr",
+                  nm: "Transform",
+                  p: { a: 0, k: [0, 0] },
+                  a: { a: 0, k: [0, 0] },
+                  s: { a: 0, k: [100, 100] },
+                  r: { a: 0, k: 0 },
+                  o: { a: 0, k: 100 },
+                  sk: { a: 0, k: 0 },
+                  sa: { a: 0, k: 0 }
+                }
+              ]
+            }
+          ],
+          ip: 0,
+          op: 50,
+          st: 0,
+          bm: 0
+        }
+      ]
+    };
+  }
+});
+
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
@@ -38,7 +517,7 @@ module.exports = __toCommonJS(index_exports);
 
 // src/studio/ComergeStudio.tsx
 var React51 = __toESM(require("react"));
-var import_react_native60 = require("react-native");
+var import_react_native61 = require("react-native");
 var import_bottom_sheet6 = require("@gorhom/bottom-sheet");
 var import_runtime2 = require("@comergehq/runtime");
 
@@ -2420,6 +2899,13 @@ var AttachmentRemoteDataSourceImpl = class extends BaseRemote {
     );
     return data;
   }
+  async stagePresign(payload) {
+    const { data } = await api.post(
+      "/v1/attachments/stage/presign",
+      payload
+    );
+    return data;
+  }
 };
 var attachmentRemoteDataSource = new AttachmentRemoteDataSourceImpl();
 
@@ -2433,6 +2919,10 @@ var AttachmentRepositoryImpl = class extends BaseRepository {
     const res = await this.remote.presign(payload);
     return this.unwrapOrThrow(res);
   }
+  async stagePresign(payload) {
+    const res = await this.remote.stagePresign(payload);
+    return this.unwrapOrThrow(res);
+  }
   async upload(upload, file) {
     const resp = await fetch(upload.uploadUrl, {
       method: "PUT",
@@ -2443,6 +2933,16 @@ var AttachmentRepositoryImpl = class extends BaseRepository {
       throw new Error(`upload failed: ${resp.status}`);
     }
   }
+  async uploadStaged(upload, file) {
+    const resp = await fetch(upload.uploadUrl, {
+      method: "PUT",
+      headers: upload.headers,
+      body: file
+    });
+    if (!resp.ok) {
+      throw new Error(`staged upload failed: ${resp.status}`);
+    }
+  }
 };
 var attachmentRepository = new AttachmentRepositoryImpl(
   attachmentRemoteDataSource
@@ -2516,7 +3016,36 @@ function useAttachmentUpload() {
       setUploading(false);
     }
   }, []);
-  return { uploadBase64Images, uploading, error };
+  const stageBase64Images = React7.useCallback(async ({ dataUrls }) => {
+    if (!dataUrls || dataUrls.length === 0) return [];
+    setUploading(true);
+    setError(null);
+    try {
+      const blobs = await Promise.all(
+        dataUrls.map(async (dataUrl) => {
+          const normalized = dataUrl.startsWith("data:") ? dataUrl : `data:image/png;base64,${dataUrl}`;
+          const blob = import_react_native6.Platform.OS === "android" ? await dataUrlToBlobAndroid(normalized) : await (await fetch(normalized)).blob();
+          const mimeType = getMimeTypeFromDataUrl(normalized);
+          return { blob, mimeType };
+        })
+      );
+      const files = blobs.map(({ blob, mimeType }, idx) => ({
+        name: `attachment-${Date.now()}-${idx}.png`,
+        size: blob.size,
+        mimeType
+      }));
+      const presign = await attachmentRepository.stagePresign({ files });
+      await Promise.all(presign.uploads.map((u, index) => attachmentRepository.uploadStaged(u, blobs[index].blob)));
+      return presign.uploads.map((u) => u.attachmentToken);
+    } catch (e) {
+      const err = e instanceof Error ? e : new Error(String(e));
+      setError(err);
+      throw err;
+    } finally {
+      setUploading(false);
+    }
+  }, []);
+  return { uploadBase64Images, stageBase64Images, uploading, error };
 }
 
 // src/studio/hooks/useStudioActions.ts
@@ -2532,6 +3061,10 @@ var AgentRemoteDataSourceImpl = class extends BaseRemote {
     const { data } = await api.post("/v1/agent/editApp", payload);
     return data;
   }
+  async forkEditStart(payload) {
+    const { data } = await api.post("/v1/agent/forkEditStart", payload);
+    return data;
+  }
 };
 var agentRemoteDataSource = new AgentRemoteDataSourceImpl();
 
@@ -2549,6 +3082,10 @@ var AgentRepositoryImpl = class extends BaseRepository {
     const res = await this.remote.editApp(payload);
     return this.unwrapOrThrow(res);
   }
+  async forkEditStart(payload) {
+    const res = await this.remote.forkEditStart(payload);
+    return this.unwrapOrThrow(res);
+  }
 };
 var agentRepository = new AgentRepositoryImpl(agentRemoteDataSource);
 
@@ -2599,7 +3136,8 @@ function useStudioActions({
   onEditStart,
   onEditQueued,
   onEditFinished,
-  uploadAttachments
+  uploadAttachments,
+  stageAttachments
 }) {
   const [forking, setForking] = React8.useState(false);
   const [sending, setSending] = React8.useState(false);
@@ -2619,16 +3157,46 @@ function useStudioActions({
         const sourceAppId = app.id;
         if (shouldForkOnEdit) {
           setForking(true);
-          const forked = await appsRepository.fork(app.id, {});
-          targetApp = forked;
+          let attachmentTokens;
+          if (attachments && attachments.length > 0 && stageAttachments) {
+            attachmentTokens = await stageAttachments({ dataUrls: attachments });
+          }
+          const idempotencyKey2 = generateIdempotencyKey();
+          const startResult = await withRetry2(
+            async () => await agentRepository.forkEditStart({
+              source_app_id: sourceAppId,
+              prompt,
+              attachmentTokens,
+              idempotencyKey: idempotencyKey2
+            }),
+            { attempts: 3, baseDelayMs: 500, maxDelayMs: 4e3 }
+          );
+          targetApp = {
+            ...app,
+            id: startResult.targetAppId,
+            threadId: startResult.targetThreadId
+          };
           await trackRemixApp({
-            appId: forked.id,
+            appId: startResult.targetAppId,
             sourceAppId,
-            threadId: forked.threadId ?? void 0,
+            threadId: startResult.targetThreadId ?? void 0,
             success: true
           });
           forkSucceeded = true;
-          onForkedApp == null ? void 0 : onForkedApp(forked.id, { keepRenderingAppId: sourceAppId });
+          onForkedApp == null ? void 0 : onForkedApp(startResult.targetAppId, { keepRenderingAppId: sourceAppId });
+          onEditStart == null ? void 0 : onEditStart();
+          onEditQueued == null ? void 0 : onEditQueued({
+            queueItemId: startResult.queueItemId ?? null,
+            queuePosition: startResult.queuePosition ?? null
+          });
+          await trackEditApp({
+            appId: startResult.targetAppId,
+            threadId: startResult.targetThreadId,
+            promptLength: prompt.trim().length,
+            success: true
+          });
+          setForking(false);
+          return;
         }
         setForking(false);
         const threadId = targetApp.threadId;
@@ -2689,7 +3257,18 @@ function useStudioActions({
         onEditFinished == null ? void 0 : onEditFinished();
       }
     },
-    [app, onEditFinished, onEditQueued, onEditStart, onForkedApp, sending, shouldForkOnEdit, uploadAttachments, userId]
+    [
+      app,
+      onEditFinished,
+      onEditQueued,
+      onEditStart,
+      onForkedApp,
+      sending,
+      shouldForkOnEdit,
+      stageAttachments,
+      uploadAttachments,
+      userId
+    ]
   );
   return { isOwner, shouldForkOnEdit, forking, sending, error, sendEdit };
 }
@@ -2737,7 +3316,7 @@ function RuntimeRenderer({
 
 // src/studio/ui/StudioOverlay.tsx
 var React46 = __toESM(require("react"));
-var import_react_native59 = require("react-native");
+var import_react_native60 = require("react-native");
 
 // src/components/studio-sheet/StudioBottomSheet.tsx
 var React12 = __toESM(require("react"));
@@ -4640,7 +5219,7 @@ function AppCommentsSheet({ appId, onClose, onCountChange, onPlayApp }) {
 
 // src/studio/ui/PreviewPanel.tsx
 var React36 = __toESM(require("react"));
-var import_react_native45 = require("react-native");
+var import_react_native46 = require("react-native");
 
 // src/components/preview/PreviewPage.tsx
 var import_react_native24 = require("react-native");
@@ -4669,8 +5248,7 @@ function PreviewPage({ header, children, contentStyle }) {
 }
 
 // src/studio/ui/preview-panel/PreviewPanelHeader.tsx
-var React26 = __toESM(require("react"));
-var import_react_native30 = require("react-native");
+var import_react_native27 = require("react-native");
 
 // src/components/studio-sheet/StudioSheetHeader.tsx
 var import_react_native25 = require("react-native");
@@ -4789,12 +5367,56 @@ function StudioSheetHeaderIconButton({
   ) });
 }
 
-// src/components/primitives/Modal.tsx
-var import_react_native28 = require("react-native");
+// src/studio/ui/preview-panel/PreviewPanelHeader.tsx
+var import_jsx_runtime24 = require("react/jsx-runtime");
+function PreviewPanelHeader({
+  isOwner,
+  isPublic,
+  onClose,
+  onNavigateHome,
+  onGoToChat,
+  onShare
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+    StudioSheetHeader,
+    {
+      left: onNavigateHome ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(StudioSheetHeaderIconButton, { onPress: onNavigateHome, accessibilityLabel: "Home", appearance: "glass", intent: "primary", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(IconHome, { size: 20, colorToken: "onPrimary" }) }) : null,
+      center: null,
+      right: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_react_native27.View, { style: { flexDirection: "row", alignItems: "center" }, children: [
+        isOwner ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+          StudioSheetHeaderIconButton,
+          {
+            onPress: onGoToChat,
+            accessibilityLabel: "Chat",
+            intent: "primary",
+            appearance: "glass",
+            style: { marginRight: 8 },
+            children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(IconChat, { size: 20, colorToken: "onPrimary" })
+          }
+        ) : null,
+        isPublic && onShare ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+          StudioSheetHeaderIconButton,
+          {
+            onPress: onShare,
+            accessibilityLabel: "Share",
+            intent: "primary",
+            appearance: "glass",
+            style: { marginRight: 8 },
+            children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(IconShare, { size: 20, colorToken: "onPrimary" })
+          }
+        ) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(StudioSheetHeaderIconButton, { onPress: onClose, accessibilityLabel: "Close", appearance: "glass", intent: "primary", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(IconClose, { size: 20, colorToken: "onPrimary" }) })
+      ] })
+    }
+  );
+}
+
+// src/components/preview/PreviewHeroCard.tsx
+var import_react_native29 = require("react-native");
 
 // src/components/primitives/Surface.tsx
-var import_react_native27 = require("react-native");
-var import_jsx_runtime24 = require("react/jsx-runtime");
+var import_react_native28 = require("react-native");
+var import_jsx_runtime25 = require("react/jsx-runtime");
 function backgroundFor(variant, theme) {
   const { colors } = theme;
   switch (variant) {
@@ -4811,8 +5433,8 @@ function backgroundFor(variant, theme) {
 }
 function Surface({ variant = "surface", border = false, style, ...props }) {
   const theme = useTheme();
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
-    import_react_native27.View,
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+    import_react_native28.View,
     {
       ...props,
       style: [
@@ -4825,12 +5447,12 @@ function Surface({ variant = "surface", border = false, style, ...props }) {
 }
 
 // src/components/primitives/Card.tsx
-var import_jsx_runtime25 = require("react/jsx-runtime");
+var import_jsx_runtime26 = require("react/jsx-runtime");
 function Card({ variant = "surface", padded = true, border = true, style, ...props }) {
   const theme = useTheme();
   const radius = theme.radii.lg;
   const padding = padded ? theme.spacing.lg : 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
     Surface,
     {
       ...props,
@@ -4841,325 +5463,59 @@ function Card({ variant = "surface", padded = true, border = true, style, ...pro
   );
 }
 
-// src/components/primitives/Modal.tsx
-var import_jsx_runtime26 = require("react/jsx-runtime");
-function Modal({
-  visible,
-  onRequestClose,
-  dismissOnBackdropPress = true,
-  children,
-  contentStyle
+// src/components/preview/PreviewHeroCard.tsx
+var import_jsx_runtime27 = require("react/jsx-runtime");
+function PreviewHeroCard({
+  aspectRatio = 4 / 3,
+  overlayTopLeft,
+  background,
+  image,
+  overlayBottom,
+  style
 }) {
   const theme = useTheme();
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
-    import_react_native28.Modal,
+  const radius = 16;
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+    Card,
     {
-      visible,
-      transparent: true,
-      animationType: "fade",
-      onRequestClose,
-      children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_react_native28.View, { style: { flex: 1, backgroundColor: theme.colors.backdrop, justifyContent: "center", padding: theme.spacing.lg }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
-          import_react_native28.Pressable,
-          {
-            accessibilityRole: "button",
-            onPress: dismissOnBackdropPress ? onRequestClose : void 0,
-            style: { position: "absolute", inset: 0 }
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Card, { variant: "surfaceRaised", padded: true, style: [{ borderRadius: theme.radii.xl }, contentStyle], children })
-      ] })
-    }
-  );
-}
-
-// src/components/preview/PreviewStatusBadge.tsx
-var import_react_native29 = require("react-native");
-var import_lucide_react_native5 = require("lucide-react-native");
-
-// src/data/apps/types.ts
-var APP_STATUS_LABEL = {
-  ready: "Ready",
-  creating: "Creating",
-  editing: "Editing",
-  forking: "Forking",
-  merging: "Merging",
-  error: "Error",
-  archived: "Archived"
-};
-
-// src/components/preview/PreviewStatusBadge.tsx
-var import_jsx_runtime27 = require("react/jsx-runtime");
-var STATUS_BG = {
-  ready: "#10B981",
-  // emerald-500
-  creating: "#3B82F6",
-  // blue-500
-  editing: "#F59E0B",
-  // amber-500
-  forking: "#00CBC0",
-  // brand teal
-  merging: "#06B6D4",
-  // cyan-500
-  error: "#F43F5E",
-  // rose-500
-  archived: "#71717A"
-  // zinc-500
-};
-var STATUS_ICON = {
-  ready: import_lucide_react_native5.CheckCircle2,
-  creating: import_lucide_react_native5.Sparkles,
-  editing: import_lucide_react_native5.Pencil,
-  forking: import_lucide_react_native5.GitFork,
-  merging: import_lucide_react_native5.GitMerge,
-  error: import_lucide_react_native5.AlertTriangle,
-  archived: import_lucide_react_native5.Archive
-};
-function PreviewStatusBadge({ status }) {
-  const IconComp = STATUS_ICON[status];
-  const label = APP_STATUS_LABEL[status] ?? status;
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
-    import_react_native29.View,
-    {
-      style: {
-        flexDirection: "row",
-        alignItems: "center",
-        borderRadius: 999,
-        paddingHorizontal: 10,
-        paddingVertical: 4,
-        backgroundColor: STATUS_BG[status]
-      },
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(IconComp, { size: 12, color: "#FFFFFF", style: { marginRight: 4 } }),
-        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Text, { style: { color: "#FFFFFF", fontSize: 11, lineHeight: 14 }, children: label })
-      ]
-    }
-  );
-}
-
-// src/studio/ui/preview-panel/PreviewPanelHeader.tsx
-var import_jsx_runtime28 = require("react/jsx-runtime");
-function PreviewPanelHeader({
-  isOwner,
-  isPublic,
-  onClose,
-  onNavigateHome,
-  onGoToChat,
-  onShare,
-  relatedApps,
-  relatedAppsLoading,
-  switchingRelatedAppId,
-  onOpenRelatedApps,
-  onSwitchRelatedApp
-}) {
-  var _a;
-  const theme = useTheme();
-  const [relatedAppsOpen, setRelatedAppsOpen] = React26.useState(false);
-  const relatedAppItems = React26.useMemo(() => {
-    if (!relatedApps) return [];
-    const items = [];
-    if (relatedApps.original) {
-      items.push({ app: relatedApps.original, section: "original" });
-    }
-    for (const remix of relatedApps.remixes) {
-      items.push({ app: remix, section: "remix" });
-    }
-    return items;
-  }, [relatedApps]);
-  const uniqueRelatedCount = React26.useMemo(() => {
-    return new Set(relatedAppItems.map((item) => item.app.id)).size;
-  }, [relatedAppItems]);
-  const shouldShowRelatedApps = uniqueRelatedCount >= 2;
-  const currentAppId = relatedApps == null ? void 0 : relatedApps.current.id;
-  const originalAppId = ((_a = relatedApps == null ? void 0 : relatedApps.original) == null ? void 0 : _a.id) ?? null;
-  const sectionedRelatedApps = React26.useMemo(() => {
-    const original = [];
-    const remixes = [];
-    const seenIds = /* @__PURE__ */ new Set();
-    for (const item of relatedAppItems) {
-      if (seenIds.has(item.app.id)) continue;
-      seenIds.add(item.app.id);
-      if (item.section === "original") {
-        original.push(item);
-      } else {
-        remixes.push(item);
-      }
-    }
-    return { original, remixes };
-  }, [relatedAppItems]);
-  const openRelatedApps = React26.useCallback(() => {
-    setRelatedAppsOpen(true);
-    onOpenRelatedApps == null ? void 0 : onOpenRelatedApps();
-  }, [onOpenRelatedApps]);
-  const closeRelatedApps = React26.useCallback(() => {
-    setRelatedAppsOpen(false);
-  }, []);
-  const handleSelectRelatedApp = React26.useCallback(
-    (targetAppId) => {
-      if (!relatedApps) return;
-      if (targetAppId === relatedApps.current.id) return;
-      onSwitchRelatedApp == null ? void 0 : onSwitchRelatedApp(targetAppId);
-      setRelatedAppsOpen(false);
-    },
-    [onSwitchRelatedApp, relatedApps]
-  );
-  const renderRelatedRow = React26.useCallback(
-    (item) => {
-      const app = item.app;
-      const isCurrent = app.id === currentAppId;
-      const isOriginal = app.id === originalAppId;
-      const isReady = app.status === "ready";
-      const isSwitching = switchingRelatedAppId === app.id;
-      const disabled = isCurrent || !isReady || Boolean(switchingRelatedAppId);
-      return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
-        import_react_native30.Pressable,
-        {
-          accessibilityRole: "button",
-          accessibilityLabel: `Switch to ${app.name}`,
-          disabled,
-          onPress: () => handleSelectRelatedApp(app.id),
-          style: {
-            borderRadius: theme.radii.md,
-            borderWidth: 1,
-            borderColor: theme.colors.border,
-            backgroundColor: theme.colors.surface,
-            paddingHorizontal: theme.spacing.md,
-            paddingVertical: theme.spacing.sm,
-            marginBottom: theme.spacing.sm,
-            opacity: disabled ? 0.6 : 1
-          },
-          children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_react_native30.View, { style: { flexDirection: "row", alignItems: "center", justifyContent: "space-between", gap: 8 }, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_react_native30.View, { style: { flex: 1, paddingRight: 8 }, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Text, { numberOfLines: 1, style: { color: theme.colors.text, fontWeight: theme.typography.fontWeight.semibold }, children: app.name }),
-              /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react_native30.View, { style: { height: 4 } }),
-              /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_react_native30.View, { style: { flexDirection: "row", alignItems: "center", flexWrap: "wrap", gap: 6 }, children: [
-                isOriginal ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react_native30.View, { style: { borderRadius: 999, paddingHorizontal: 8, paddingVertical: 2, backgroundColor: theme.colors.neutral }, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Text, { style: { color: theme.colors.textMuted, fontSize: 11 }, children: "Original" }) }) : null,
-                isCurrent ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react_native30.View, { style: { borderRadius: 999, paddingHorizontal: 8, paddingVertical: 2, backgroundColor: theme.colors.primary }, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Text, { style: { color: theme.colors.onPrimary, fontSize: 11 }, children: "Current" }) }) : null
-              ] })
-            ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_react_native30.View, { style: { alignItems: "flex-end", gap: 8 }, children: [
-              app.status ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(PreviewStatusBadge, { status: app.status }) : null,
-              isSwitching ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react_native30.ActivityIndicator, { size: "small", color: theme.colors.primary }) : null
-            ] })
-          ] })
-        },
-        app.id
-      );
-    },
-    [currentAppId, handleSelectRelatedApp, originalAppId, switchingRelatedAppId, theme]
-  );
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_jsx_runtime28.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
-      StudioSheetHeader,
-      {
-        left: onNavigateHome ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(StudioSheetHeaderIconButton, { onPress: onNavigateHome, accessibilityLabel: "Home", appearance: "glass", intent: "primary", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(IconHome, { size: 20, colorToken: "onPrimary" }) }) : null,
-        center: null,
-        right: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_react_native30.View, { style: { flexDirection: "row", alignItems: "center" }, children: [
-          isOwner ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
-            StudioSheetHeaderIconButton,
-            {
-              onPress: onGoToChat,
-              accessibilityLabel: "Chat",
-              intent: "primary",
-              appearance: "glass",
-              style: { marginRight: 8 },
-              children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(IconChat, { size: 20, colorToken: "onPrimary" })
-            }
-          ) : null,
-          isPublic && onShare ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
-            StudioSheetHeaderIconButton,
-            {
-              onPress: onShare,
-              accessibilityLabel: "Share",
-              intent: "primary",
-              appearance: "glass",
-              style: { marginRight: 8 },
-              children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(IconShare, { size: 20, colorToken: "onPrimary" })
-            }
-          ) : null,
-          shouldShowRelatedApps ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
-            StudioSheetHeaderIconButton,
-            {
-              onPress: openRelatedApps,
-              accessibilityLabel: "Related apps",
-              intent: "primary",
-              appearance: "glass",
-              style: { marginRight: 8 },
-              children: relatedAppsLoading ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react_native30.ActivityIndicator, { size: "small", color: theme.colors.onPrimary }) : /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(IconChevronDown, { size: 20, colorToken: "onPrimary" })
-            }
-          ) : null,
-          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(StudioSheetHeaderIconButton, { onPress: onClose, accessibilityLabel: "Close", appearance: "glass", intent: "primary", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(IconClose, { size: 20, colorToken: "onPrimary" }) })
-        ] })
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Modal, { visible: relatedAppsOpen, onRequestClose: closeRelatedApps, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_react_native30.View, { style: { gap: theme.spacing.sm }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Text, { style: { color: theme.colors.text, fontSize: 18, fontWeight: theme.typography.fontWeight.semibold }, children: "Related apps" }),
-      sectionedRelatedApps.original.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_react_native30.View, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Text, { style: { color: theme.colors.textMuted, marginBottom: theme.spacing.xs }, children: "Original" }),
-        sectionedRelatedApps.original.map(renderRelatedRow)
-      ] }) : null,
-      sectionedRelatedApps.remixes.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_react_native30.View, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Text, { style: { color: theme.colors.textMuted, marginBottom: theme.spacing.xs }, children: "Remixes" }),
-        sectionedRelatedApps.remixes.map(renderRelatedRow)
-      ] }) : null
-    ] }) })
-  ] });
-}
-
-// src/components/preview/PreviewHeroCard.tsx
-var import_react_native31 = require("react-native");
-var import_jsx_runtime29 = require("react/jsx-runtime");
-function PreviewHeroCard({
-  aspectRatio = 4 / 3,
-  overlayTopLeft,
-  background,
-  image,
-  overlayBottom,
-  style
-}) {
-  const theme = useTheme();
-  const radius = 16;
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
-    Card,
-    {
-      variant: "surfaceRaised",
-      padded: false,
-      border: false,
-      style: [
-        {
-          width: "100%",
-          aspectRatio,
-          borderRadius: radius,
-          overflow: "hidden"
-        },
-        style
-      ],
-      children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_react_native31.View, { style: { flex: 1 }, children: [
-        background ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_react_native31.View, { style: { position: "absolute", inset: 0 }, children: background }) : null,
-        image ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_react_native31.View, { style: { position: "absolute", inset: 0 }, children: image }) : null,
-        overlayTopLeft ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_react_native31.View, { style: { position: "absolute", top: theme.spacing.sm, left: theme.spacing.sm, zIndex: 2 }, children: overlayTopLeft }) : null,
-        overlayBottom ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_react_native31.View, { style: { flex: 1, justifyContent: "flex-end" }, children: overlayBottom }) : null
+      variant: "surfaceRaised",
+      padded: false,
+      border: false,
+      style: [
+        {
+          width: "100%",
+          aspectRatio,
+          borderRadius: radius,
+          overflow: "hidden"
+        },
+        style
+      ],
+      children: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_react_native29.View, { style: { flex: 1 }, children: [
+        background ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_react_native29.View, { style: { position: "absolute", inset: 0 }, children: background }) : null,
+        image ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_react_native29.View, { style: { position: "absolute", inset: 0 }, children: image }) : null,
+        overlayTopLeft ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_react_native29.View, { style: { position: "absolute", top: theme.spacing.sm, left: theme.spacing.sm, zIndex: 2 }, children: overlayTopLeft }) : null,
+        overlayBottom ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_react_native29.View, { style: { flex: 1, justifyContent: "flex-end" }, children: overlayBottom }) : null
       ] })
     }
   );
 }
 
 // src/components/preview/PreviewPlaceholder.tsx
-var React27 = __toESM(require("react"));
-var import_react_native32 = require("react-native");
+var React26 = __toESM(require("react"));
+var import_react_native30 = require("react-native");
 var import_expo_linear_gradient2 = require("expo-linear-gradient");
-var import_jsx_runtime30 = require("react/jsx-runtime");
+var import_jsx_runtime28 = require("react/jsx-runtime");
 function PreviewPlaceholder({ visible, style }) {
   if (!visible) return null;
-  const opacityAnim = React27.useRef(new import_react_native32.Animated.Value(0)).current;
-  React27.useEffect(() => {
+  const opacityAnim = React26.useRef(new import_react_native30.Animated.Value(0)).current;
+  React26.useEffect(() => {
     if (!visible) return;
-    const animation = import_react_native32.Animated.loop(
-      import_react_native32.Animated.sequence([
-        import_react_native32.Animated.timing(opacityAnim, { toValue: 1, duration: 1500, useNativeDriver: true }),
-        import_react_native32.Animated.timing(opacityAnim, { toValue: 2, duration: 1500, useNativeDriver: true }),
-        import_react_native32.Animated.timing(opacityAnim, { toValue: 3, duration: 1500, useNativeDriver: true }),
-        import_react_native32.Animated.timing(opacityAnim, { toValue: 0, duration: 1500, useNativeDriver: true })
+    const animation = import_react_native30.Animated.loop(
+      import_react_native30.Animated.sequence([
+        import_react_native30.Animated.timing(opacityAnim, { toValue: 1, duration: 1500, useNativeDriver: true }),
+        import_react_native30.Animated.timing(opacityAnim, { toValue: 2, duration: 1500, useNativeDriver: true }),
+        import_react_native30.Animated.timing(opacityAnim, { toValue: 3, duration: 1500, useNativeDriver: true }),
+        import_react_native30.Animated.timing(opacityAnim, { toValue: 0, duration: 1500, useNativeDriver: true })
       ])
     );
     animation.start();
@@ -5169,8 +5525,8 @@ function PreviewPlaceholder({ visible, style }) {
   const opacity2 = opacityAnim.interpolate({ inputRange: [0, 1, 2, 3], outputRange: [0, 1, 0, 0] });
   const opacity3 = opacityAnim.interpolate({ inputRange: [0, 1, 2, 3], outputRange: [0, 0, 1, 0] });
   const opacity4 = opacityAnim.interpolate({ inputRange: [0, 1, 2, 3], outputRange: [0, 0, 0, 1] });
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_jsx_runtime30.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_react_native32.Animated.View, { style: [{ position: "absolute", inset: 0, opacity: opacity1 }, style], children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_jsx_runtime28.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react_native30.Animated.View, { style: [{ position: "absolute", inset: 0, opacity: opacity1 }, style], children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
       import_expo_linear_gradient2.LinearGradient,
       {
         colors: ["rgba(98, 0, 238, 0.45)", "rgba(168, 85, 247, 0.35)"],
@@ -5179,7 +5535,7 @@ function PreviewPlaceholder({ visible, style }) {
         style: { width: "100%", height: "100%" }
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_react_native32.Animated.View, { style: [{ position: "absolute", inset: 0, opacity: opacity2 }, style], children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react_native30.Animated.View, { style: [{ position: "absolute", inset: 0, opacity: opacity2 }, style], children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
       import_expo_linear_gradient2.LinearGradient,
       {
         colors: ["rgba(168, 85, 247, 0.45)", "rgba(139, 92, 246, 0.35)"],
@@ -5188,7 +5544,7 @@ function PreviewPlaceholder({ visible, style }) {
         style: { width: "100%", height: "100%" }
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_react_native32.Animated.View, { style: [{ position: "absolute", inset: 0, opacity: opacity3 }, style], children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react_native30.Animated.View, { style: [{ position: "absolute", inset: 0, opacity: opacity3 }, style], children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
       import_expo_linear_gradient2.LinearGradient,
       {
         colors: ["rgba(139, 92, 246, 0.45)", "rgba(126, 34, 206, 0.35)"],
@@ -5197,7 +5553,7 @@ function PreviewPlaceholder({ visible, style }) {
         style: { width: "100%", height: "100%" }
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_react_native32.Animated.View, { style: [{ position: "absolute", inset: 0, opacity: opacity4 }, style], children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react_native30.Animated.View, { style: [{ position: "absolute", inset: 0, opacity: opacity4 }, style], children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
       import_expo_linear_gradient2.LinearGradient,
       {
         colors: ["rgba(126, 34, 206, 0.45)", "rgba(98, 0, 238, 0.35)"],
@@ -5210,12 +5566,12 @@ function PreviewPlaceholder({ visible, style }) {
 }
 
 // src/components/preview/PreviewImage.tsx
-var import_react_native33 = require("react-native");
-var import_jsx_runtime31 = require("react/jsx-runtime");
+var import_react_native31 = require("react-native");
+var import_jsx_runtime29 = require("react/jsx-runtime");
 function PreviewImage({ uri, onLoad, style }) {
   if (!uri) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
-    import_react_native33.Image,
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+    import_react_native31.Image,
     {
       source: { uri },
       resizeMode: "cover",
@@ -5226,15 +5582,15 @@ function PreviewImage({ uri, onLoad, style }) {
 }
 
 // src/components/preview/StatsBar.tsx
-var import_react_native34 = require("react-native");
+var import_react_native32 = require("react-native");
 var import_liquid_glass7 = require("@callstack/liquid-glass");
-var import_lucide_react_native6 = require("lucide-react-native");
+var import_lucide_react_native5 = require("lucide-react-native");
 
 // src/components/icons/MergeIcon.tsx
 var import_react_native_svg2 = __toESM(require("react-native-svg"));
-var import_jsx_runtime32 = require("react/jsx-runtime");
+var import_jsx_runtime30 = require("react/jsx-runtime");
 function MergeIcon({ color = "currentColor", width = 24, height = 24, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_react_native_svg2.default, { viewBox: "0 0 486 486", width, height, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_react_native_svg2.default, { viewBox: "0 0 486 486", width, height, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
     import_react_native_svg2.Path,
     {
       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",
@@ -5244,7 +5600,7 @@ function MergeIcon({ color = "currentColor", width = 24, height = 24, ...props }
 }
 
 // src/components/preview/StatsBar.tsx
-var import_jsx_runtime33 = require("react/jsx-runtime");
+var import_jsx_runtime31 = require("react/jsx-runtime");
 function StatsBar({
   likeCount,
   commentCount,
@@ -5258,15 +5614,15 @@ function StatsBar({
 }) {
   const theme = useTheme();
   const statsBgColor = theme.scheme === "dark" ? "rgba(24, 24, 27, 0.5)" : "rgba(255, 255, 255, 0.5)";
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
-    import_react_native34.View,
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+    import_react_native32.View,
     {
       style: [
         { position: "absolute", bottom: 12, width: "100%", paddingHorizontal: 12 },
         centered && { alignItems: "center" },
         style
       ],
-      children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
         ResettableLiquidGlassView,
         {
           style: [
@@ -5275,17 +5631,17 @@ function StatsBar({
             !import_liquid_glass7.isLiquidGlassSupported && { backgroundColor: statsBgColor }
           ],
           effect: "clear",
-          children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_react_native34.View, { style: { flexDirection: "row", alignItems: "center", justifyContent: "space-between", paddingHorizontal: 16 }, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
-              import_react_native34.Pressable,
+          children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_react_native32.View, { style: { flexDirection: "row", alignItems: "center", justifyContent: "space-between", paddingHorizontal: 16 }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+              import_react_native32.Pressable,
               {
                 disabled: !onPressLike,
                 onPress: onPressLike,
                 hitSlop: 8,
                 style: { paddingVertical: 8 },
-                children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_react_native34.View, { style: { flexDirection: "row", alignItems: "center" }, children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
-                    import_lucide_react_native6.Heart,
+                children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_react_native32.View, { style: { flexDirection: "row", alignItems: "center" }, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+                    import_lucide_react_native5.Heart,
                     {
                       size: 16,
                       strokeWidth: 2.5,
@@ -5293,8 +5649,8 @@ function StatsBar({
                       fill: isLiked ? theme.colors.danger : "transparent"
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_react_native34.View, { style: { width: 4 } }),
-                  /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_react_native32.View, { style: { width: 4 } }),
+                  /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
                     Text,
                     {
                       variant: "caption",
@@ -5308,72 +5664,415 @@ function StatsBar({
                 ] })
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
-              import_react_native34.Pressable,
+            /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+              import_react_native32.Pressable,
               {
                 disabled: !onPressComments,
                 onPress: onPressComments,
                 hitSlop: 8,
                 style: { paddingVertical: 8 },
-                children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_react_native34.View, { style: { flexDirection: "row", alignItems: "center" }, children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_lucide_react_native6.MessageCircle, { size: 16, strokeWidth: 2.5, color: "#FFFFFF" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_react_native34.View, { style: { width: 4 } }),
-                  /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Text, { variant: "caption", style: { color: "#FFFFFF", fontWeight: theme.typography.fontWeight.bold }, children: commentCount })
+                children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_react_native32.View, { style: { flexDirection: "row", alignItems: "center" }, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_lucide_react_native5.MessageCircle, { size: 16, strokeWidth: 2.5, color: "#FFFFFF" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_react_native32.View, { style: { width: 4 } }),
+                  /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Text, { variant: "caption", style: { color: "#FFFFFF", fontWeight: theme.typography.fontWeight.bold }, children: commentCount })
                 ] })
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_react_native34.View, { style: { flexDirection: "row", alignItems: "center", paddingVertical: 8 }, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_react_native34.View, { style: { transform: [{ scaleY: -1 }] }, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(MergeIcon, { width: 14, height: 14, color: "#FFFFFF" }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_react_native34.View, { style: { width: 4 } }),
-              /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Text, { variant: "caption", style: { color: "#FFFFFF", fontWeight: theme.typography.fontWeight.bold }, children: forkCount })
+            /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_react_native32.View, { style: { flexDirection: "row", alignItems: "center", paddingVertical: 8 }, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_react_native32.View, { style: { transform: [{ scaleY: -1 }] }, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(MergeIcon, { width: 14, height: 14, color: "#FFFFFF" }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_react_native32.View, { style: { width: 4 } }),
+              /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Text, { variant: "caption", style: { color: "#FFFFFF", fontWeight: theme.typography.fontWeight.bold }, children: forkCount })
             ] })
           ] })
         }
       )
     }
   );
-}
-
-// src/studio/ui/preview-panel/PreviewHeroSection.tsx
-var import_jsx_runtime34 = require("react/jsx-runtime");
-function PreviewHeroSection({
-  appStatus,
-  showProcessing,
-  imageUrl,
-  imageLoaded,
-  onImageLoad,
-  stats
-}) {
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
-    PreviewHeroCard,
-    {
-      overlayTopLeft: showProcessing ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(PreviewStatusBadge, { status: appStatus }) : null,
-      background: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(PreviewPlaceholder, { visible: !imageLoaded }),
-      image: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(PreviewImage, { uri: imageUrl, onLoad: onImageLoad }),
-      overlayBottom: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
-        StatsBar,
+}
+
+// src/components/preview/PreviewStatusBadge.tsx
+var import_react_native33 = require("react-native");
+var import_lucide_react_native6 = require("lucide-react-native");
+
+// src/data/apps/types.ts
+var APP_STATUS_LABEL = {
+  ready: "Ready",
+  creating: "Creating",
+  editing: "Editing",
+  forking: "Forking",
+  merging: "Merging",
+  error: "Error",
+  archived: "Archived"
+};
+
+// src/components/preview/PreviewStatusBadge.tsx
+var import_jsx_runtime32 = require("react/jsx-runtime");
+var STATUS_BG = {
+  ready: "#10B981",
+  // emerald-500
+  creating: "#3B82F6",
+  // blue-500
+  editing: "#F59E0B",
+  // amber-500
+  forking: "#00CBC0",
+  // brand teal
+  merging: "#06B6D4",
+  // cyan-500
+  error: "#F43F5E",
+  // rose-500
+  archived: "#71717A"
+  // zinc-500
+};
+var STATUS_ICON = {
+  ready: import_lucide_react_native6.CheckCircle2,
+  creating: import_lucide_react_native6.Sparkles,
+  editing: import_lucide_react_native6.Pencil,
+  forking: import_lucide_react_native6.GitFork,
+  merging: import_lucide_react_native6.GitMerge,
+  error: import_lucide_react_native6.AlertTriangle,
+  archived: import_lucide_react_native6.Archive
+};
+function PreviewStatusBadge({ status }) {
+  const IconComp = STATUS_ICON[status];
+  const label = APP_STATUS_LABEL[status] ?? status;
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
+    import_react_native33.View,
+    {
+      style: {
+        flexDirection: "row",
+        alignItems: "center",
+        borderRadius: 999,
+        paddingHorizontal: 10,
+        paddingVertical: 4,
+        backgroundColor: STATUS_BG[status]
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(IconComp, { size: 12, color: "#FFFFFF", style: { marginRight: 4 } }),
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Text, { style: { color: "#FFFFFF", fontSize: 11, lineHeight: 14 }, children: label })
+      ]
+    }
+  );
+}
+
+// src/studio/ui/preview-panel/PreviewHeroSection.tsx
+var import_jsx_runtime33 = require("react/jsx-runtime");
+function PreviewHeroSection({
+  appStatus,
+  showProcessing,
+  imageUrl,
+  imageLoaded,
+  onImageLoad,
+  stats
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+    PreviewHeroCard,
+    {
+      overlayTopLeft: showProcessing ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(PreviewStatusBadge, { status: appStatus }) : null,
+      background: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(PreviewPlaceholder, { visible: !imageLoaded }),
+      image: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(PreviewImage, { uri: imageUrl, onLoad: onImageLoad }),
+      overlayBottom: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+        StatsBar,
+        {
+          likeCount: stats.likeCount,
+          commentCount: stats.commentCount,
+          forkCount: stats.forkCount,
+          isLiked: stats.isLiked,
+          onPressLike: () => void stats.handleLike(),
+          onPressComments: stats.handleOpenComments,
+          centered: true,
+          fixedWidth: 160
+        }
+      ),
+      style: { marginBottom: 16 }
+    }
+  );
+}
+
+// src/studio/ui/preview-panel/PreviewRelatedAppsSection.tsx
+var React27 = __toESM(require("react"));
+var import_react_native35 = require("react-native");
+
+// src/components/primitives/Modal.tsx
+var import_react_native34 = require("react-native");
+var import_jsx_runtime34 = require("react/jsx-runtime");
+function Modal({
+  visible,
+  onRequestClose,
+  dismissOnBackdropPress = true,
+  children,
+  contentStyle
+}) {
+  const theme = useTheme();
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+    import_react_native34.Modal,
+    {
+      visible,
+      transparent: true,
+      animationType: "fade",
+      onRequestClose,
+      children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_react_native34.View, { style: { flex: 1, backgroundColor: theme.colors.backdrop, justifyContent: "center", padding: theme.spacing.lg }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+          import_react_native34.Pressable,
+          {
+            accessibilityRole: "button",
+            onPress: dismissOnBackdropPress ? onRequestClose : void 0,
+            style: { position: "absolute", inset: 0 }
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Card, { variant: "surfaceRaised", padded: true, style: [{ borderRadius: theme.radii.xl }, contentStyle], children })
+      ] })
+    }
+  );
+}
+
+// src/studio/ui/preview-panel/SectionTitle.tsx
+var import_jsx_runtime35 = require("react/jsx-runtime");
+function SectionTitle({ children, marginTop }) {
+  const theme = useTheme();
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+    Text,
+    {
+      style: {
+        color: theme.colors.textMuted,
+        fontSize: 12,
+        lineHeight: 16,
+        textTransform: "uppercase",
+        letterSpacing: 0.8,
+        marginTop: marginTop ?? theme.spacing.sm,
+        marginBottom: theme.spacing.sm,
+        fontWeight: theme.typography.fontWeight.bold
+      },
+      children
+    }
+  );
+}
+
+// src/studio/ui/preview-panel/PreviewRelatedAppsSection.tsx
+var import_jsx_runtime36 = require("react/jsx-runtime");
+var INLINE_VISIBLE_COUNT = 4;
+function formatRelativeUpdatedAt(updatedAt) {
+  const parsed = new Date(updatedAt);
+  const ms = parsed.getTime();
+  if (!Number.isFinite(ms)) return "Updated recently";
+  const diffMs = Date.now() - ms;
+  if (diffMs < 6e4) return "Updated just now";
+  const minutes = Math.floor(diffMs / 6e4);
+  if (minutes < 60) return `Updated ${minutes}m ago`;
+  const hours = Math.floor(minutes / 60);
+  if (hours < 24) return `Updated ${hours}h ago`;
+  const days = Math.floor(hours / 24);
+  if (days === 1) return "Updated yesterday";
+  if (days < 7) return `Updated ${days}d ago`;
+  return `Updated ${parsed.toLocaleDateString(void 0, { month: "short", day: "numeric" })}`;
+}
+function PreviewRelatedAppsSection({
+  relatedApps,
+  relatedAppsLoading,
+  switchingRelatedAppId,
+  onOpenRelatedApps,
+  onSwitchRelatedApp
+}) {
+  var _a;
+  const theme = useTheme();
+  const [relatedAppsOpen, setRelatedAppsOpen] = React27.useState(false);
+  const relatedAppItems = React27.useMemo(() => {
+    if (!relatedApps) return [];
+    const items = [];
+    if (relatedApps.original) {
+      items.push({ app: relatedApps.original, section: "original" });
+    }
+    for (const remix of relatedApps.remixes) {
+      items.push({ app: remix, section: "remix" });
+    }
+    return items;
+  }, [relatedApps]);
+  const dedupedRelatedApps = React27.useMemo(() => {
+    const seen = /* @__PURE__ */ new Set();
+    const items = [];
+    for (const item of relatedAppItems) {
+      if (seen.has(item.app.id)) continue;
+      seen.add(item.app.id);
+      items.push(item);
+    }
+    return items;
+  }, [relatedAppItems]);
+  const uniqueRelatedCount = dedupedRelatedApps.length;
+  const shouldShowRelatedApps = uniqueRelatedCount >= 2;
+  const currentAppId = relatedApps == null ? void 0 : relatedApps.current.id;
+  const originalAppId = ((_a = relatedApps == null ? void 0 : relatedApps.original) == null ? void 0 : _a.id) ?? null;
+  const sectionedRelatedApps = React27.useMemo(() => {
+    const original = [];
+    const remixes = [];
+    for (const item of dedupedRelatedApps) {
+      if (item.section === "original") {
+        original.push(item);
+      } else {
+        remixes.push(item);
+      }
+    }
+    return { original, remixes };
+  }, [dedupedRelatedApps]);
+  const inlineItems = React27.useMemo(() => dedupedRelatedApps.slice(0, INLINE_VISIBLE_COUNT), [dedupedRelatedApps]);
+  const overflowCount = Math.max(0, uniqueRelatedCount - inlineItems.length);
+  const canOpenModal = overflowCount > 0;
+  const closeRelatedApps = React27.useCallback(() => {
+    setRelatedAppsOpen(false);
+  }, []);
+  const openRelatedApps = React27.useCallback(() => {
+    if (!canOpenModal) return;
+    setRelatedAppsOpen(true);
+    onOpenRelatedApps == null ? void 0 : onOpenRelatedApps();
+  }, [canOpenModal, onOpenRelatedApps]);
+  const handleSelectRelatedApp = React27.useCallback(
+    (targetAppId) => {
+      if (!relatedApps) return;
+      if (targetAppId === relatedApps.current.id) return;
+      onSwitchRelatedApp == null ? void 0 : onSwitchRelatedApp(targetAppId);
+      setRelatedAppsOpen(false);
+    },
+    [onSwitchRelatedApp, relatedApps]
+  );
+  const renderBadges = React27.useCallback(
+    (item, isCurrent) => {
+      const badges = [];
+      if (item.app.id === originalAppId) {
+        badges.push(
+          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+            import_react_native35.View,
+            {
+              style: { borderRadius: 999, paddingHorizontal: 8, paddingVertical: 2, backgroundColor: withAlpha(theme.colors.neutral, 0.4) },
+              children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Text, { style: { color: theme.colors.textMuted, fontSize: 11 }, children: "Original" })
+            },
+            "original"
+          )
+        );
+      }
+      if (isCurrent) {
+        badges.push(
+          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+            import_react_native35.View,
+            {
+              style: { borderRadius: 999, paddingHorizontal: 8, paddingVertical: 2, backgroundColor: theme.colors.primary },
+              children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Text, { style: { color: theme.colors.onPrimary, fontSize: 11 }, children: "Current" })
+            },
+            "current"
+          )
+        );
+      }
+      return badges;
+    },
+    [originalAppId, theme.colors.neutral, theme.colors.onPrimary, theme.colors.primary, theme.colors.textMuted]
+  );
+  const renderRelatedCard = React27.useCallback(
+    (item, options) => {
+      const isCurrent = item.app.id === currentAppId;
+      const isReady = item.app.status === "ready";
+      const isSwitching = switchingRelatedAppId === item.app.id;
+      const disabled = isCurrent || !isReady || Boolean(switchingRelatedAppId);
+      return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+        import_react_native35.Pressable,
         {
-          likeCount: stats.likeCount,
-          commentCount: stats.commentCount,
-          forkCount: stats.forkCount,
-          isLiked: stats.isLiked,
-          onPressLike: () => void stats.handleLike(),
-          onPressComments: stats.handleOpenComments,
-          centered: true,
-          fixedWidth: 160
-        }
-      ),
-      style: { marginBottom: 16 }
-    }
+          accessibilityRole: "button",
+          accessibilityLabel: `Switch to ${item.app.name}, ${formatRelativeUpdatedAt(item.app.updatedAt).toLowerCase()}`,
+          disabled,
+          onPress: () => handleSelectRelatedApp(item.app.id),
+          style: {
+            borderRadius: theme.radii.md,
+            borderWidth: 1,
+            borderColor: withAlpha(theme.colors.border, isCurrent ? 1 : 0.8),
+            backgroundColor: isCurrent ? withAlpha(theme.colors.primary, 0.09) : withAlpha(theme.colors.surfaceRaised, 0.5),
+            paddingHorizontal: theme.spacing.sm,
+            paddingVertical: 8,
+            opacity: disabled ? 0.7 : 1,
+            width: (options == null ? void 0 : options.fullWidth) ? void 0 : 188,
+            minWidth: (options == null ? void 0 : options.fullWidth) ? void 0 : 188,
+            marginBottom: (options == null ? void 0 : options.fullWidth) ? theme.spacing.sm : 0
+          },
+          children: /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_react_native35.View, { style: { flexDirection: "row", alignItems: "flex-start", justifyContent: "space-between", gap: 8 }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_react_native35.View, { style: { flex: 1, minWidth: 0 }, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Text, { numberOfLines: 1, style: { color: theme.colors.text, fontWeight: theme.typography.fontWeight.semibold }, children: item.app.name }),
+              /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Text, { style: { marginTop: 2, color: theme.colors.textMuted, fontSize: 12 }, children: formatRelativeUpdatedAt(item.app.updatedAt) }),
+              /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+                import_react_native35.View,
+                {
+                  style: {
+                    marginTop: 4,
+                    minHeight: 20,
+                    flexDirection: "row",
+                    alignItems: "center",
+                    flexWrap: "wrap",
+                    gap: 6
+                  },
+                  children: renderBadges(item, isCurrent)
+                }
+              )
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_react_native35.View, { style: { alignItems: "flex-end", gap: 6 }, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_react_native35.View, { style: { minHeight: 20, justifyContent: "center" }, children: !isReady ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(PreviewStatusBadge, { status: item.app.status }) : null }),
+              isSwitching ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_react_native35.ActivityIndicator, { size: "small", color: theme.colors.primary }) : null
+            ] })
+          ] })
+        },
+        item.app.id
+      );
+    },
+    [currentAppId, handleSelectRelatedApp, renderBadges, switchingRelatedAppId, theme]
   );
+  if (!relatedAppsLoading && !shouldShowRelatedApps) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_jsx_runtime36.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(SectionTitle, { children: "Related Apps" }),
+    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+      import_react_native35.View,
+      {
+        style: {
+          flexDirection: "row",
+          alignItems: "center",
+          justifyContent: "flex-end",
+          marginBottom: theme.spacing.xs,
+          paddingHorizontal: theme.spacing.md
+        },
+        children: canOpenModal ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_react_native35.Pressable, { accessibilityRole: "button", accessibilityLabel: "Open all related apps", onPress: openRelatedApps, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(Text, { style: { color: theme.colors.primary, fontSize: 12, fontWeight: theme.typography.fontWeight.semibold }, children: [
+          "See all (",
+          uniqueRelatedCount,
+          ")"
+        ] }) }) : null
+      }
+    ),
+    relatedAppsLoading ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_react_native35.View, { style: { height: 72, alignItems: "center", justifyContent: "center", marginBottom: theme.spacing.xs }, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_react_native35.ActivityIndicator, { color: theme.colors.primary }) }) : /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+      import_react_native35.ScrollView,
+      {
+        horizontal: true,
+        showsHorizontalScrollIndicator: false,
+        style: { flexGrow: 0 },
+        contentContainerStyle: {
+          paddingHorizontal: theme.spacing.md,
+          gap: theme.spacing.sm,
+          paddingBottom: theme.spacing.xs,
+          alignItems: "flex-start"
+        },
+        children: inlineItems.map((item) => renderRelatedCard(item))
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Modal, { visible: relatedAppsOpen, onRequestClose: closeRelatedApps, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_react_native35.View, { style: { gap: theme.spacing.sm }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Text, { style: { color: theme.colors.text, fontSize: 18, fontWeight: theme.typography.fontWeight.semibold }, children: "Related apps" }),
+      sectionedRelatedApps.original.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_react_native35.View, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Text, { style: { color: theme.colors.textMuted, marginBottom: theme.spacing.xs }, children: "Original" }),
+        sectionedRelatedApps.original.map((item) => renderRelatedCard(item, { fullWidth: true }))
+      ] }) : null,
+      sectionedRelatedApps.remixes.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_react_native35.View, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Text, { style: { color: theme.colors.textMuted, marginBottom: theme.spacing.xs }, children: "Remixes" }),
+        sectionedRelatedApps.remixes.map((item) => renderRelatedCard(item, { fullWidth: true }))
+      ] }) : null
+    ] }) })
+  ] });
 }
 
 // src/studio/ui/preview-panel/PreviewMetaSection.tsx
-var import_react_native36 = require("react-native");
+var import_react_native37 = require("react-native");
 
 // src/components/preview/PreviewMetaRow.tsx
-var import_react_native35 = require("react-native");
-var import_jsx_runtime35 = require("react/jsx-runtime");
+var import_react_native36 = require("react-native");
+var import_jsx_runtime37 = require("react/jsx-runtime");
 function PreviewMetaRow({
   avatarUri,
   creatorName,
@@ -5384,11 +6083,11 @@ function PreviewMetaRow({
   style
 }) {
   const theme = useTheme();
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_react_native35.View, { style: [{ alignSelf: "stretch" }, style], children: [
-    /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_react_native35.View, { style: { flexDirection: "row", alignItems: "center" }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Avatar, { uri: avatarUri, name: creatorName, size: 24, style: { marginRight: theme.spacing.sm } }),
-      /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_react_native35.View, { style: { flexDirection: "row", alignItems: "center", flex: 1, minWidth: 0, marginRight: theme.spacing.sm }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_react_native36.View, { style: [{ alignSelf: "stretch" }, style], children: [
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_react_native36.View, { style: { flexDirection: "row", alignItems: "center" }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Avatar, { uri: avatarUri, name: creatorName, size: 24, style: { marginRight: theme.spacing.sm } }),
+      /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_react_native36.View, { style: { flexDirection: "row", alignItems: "center", flex: 1, minWidth: 0, marginRight: theme.spacing.sm }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
           Text,
           {
             numberOfLines: 1,
@@ -5402,11 +6101,11 @@ function PreviewMetaRow({
             children: title
           }
         ),
-        tag ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_react_native35.View, { style: { marginLeft: theme.spacing.sm }, children: tag }) : null
+        tag ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_react_native36.View, { style: { marginLeft: theme.spacing.sm }, children: tag }) : null
       ] }),
-      rightMetric ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_react_native35.View, { children: rightMetric }) : null
+      rightMetric ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_react_native36.View, { children: rightMetric }) : null
     ] }),
-    subtitle ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+    subtitle ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
       Text,
       {
         numberOfLines: 2,
@@ -5449,20 +6148,20 @@ function statusDescription(status, statusError) {
 }
 
 // src/studio/ui/preview-panel/PreviewMetaSection.tsx
-var import_jsx_runtime36 = require("react/jsx-runtime");
+var import_jsx_runtime38 = require("react/jsx-runtime");
 function PreviewMetaSection({ app, isOwner, creator, downloadsCount }) {
   var _a;
   const theme = useTheme();
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
     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__ */ (0, import_jsx_runtime36.jsx)(import_react_native36.View, { style: { paddingHorizontal: 8, paddingVertical: 2, borderRadius: 999, backgroundColor: "#007A75" }, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Text, { variant: "caption", style: { color: "#fff", fontWeight: theme.typography.fontWeight.semibold }, children: app.forkedFromAppId ? "Remix" : "Owner" }) }) : null,
-      rightMetric: /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
-        import_react_native36.View,
+      tag: isOwner || app.forkedFromAppId ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_react_native37.View, { style: { paddingHorizontal: 8, paddingVertical: 2, borderRadius: 999, backgroundColor: "#007A75" }, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Text, { variant: "caption", style: { color: "#fff", fontWeight: theme.typography.fontWeight.semibold }, children: app.forkedFromAppId ? "Remix" : "Owner" }) }) : null,
+      rightMetric: /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
+        import_react_native37.View,
         {
           style: {
             flexDirection: "row",
@@ -5473,7 +6172,7 @@ function PreviewMetaSection({ app, isOwner, creator, downloadsCount }) {
             backgroundColor: withAlpha(theme.colors.neutral, 0.3)
           },
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
               Text,
               {
                 style: {
@@ -5486,7 +6185,7 @@ function PreviewMetaSection({ app, isOwner, creator, downloadsCount }) {
                 children: formatCount(downloadsCount ?? ((_a = app.insights) == null ? void 0 : _a.totalDownloads) ?? 0)
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(IconPlay, { size: 14, colorToken: "textMuted", fill: theme.colors.textMuted })
+            /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(IconPlay, { size: 14, colorToken: "textMuted", fill: theme.colors.textMuted })
           ]
         }
       ),
@@ -5496,11 +6195,11 @@ function PreviewMetaSection({ app, isOwner, creator, downloadsCount }) {
 }
 
 // src/studio/ui/preview-panel/PreviewCustomizeSection.tsx
-var import_react_native38 = require("react-native");
+var import_react_native39 = require("react-native");
 
 // src/studio/ui/preview-panel/PressableCardRow.tsx
-var import_react_native37 = require("react-native");
-var import_jsx_runtime37 = require("react/jsx-runtime");
+var import_react_native38 = require("react-native");
+var import_jsx_runtime39 = require("react/jsx-runtime");
 function PressableCardRow({
   accessibilityLabel,
   onPress,
@@ -5511,50 +6210,28 @@ function PressableCardRow({
   right,
   style
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
-    import_react_native37.Pressable,
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+    import_react_native38.Pressable,
     {
       accessibilityRole: "button",
       accessibilityLabel,
       disabled,
       onPress,
       style: ({ pressed }) => ({ opacity: disabled ? 0.6 : pressed ? 0.85 : 1 }),
-      children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Card, { padded: false, border: false, style, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_react_native37.View, { style: { flexDirection: "row", alignItems: "center" }, children: [
+      children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Card, { padded: false, border: false, style, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_react_native38.View, { style: { flexDirection: "row", alignItems: "center" }, children: [
         left,
-        /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_react_native37.View, { style: { flex: 1, minWidth: 0 }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_react_native38.View, { style: { flex: 1, minWidth: 0 }, children: [
           title,
           subtitle ? subtitle : null
         ] }),
-        right ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_react_native37.View, { style: { marginLeft: 16 }, children: right }) : null
+        right ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_react_native38.View, { style: { marginLeft: 16 }, children: right }) : null
       ] }) })
     }
   );
 }
 
-// src/studio/ui/preview-panel/SectionTitle.tsx
-var import_jsx_runtime38 = require("react/jsx-runtime");
-function SectionTitle({ children, marginTop }) {
-  const theme = useTheme();
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
-    Text,
-    {
-      style: {
-        color: theme.colors.textMuted,
-        fontSize: 12,
-        lineHeight: 16,
-        textTransform: "uppercase",
-        letterSpacing: 0.8,
-        marginTop: marginTop ?? theme.spacing.sm,
-        marginBottom: theme.spacing.sm,
-        fontWeight: theme.typography.fontWeight.bold
-      },
-      children
-    }
-  );
-}
-
 // src/studio/ui/preview-panel/PreviewCustomizeSection.tsx
-var import_jsx_runtime39 = require("react/jsx-runtime");
+var import_jsx_runtime40 = require("react/jsx-runtime");
 function PreviewCustomizeSection({
   app,
   isOwner,
@@ -5564,10 +6241,10 @@ function PreviewCustomizeSection({
   onStartDraw
 }) {
   const theme = useTheme();
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_jsx_runtime39.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(SectionTitle, { children: "Customize" }),
-    showProcessing ? /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
-      import_react_native38.View,
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_jsx_runtime40.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(SectionTitle, { children: "Customize" }),
+    showProcessing ? /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
+      import_react_native39.View,
       {
         style: {
           flexDirection: "row",
@@ -5580,8 +6257,8 @@ function PreviewCustomizeSection({
           marginBottom: theme.spacing.sm
         },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
-            import_react_native38.View,
+          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+            import_react_native39.View,
             {
               style: {
                 width: 40,
@@ -5592,17 +6269,17 @@ function PreviewCustomizeSection({
                 backgroundColor: withAlpha(theme.colors.warning, 0.1),
                 marginRight: theme.spacing.lg
               },
-              children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_react_native38.ActivityIndicator, { color: theme.colors.warning, size: "small" })
+              children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_react_native39.ActivityIndicator, { color: theme.colors.warning, size: "small" })
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_react_native38.View, { style: { flex: 1, minWidth: 0 }, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Text, { style: { color: theme.colors.text, fontSize: 16, lineHeight: 20, fontWeight: theme.typography.fontWeight.semibold }, children: app.status === "error" ? "Error" : "Processing" }),
-            /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Text, { style: { color: theme.colors.textMuted, fontSize: 12, lineHeight: 16, marginTop: 2 }, children: statusDescription(app.status, app.statusError) })
+          /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_react_native39.View, { style: { flex: 1, minWidth: 0 }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Text, { style: { color: theme.colors.text, fontSize: 16, lineHeight: 20, fontWeight: theme.typography.fontWeight.semibold }, children: app.status === "error" ? "Error" : "Processing" }),
+            /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Text, { style: { color: theme.colors.textMuted, fontSize: 12, lineHeight: 16, marginTop: 2 }, children: statusDescription(app.status, app.statusError) })
           ] })
         ]
       }
     ) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
       PressableCardRow,
       {
         accessibilityLabel: isOwner ? "Edit app" : "Remix app",
@@ -5615,8 +6292,8 @@ function PreviewCustomizeSection({
           borderColor: withAlpha(theme.colors.primary, 0.1),
           marginBottom: theme.spacing.sm
         },
-        left: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
-          import_react_native38.View,
+        left: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+          import_react_native39.View,
           {
             style: {
               width: 40,
@@ -5627,15 +6304,15 @@ function PreviewCustomizeSection({
               backgroundColor: withAlpha(theme.colors.primary, 0.1),
               marginRight: theme.spacing.lg
             },
-            children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(IconChat, { size: 20, colorToken: "primary" })
+            children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(IconChat, { size: 20, colorToken: "primary" })
           }
         ),
-        title: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(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__ */ (0, import_jsx_runtime39.jsx)(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__ */ (0, import_jsx_runtime39.jsx)(IconChevronRight, { size: 20, colorToken: "textMuted" })
+        title: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(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__ */ (0, import_jsx_runtime40.jsx)(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__ */ (0, import_jsx_runtime40.jsx)(IconChevronRight, { size: 20, colorToken: "textMuted" })
       }
     ),
-    isOwner && onStartDraw ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+    isOwner && onStartDraw ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
       PressableCardRow,
       {
         accessibilityLabel: "Draw changes",
@@ -5648,8 +6325,8 @@ function PreviewCustomizeSection({
           borderColor: withAlpha(theme.colors.danger, 0.1),
           marginBottom: theme.spacing.sm
         },
-        left: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
-          import_react_native38.View,
+        left: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+          import_react_native39.View,
           {
             style: {
               width: 40,
@@ -5660,12 +6337,12 @@ function PreviewCustomizeSection({
               backgroundColor: withAlpha(theme.colors.danger, 0.1),
               marginRight: theme.spacing.lg
             },
-            children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(IconDraw, { size: 20, colorToken: "danger" })
+            children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(IconDraw, { size: 20, colorToken: "danger" })
           }
         ),
-        title: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Text, { style: { color: theme.colors.text, fontSize: 16, lineHeight: 20, fontWeight: theme.typography.fontWeight.semibold }, children: "Draw Changes" }),
-        subtitle: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Text, { style: { color: theme.colors.textMuted, fontSize: 12, lineHeight: 16, marginTop: 2 }, children: "Annotate the app with drawings" }),
-        right: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(IconChevronRight, { size: 20, colorToken: "textMuted" })
+        title: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Text, { style: { color: theme.colors.text, fontSize: 16, lineHeight: 20, fontWeight: theme.typography.fontWeight.semibold }, children: "Draw Changes" }),
+        subtitle: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Text, { style: { color: theme.colors.textMuted, fontSize: 12, lineHeight: 16, marginTop: 2 }, children: "Annotate the app with drawings" }),
+        right: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(IconChevronRight, { size: 20, colorToken: "textMuted" })
       }
     ) : null
   ] });
@@ -5673,19 +6350,19 @@ function PreviewCustomizeSection({
 
 // src/studio/ui/preview-panel/PreviewCollaborateSection.tsx
 var React33 = __toESM(require("react"));
-var import_react_native44 = require("react-native");
+var import_react_native45 = require("react-native");
 var import_lucide_react_native9 = require("lucide-react-native");
 
 // src/components/merge-requests/MergeRequestStatusCard.tsx
 var React29 = __toESM(require("react"));
-var import_react_native40 = require("react-native");
+var import_react_native41 = require("react-native");
 var import_lucide_react_native7 = require("lucide-react-native");
 
 // src/components/primitives/MarkdownText.tsx
-var import_react_native39 = require("react-native");
+var import_react_native40 = require("react-native");
 var import_react_native_markdown_display = __toESM(require("react-native-markdown-display"));
 var import_react2 = require("react");
-var import_jsx_runtime40 = require("react/jsx-runtime");
+var import_jsx_runtime41 = require("react/jsx-runtime");
 function copyMarkdownToClipboard(markdown) {
   var _a;
   if (!markdown) {
@@ -5726,7 +6403,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;
-  const screen = import_react_native39.Dimensions.get("window");
+  const screen = import_react_native40.Dimensions.get("window");
   const tooltipPadding = theme.spacing.sm;
   const tooltipYOffset = theme.spacing.lg + 32;
   const minTooltipY = theme.spacing.xl;
@@ -5756,8 +6433,8 @@ function MarkdownText({ markdown, variant = "chat", bodyColor, style }) {
       setShowCopied(false);
     }, 1200);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_react_native39.Pressable, { style, onPress: import_react_native39.Keyboard.dismiss, onLongPress: handleLongPress, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_react_native39.View, { style: { position: "relative" }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_react_native40.Pressable, { style, onPress: import_react_native40.Keyboard.dismiss, onLongPress: handleLongPress, children: /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_react_native40.View, { style: { position: "relative" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
       import_react_native_markdown_display.default,
       {
         style: {
@@ -5770,7 +6447,7 @@ function MarkdownText({ markdown, variant = "chat", bodyColor, style }) {
             paddingHorizontal: variant === "mergeRequest" ? 6 : 4,
             paddingVertical: variant === "mergeRequest" ? 2 : 0,
             borderRadius: variant === "mergeRequest" ? 6 : 4,
-            fontFamily: import_react_native39.Platform.OS === "ios" ? "Menlo" : "monospace",
+            fontFamily: import_react_native40.Platform.OS === "ios" ? "Menlo" : "monospace",
             fontSize: 13
           },
           code_block: {
@@ -5791,8 +6468,8 @@ function MarkdownText({ markdown, variant = "chat", bodyColor, style }) {
         children: markdown
       }
     ),
-    showCopied && tooltipAnchor ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_react_native39.Modal, { transparent: true, visible: true, statusBarTranslucent: true, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_react_native39.View, { pointerEvents: "none", style: { flex: 1 }, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
-      import_react_native39.View,
+    showCopied && tooltipAnchor ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_react_native40.Modal, { transparent: true, visible: true, statusBarTranslucent: true, children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_react_native40.View, { pointerEvents: "none", style: { flex: 1 }, children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+      import_react_native40.View,
       {
         pointerEvents: "none",
         style: {
@@ -5805,8 +6482,8 @@ function MarkdownText({ markdown, variant = "chat", bodyColor, style }) {
           paddingVertical: theme.spacing.xs
         },
         onLayout: (event) => setTooltipWidth(event.nativeEvent.layout.width),
-        children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
-          import_react_native39.Text,
+        children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+          import_react_native40.Text,
           {
             style: {
               color: theme.colors.onSuccess,
@@ -5865,7 +6542,7 @@ function useControlledExpansion(props) {
 }
 
 // src/components/merge-requests/MergeRequestStatusCard.tsx
-var import_jsx_runtime41 = require("react/jsx-runtime");
+var import_jsx_runtime42 = require("react/jsx-runtime");
 function MergeRequestStatusCard({
   mergeRequest,
   expanded: expandedProp,
@@ -5910,15 +6587,15 @@ function MergeRequestStatusCard({
   const createdIso = toIsoString(mergeRequest.createdAt ?? null);
   const headerTimeAgo = updatedIso ? formatTimeAgo(updatedIso) : "";
   const createdTimeAgo = createdIso ? formatTimeAgo(createdIso) : "";
-  const rotate = React29.useRef(new import_react_native40.Animated.Value(expanded ? 1 : 0)).current;
+  const rotate = React29.useRef(new import_react_native41.Animated.Value(expanded ? 1 : 0)).current;
   React29.useEffect(() => {
-    import_react_native40.Animated.timing(rotate, {
+    import_react_native41.Animated.timing(rotate, {
       toValue: expanded ? 1 : 0,
       duration: 200,
       useNativeDriver: true
     }).start();
   }, [expanded, rotate]);
-  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_react_native40.Pressable, { onPress: () => setExpanded(!expanded), style: ({ pressed }) => [{ opacity: pressed ? 0.95 : 1 }], children: /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_react_native41.Pressable, { onPress: () => setExpanded(!expanded), style: ({ pressed }) => [{ opacity: pressed ? 0.95 : 1 }], children: /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
     Card,
     {
       padded: false,
@@ -5931,11 +6608,11 @@ function MergeRequestStatusCard({
         style
       ],
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_react_native40.View, { style: { flexDirection: "row", alignItems: "center", gap: theme.spacing.lg }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_react_native40.View, { style: { width: 40, height: 40, borderRadius: 999, alignItems: "center", justifyContent: "center", backgroundColor: bgColor }, children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(StatusIcon, { size: 20, color: iconColor }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_react_native40.View, { style: { flex: 1, minWidth: 0 }, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_react_native40.View, { style: { flexDirection: "row", alignItems: "center", justifyContent: "space-between" }, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(import_react_native41.View, { style: { flexDirection: "row", alignItems: "center", gap: theme.spacing.lg }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_react_native41.View, { style: { width: 40, height: 40, borderRadius: 999, alignItems: "center", justifyContent: "center", backgroundColor: bgColor }, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(StatusIcon, { size: 20, color: iconColor }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(import_react_native41.View, { style: { flex: 1, minWidth: 0 }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(import_react_native41.View, { style: { flexDirection: "row", alignItems: "center", justifyContent: "space-between" }, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
                 Text,
                 {
                   style: {
@@ -5949,12 +6626,12 @@ function MergeRequestStatusCard({
                   children: statusText
                 }
               ),
-              headerTimeAgo ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Text, { style: { fontSize: 10, lineHeight: 14, marginLeft: theme.spacing.sm, color: withAlpha(theme.colors.textMuted, 0.6) }, children: headerTimeAgo }) : null
+              headerTimeAgo ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Text, { style: { fontSize: 10, lineHeight: 14, marginLeft: theme.spacing.sm, color: withAlpha(theme.colors.textMuted, 0.6) }, children: headerTimeAgo }) : null
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Text, { style: { fontSize: 12, lineHeight: 16, color: theme.colors.textMuted }, numberOfLines: 1, children: mergeRequest.title ?? "Untitled merge request" })
+            /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Text, { style: { fontSize: 12, lineHeight: 16, color: theme.colors.textMuted }, numberOfLines: 1, children: mergeRequest.title ?? "Untitled merge request" })
           ] }),
-          headerRight ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_react_native40.View, { children: headerRight }) : /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
-            import_react_native40.Animated.View,
+          headerRight ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_react_native41.View, { children: headerRight }) : /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+            import_react_native41.Animated.View,
             {
               style: {
                 transform: [
@@ -5963,12 +6640,12 @@ function MergeRequestStatusCard({
                   }
                 ]
               },
-              children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_lucide_react_native7.ChevronDown, { size: 20, color: withAlpha(theme.colors.textMuted, 0.4) })
+              children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_lucide_react_native7.ChevronDown, { size: 20, color: withAlpha(theme.colors.textMuted, 0.4) })
             }
           )
         ] }),
-        expanded ? /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_react_native40.View, { style: { marginTop: 16, marginLeft: 56 }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+        expanded ? /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(import_react_native41.View, { style: { marginTop: 16, marginLeft: 56 }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
             Text,
             {
               style: {
@@ -5982,7 +6659,7 @@ function MergeRequestStatusCard({
               children: status.text
             }
           ),
-          createdTimeAgo ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+          createdTimeAgo ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
             Text,
             {
               style: {
@@ -5993,8 +6670,8 @@ function MergeRequestStatusCard({
               children: createdTimeAgo
             }
           ) : null,
-          /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Text, { style: { fontSize: 16, fontWeight: "600", color: textColor, marginBottom: 8 }, children: mergeRequest.title ?? "Untitled merge request" }),
-          mergeRequest.description ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(MarkdownText, { markdown: mergeRequest.description, variant: "mergeRequest" }) : null
+          /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Text, { style: { fontSize: 16, fontWeight: "600", color: textColor, marginBottom: 8 }, children: mergeRequest.title ?? "Untitled merge request" }),
+          mergeRequest.description ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(MarkdownText, { markdown: mergeRequest.description, variant: "mergeRequest" }) : null
         ] }) : null
       ]
     }
@@ -6003,17 +6680,17 @@ function MergeRequestStatusCard({
 
 // src/components/merge-requests/ReviewMergeRequestCarousel.tsx
 var React32 = __toESM(require("react"));
-var import_react_native43 = require("react-native");
+var import_react_native44 = require("react-native");
 
 // src/components/merge-requests/ReviewMergeRequestCard.tsx
 var React31 = __toESM(require("react"));
-var import_react_native42 = require("react-native");
+var import_react_native43 = require("react-native");
 var import_lucide_react_native8 = require("lucide-react-native");
 
 // src/components/merge-requests/ReviewMergeRequestActionButton.tsx
 var React30 = __toESM(require("react"));
-var import_react_native41 = require("react-native");
-var import_jsx_runtime42 = require("react/jsx-runtime");
+var import_react_native42 = require("react-native");
+var import_jsx_runtime43 = require("react/jsx-runtime");
 function ReviewMergeRequestActionButton({
   accessibilityLabel,
   backgroundColor,
@@ -6028,8 +6705,8 @@ function ReviewMergeRequestActionButton({
   const paddingHorizontal = iconOnly ? 0 : 16;
   const paddingVertical = iconOnly ? 0 : 8;
   const opacity = disabled ? 0.5 : pressed ? 0.9 : 1;
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
-    import_react_native41.View,
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+    import_react_native42.View,
     {
       style: {
         width,
@@ -6043,8 +6720,8 @@ function ReviewMergeRequestActionButton({
         paddingVertical,
         justifyContent: "center"
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
-        import_react_native41.Pressable,
+      children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+        import_react_native42.Pressable,
         {
           accessibilityRole: "button",
           accessibilityLabel,
@@ -6067,7 +6744,7 @@ function ReviewMergeRequestActionButton({
 }
 
 // src/components/merge-requests/ReviewMergeRequestCard.tsx
-var import_jsx_runtime43 = require("react/jsx-runtime");
+var import_jsx_runtime44 = require("react/jsx-runtime");
 function ReviewMergeRequestCard({
   mr,
   index,
@@ -6086,12 +6763,12 @@ function ReviewMergeRequestCard({
   const theme = useTheme();
   const status = React31.useMemo(() => getMergeRequestStatusDisplay(mr.status), [mr.status]);
   const canAct = mr.status === "open";
-  const rotate = React31.useRef(new import_react_native42.Animated.Value(isExpanded ? 1 : 0)).current;
+  const rotate = React31.useRef(new import_react_native43.Animated.Value(isExpanded ? 1 : 0)).current;
   React31.useEffect(() => {
-    import_react_native42.Animated.timing(rotate, { toValue: isExpanded ? 1 : 0, duration: 200, useNativeDriver: true }).start();
+    import_react_native43.Animated.timing(rotate, { toValue: isExpanded ? 1 : 0, duration: 200, useNativeDriver: true }).start();
   }, [isExpanded, rotate]);
   const position = total > 1 ? `${index + 1}/${total}` : "Merge request";
-  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_react_native42.Pressable, { onPress: onToggle, style: ({ pressed }) => ({ opacity: pressed ? 0.95 : 1 }), children: /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_react_native43.Pressable, { onPress: onToggle, style: ({ pressed }) => ({ opacity: pressed ? 0.95 : 1 }), children: /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
     Card,
     {
       padded: false,
@@ -6104,10 +6781,10 @@ function ReviewMergeRequestCard({
         }
       ],
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_react_native42.View, { style: { flexDirection: "row", alignItems: "center", gap: 12 }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Avatar, { size: 40, uri: (creator == null ? void 0 : creator.avatar) ?? null, name: (creator == null ? void 0 : creator.name) ?? void 0 }),
-          /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_react_native42.View, { style: { flex: 1, minWidth: 0 }, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_react_native43.View, { style: { flexDirection: "row", alignItems: "center", gap: 12 }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Avatar, { size: 40, uri: (creator == null ? void 0 : creator.avatar) ?? null, name: (creator == null ? void 0 : creator.name) ?? void 0 }),
+          /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_react_native43.View, { style: { flex: 1, minWidth: 0 }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
               Text,
               {
                 style: { fontWeight: theme.typography.fontWeight.semibold, color: theme.colors.text, fontSize: 16, lineHeight: 20 },
@@ -6115,24 +6792,24 @@ function ReviewMergeRequestCard({
                 children: mr.title ?? "Untitled merge request"
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(Text, { style: { color: theme.colors.textMuted, fontSize: 12, lineHeight: 16 }, numberOfLines: 1, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(Text, { style: { color: theme.colors.textMuted, fontSize: 12, lineHeight: 16 }, numberOfLines: 1, children: [
               (creator == null ? void 0 : creator.name) ?? "Loading...",
               " \xB7 ",
               position
             ] })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
-            import_react_native42.Animated.View,
+          /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+            import_react_native43.Animated.View,
             {
               style: {
                 transform: [{ rotate: rotate.interpolate({ inputRange: [0, 1], outputRange: ["0deg", "180deg"] }) }]
               },
-              children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_lucide_react_native8.ChevronDown, { size: 20, color: withAlpha(theme.colors.textMuted, 0.4) })
+              children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_lucide_react_native8.ChevronDown, { size: 20, color: withAlpha(theme.colors.textMuted, 0.4) })
             }
           )
         ] }),
-        isExpanded ? /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_react_native42.View, { style: { marginTop: 16 }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+        isExpanded ? /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_react_native43.View, { style: { marginTop: 16 }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
             Text,
             {
               style: {
@@ -6146,13 +6823,13 @@ function ReviewMergeRequestCard({
               children: status.text
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Text, { style: { color: theme.colors.textMuted, fontSize: 12, lineHeight: 16, marginBottom: 12 }, children: creator ? `${creator.approvedOrMergedMergeRequests} approved merge${creator.approvedOrMergedMergeRequests !== 1 ? "s" : ""}` : "Loading stats..." }),
-          mr.description ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(MarkdownText, { markdown: mr.description, variant: "mergeRequest" }) : null
+          /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Text, { style: { color: theme.colors.textMuted, fontSize: 12, lineHeight: 16, marginBottom: 12 }, children: creator ? `${creator.approvedOrMergedMergeRequests} approved merge${creator.approvedOrMergedMergeRequests !== 1 ? "s" : ""}` : "Loading stats..." }),
+          mr.description ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(MarkdownText, { markdown: mr.description, variant: "mergeRequest" }) : null
         ] }) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_react_native42.View, { style: { height: 1, backgroundColor: withAlpha(theme.colors.borderStrong, 0.5), marginTop: 12, marginBottom: 12 } }),
-        /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_react_native42.View, { style: { flexDirection: "row", alignItems: "center", justifyContent: "space-between" }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_react_native42.View, { style: { flexDirection: "row", gap: 8 }, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_react_native43.View, { style: { height: 1, backgroundColor: withAlpha(theme.colors.borderStrong, 0.5), marginTop: 12, marginBottom: 12 } }),
+        /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_react_native43.View, { style: { flexDirection: "row", alignItems: "center", justifyContent: "space-between" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_react_native43.View, { style: { flexDirection: "row", gap: 8 }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
               ReviewMergeRequestActionButton,
               {
                 accessibilityLabel: "Reject",
@@ -6160,13 +6837,13 @@ function ReviewMergeRequestCard({
                 disabled: !canAct || isAnyProcessing,
                 onPress: onReject,
                 iconOnly: !isExpanded,
-                children: /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_react_native42.View, { style: { flexDirection: "row", alignItems: "center", gap: isExpanded ? 4 : 0 }, children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_lucide_react_native8.X, { size: 18, color: "#FFFFFF" }),
-                  isExpanded ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Text, { style: { fontSize: 13, color: "#FFFFFF", fontWeight: theme.typography.fontWeight.semibold }, children: "Reject" }) : null
+                children: /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_react_native43.View, { style: { flexDirection: "row", alignItems: "center", gap: isExpanded ? 4 : 0 }, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_lucide_react_native8.X, { size: 18, color: "#FFFFFF" }),
+                  isExpanded ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Text, { style: { fontSize: 13, color: "#FFFFFF", fontWeight: theme.typography.fontWeight.semibold }, children: "Reject" }) : null
                 ] })
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
               ReviewMergeRequestActionButton,
               {
                 accessibilityLabel: !canAct ? "Not actionable" : isProcessing ? "Processing" : "Approve",
@@ -6174,17 +6851,17 @@ function ReviewMergeRequestCard({
                 disabled: !canAct || isAnyProcessing,
                 onPress: onApprove,
                 iconOnly: !isExpanded,
-                children: isProcessing ? /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_react_native42.View, { style: { flexDirection: "row", alignItems: "center", gap: isExpanded ? 4 : 0 }, children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_react_native42.ActivityIndicator, { size: "small", color: "#FFFFFF" }),
-                  isExpanded ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Text, { style: { fontSize: 13, color: "#FFFFFF", fontWeight: theme.typography.fontWeight.semibold }, children: "Processing" }) : null
-                ] }) : /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_react_native42.View, { style: { flexDirection: "row", alignItems: "center", gap: isExpanded ? 4 : 0 }, children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_lucide_react_native8.Check, { size: 18, color: "#FFFFFF" }),
-                  isExpanded ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Text, { style: { fontSize: 13, color: "#FFFFFF", fontWeight: theme.typography.fontWeight.semibold }, children: "Approve" }) : null
+                children: isProcessing ? /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_react_native43.View, { style: { flexDirection: "row", alignItems: "center", gap: isExpanded ? 4 : 0 }, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_react_native43.ActivityIndicator, { size: "small", color: "#FFFFFF" }),
+                  isExpanded ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Text, { style: { fontSize: 13, color: "#FFFFFF", fontWeight: theme.typography.fontWeight.semibold }, children: "Processing" }) : null
+                ] }) : /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_react_native43.View, { style: { flexDirection: "row", alignItems: "center", gap: isExpanded ? 4 : 0 }, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_lucide_react_native8.Check, { size: 18, color: "#FFFFFF" }),
+                  isExpanded ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Text, { style: { fontSize: 13, color: "#FFFFFF", fontWeight: theme.typography.fontWeight.semibold }, children: "Approve" }) : null
                 ] })
               }
             )
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
             ReviewMergeRequestActionButton,
             {
               accessibilityLabel: "Test",
@@ -6192,9 +6869,9 @@ function ReviewMergeRequestCard({
               disabled: isBuilding || isTestingThis,
               onPress: onTest,
               iconOnly: !isExpanded,
-              children: isTestingThis ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_react_native42.ActivityIndicator, { size: "small", color: "#888" }) : /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_react_native42.View, { style: { flexDirection: "row", alignItems: "center", gap: isExpanded ? 4 : 0 }, children: [
-                /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_lucide_react_native8.Play, { size: 14, color: theme.colors.text }),
-                isExpanded ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Text, { style: { fontSize: 13, color: theme.colors.text, fontWeight: theme.typography.fontWeight.semibold }, children: "Test" }) : null
+              children: isTestingThis ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_react_native43.ActivityIndicator, { size: "small", color: "#888" }) : /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_react_native43.View, { style: { flexDirection: "row", alignItems: "center", gap: isExpanded ? 4 : 0 }, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_lucide_react_native8.Play, { size: 14, color: theme.colors.text }),
+                isExpanded ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Text, { style: { fontSize: 13, color: theme.colors.text, fontWeight: theme.typography.fontWeight.semibold }, children: "Test" }) : null
               ] })
             }
           )
@@ -6205,7 +6882,7 @@ function ReviewMergeRequestCard({
 }
 
 // src/components/merge-requests/ReviewMergeRequestCarousel.tsx
-var import_jsx_runtime44 = require("react/jsx-runtime");
+var import_jsx_runtime45 = require("react/jsx-runtime");
 function ReviewMergeRequestCarousel({
   mergeRequests,
   creatorStatsById,
@@ -6218,32 +6895,32 @@ function ReviewMergeRequestCarousel({
   style
 }) {
   const theme = useTheme();
-  const { width } = (0, import_react_native43.useWindowDimensions)();
+  const { width } = (0, import_react_native44.useWindowDimensions)();
   const [expanded, setExpanded] = React32.useState({});
-  const carouselScrollX = React32.useRef(new import_react_native43.Animated.Value(0)).current;
+  const carouselScrollX = React32.useRef(new import_react_native44.Animated.Value(0)).current;
   const peekAmount = 24;
   const gap = 16;
   const cardWidth = React32.useMemo(() => Math.max(1, width - theme.spacing.lg * 2 - peekAmount), [peekAmount, theme.spacing.lg, width]);
   const snapInterval = cardWidth + gap;
   const dotColor = theme.scheme === "dark" ? "#FFFFFF" : "#000000";
   if (mergeRequests.length === 0) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_react_native43.View, { style: [{ marginHorizontal: -theme.spacing.lg }, style], children: [
-    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
-      import_react_native43.FlatList,
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_react_native44.View, { style: [{ marginHorizontal: -theme.spacing.lg }, style], children: [
+    /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+      import_react_native44.FlatList,
       {
         horizontal: true,
         data: mergeRequests,
         keyExtractor: (mr) => mr.id,
         showsHorizontalScrollIndicator: false,
         contentContainerStyle: { paddingHorizontal: theme.spacing.lg, paddingVertical: theme.spacing.sm },
-        ItemSeparatorComponent: () => /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_react_native43.View, { style: { width: gap } }),
+        ItemSeparatorComponent: () => /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_react_native44.View, { style: { width: gap } }),
         snapToAlignment: "start",
         decelerationRate: "fast",
         snapToInterval: snapInterval,
         disableIntervalMomentum: true,
         style: { paddingRight: peekAmount },
-        ListFooterComponent: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_react_native43.View, { style: { width: peekAmount } }),
-        onScroll: import_react_native43.Animated.event([{ nativeEvent: { contentOffset: { x: carouselScrollX } } }], {
+        ListFooterComponent: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_react_native44.View, { style: { width: peekAmount } }),
+        onScroll: import_react_native44.Animated.event([{ nativeEvent: { contentOffset: { x: carouselScrollX } } }], {
           useNativeDriver: false
         }),
         scrollEventThrottle: 16,
@@ -6254,7 +6931,7 @@ function ReviewMergeRequestCarousel({
           const isProcessing = Boolean(processingMrId && processingMrId === item.id);
           const isAnyProcessing = Boolean(processingMrId);
           const isTestingThis = Boolean(testingMrId && testingMrId === item.id);
-          return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_react_native43.View, { style: { width: cardWidth }, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+          return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_react_native44.View, { style: { width: cardWidth }, children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
             ReviewMergeRequestCard,
             {
               mr: item,
@@ -6275,7 +6952,7 @@ function ReviewMergeRequestCarousel({
         }
       }
     ),
-    mergeRequests.length >= 1 ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_react_native43.View, { style: { flexDirection: "row", justifyContent: "center", columnGap: 8, marginTop: theme.spacing.md }, children: mergeRequests.map((mr, index) => {
+    mergeRequests.length >= 1 ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_react_native44.View, { 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,
@@ -6287,8 +6964,8 @@ function ReviewMergeRequestCarousel({
         outputRange: [0.4, 1, 0.4],
         extrapolate: "clamp"
       });
-      return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
-        import_react_native43.Animated.View,
+      return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+        import_react_native44.Animated.View,
         {
           style: {
             width: 8,
@@ -6306,7 +6983,7 @@ function ReviewMergeRequestCarousel({
 }
 
 // src/studio/ui/preview-panel/PreviewCollaborateSection.tsx
-var import_jsx_runtime45 = require("react/jsx-runtime");
+var import_jsx_runtime46 = require("react/jsx-runtime");
 function PreviewCollaborateSection({
   canSubmitMergeRequest,
   canSyncUpstream,
@@ -6332,9 +7009,9 @@ function PreviewCollaborateSection({
   if (!hasSection) return null;
   const isSyncing = Boolean(syncingUpstream || syncingLocal);
   const showActionsSubtitle = canSubmitMergeRequest && onSubmitMergeRequest || canSyncUpstream && onSyncUpstream || onTestMr && incomingMergeRequests.length > 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_jsx_runtime45.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(SectionTitle, { marginTop: theme.spacing.xl, children: "Collaborate" }),
-    showActionsSubtitle ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(import_jsx_runtime46.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(SectionTitle, { marginTop: theme.spacing.xl, children: "Collaborate" }),
+    showActionsSubtitle ? /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
       Text,
       {
         style: {
@@ -6349,13 +7026,13 @@ function PreviewCollaborateSection({
         children: "Actions"
       }
     ) : null,
-    canSubmitMergeRequest && onSubmitMergeRequest ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+    canSubmitMergeRequest && onSubmitMergeRequest ? /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
       PressableCardRow,
       {
         accessibilityLabel: "Submit merge request",
         disabled: submittingMr,
         onPress: () => {
-          import_react_native44.Alert.alert(
+          import_react_native45.Alert.alert(
             "Submit Merge Request",
             "Are you sure you want to submit your changes to the original app?",
             [
@@ -6380,8 +7057,8 @@ function PreviewCollaborateSection({
           borderColor: withAlpha("#03DAC6", 0.2),
           marginBottom: theme.spacing.sm
         },
-        left: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
-          import_react_native44.View,
+        left: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+          import_react_native45.View,
           {
             style: {
               width: 40,
@@ -6392,21 +7069,21 @@ function PreviewCollaborateSection({
               backgroundColor: withAlpha("#03DAC6", 0.1),
               marginRight: theme.spacing.lg
             },
-            children: submittingMr ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_react_native44.ActivityIndicator, { color: "#03DAC6", size: "small" }) : /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(MergeIcon, { width: 20, height: 20, color: "#03DAC6" })
+            children: submittingMr ? /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_react_native45.ActivityIndicator, { color: "#03DAC6", size: "small" }) : /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(MergeIcon, { width: 20, height: 20, color: "#03DAC6" })
           }
         ),
-        title: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Text, { style: { color: theme.colors.text, fontSize: 16, lineHeight: 20, fontWeight: theme.typography.fontWeight.semibold }, children: "Submit your new changes" }),
-        subtitle: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Text, { style: { color: theme.colors.textMuted, fontSize: 12, lineHeight: 16, marginTop: 2 }, children: "Ask to merge this remix to the original app" }),
-        right: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_lucide_react_native9.Send, { size: 16, color: "#03DAC6" })
+        title: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Text, { style: { color: theme.colors.text, fontSize: 16, lineHeight: 20, fontWeight: theme.typography.fontWeight.semibold }, children: "Submit your new changes" }),
+        subtitle: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Text, { style: { color: theme.colors.textMuted, fontSize: 12, lineHeight: 16, marginTop: 2 }, children: "Ask to merge this remix to the original app" }),
+        right: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_lucide_react_native9.Send, { size: 16, color: "#03DAC6" })
       }
     ) : null,
-    canSyncUpstream && onSyncUpstream ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+    canSyncUpstream && onSyncUpstream ? /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
       PressableCardRow,
       {
         accessibilityLabel: "Sync from original",
         disabled: isSyncing,
         onPress: () => {
-          import_react_native44.Alert.alert(
+          import_react_native45.Alert.alert(
             "Sync from Original",
             "This will pull the latest upstream changes into your remix.",
             [
@@ -6418,12 +7095,12 @@ function PreviewCollaborateSection({
                   setSyncingLocal(true);
                   Promise.resolve(onSyncUpstream()).then((result) => {
                     if ((result == null ? void 0 : result.status) === "up-to-date") {
-                      import_react_native44.Alert.alert("Up to date", "Your remix already includes the latest upstream changes.");
+                      import_react_native45.Alert.alert("Up to date", "Your remix already includes the latest upstream changes.");
                     } else {
-                      import_react_native44.Alert.alert("Sync started", "Upstream changes are being merged into your remix.");
+                      import_react_native45.Alert.alert("Sync started", "Upstream changes are being merged into your remix.");
                     }
                   }).catch(() => {
-                    import_react_native44.Alert.alert("Sync failed", "We could not start the sync. Please try again.");
+                    import_react_native45.Alert.alert("Sync failed", "We could not start the sync. Please try again.");
                   }).finally(() => setSyncingLocal(false));
                 }
               }
@@ -6438,8 +7115,8 @@ function PreviewCollaborateSection({
           borderColor: withAlpha(theme.colors.primary, 0.25),
           marginBottom: theme.spacing.sm
         },
-        left: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
-          import_react_native44.View,
+        left: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+          import_react_native45.View,
           {
             style: {
               width: 40,
@@ -6450,15 +7127,15 @@ function PreviewCollaborateSection({
               backgroundColor: withAlpha(theme.colors.primary, 0.12),
               marginRight: theme.spacing.lg
             },
-            children: isSyncing ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_react_native44.ActivityIndicator, { color: theme.colors.primary, size: "small" }) : /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_lucide_react_native9.RefreshCw, { size: 18, color: theme.colors.primary })
+            children: isSyncing ? /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_react_native45.ActivityIndicator, { color: theme.colors.primary, size: "small" }) : /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_lucide_react_native9.RefreshCw, { size: 18, color: theme.colors.primary })
           }
         ),
-        title: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Text, { style: { color: theme.colors.text, fontSize: 16, lineHeight: 20, fontWeight: theme.typography.fontWeight.semibold }, children: "Sync from Original" }),
-        subtitle: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Text, { style: { color: theme.colors.textMuted, fontSize: 12, lineHeight: 16, marginTop: 2 }, children: isSyncing ? "Syncing upstream changes..." : upstreamSyncStatus === "up-to-date" ? "You are already up to date with the original app" : "Pull the latest upstream changes into this remix" }),
-        right: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_lucide_react_native9.RefreshCw, { size: 16, color: theme.colors.primary })
+        title: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Text, { style: { color: theme.colors.text, fontSize: 16, lineHeight: 20, fontWeight: theme.typography.fontWeight.semibold }, children: "Sync from Original" }),
+        subtitle: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Text, { style: { color: theme.colors.textMuted, fontSize: 12, lineHeight: 16, marginTop: 2 }, children: isSyncing ? "Syncing upstream changes..." : upstreamSyncStatus === "up-to-date" ? "You are already up to date with the original app" : "Pull the latest upstream changes into this remix" }),
+        right: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_lucide_react_native9.RefreshCw, { size: 16, color: theme.colors.primary })
       }
     ) : null,
-    onTestMr && incomingMergeRequests.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+    onTestMr && incomingMergeRequests.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
       ReviewMergeRequestCarousel,
       {
         mergeRequests: incomingMergeRequests,
@@ -6471,8 +7148,8 @@ function PreviewCollaborateSection({
         onTest: (mr) => onTestMr ? onTestMr(mr) : void 0
       }
     ) : null,
-    outgoingMergeRequests.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_jsx_runtime45.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+    outgoingMergeRequests.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(import_jsx_runtime46.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
         Text,
         {
           style: {
@@ -6488,7 +7165,7 @@ function PreviewCollaborateSection({
           children: "History"
         }
       ),
-      outgoingMergeRequests.map((mr) => /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_react_native44.View, { style: { marginBottom: theme.spacing.sm }, children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(MergeRequestStatusCard, { mergeRequest: toMergeRequestSummary(mr) }) }, mr.id))
+      outgoingMergeRequests.map((mr) => /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_react_native45.View, { style: { marginBottom: theme.spacing.sm }, children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(MergeRequestStatusCard, { mergeRequest: toMergeRequestSummary(mr) }) }, mr.id))
     ] }) : null
   ] });
 }
@@ -6796,7 +7473,7 @@ function usePreviewPanelData(params) {
 }
 
 // src/studio/ui/PreviewPanel.tsx
-var import_jsx_runtime46 = require("react/jsx-runtime");
+var import_jsx_runtime47 = require("react/jsx-runtime");
 function PreviewPanel({
   app,
   loading,
@@ -6836,7 +7513,7 @@ ${shareUrl}` : `Check out this app on Remix
 ${shareUrl}`;
     try {
       const title = app.name ?? "Remix app";
-      const payload = import_react_native45.Platform.OS === "ios" ? {
+      const payload = import_react_native46.Platform.OS === "ios" ? {
         title,
         message
       } : {
@@ -6844,7 +7521,7 @@ ${shareUrl}`;
         message,
         url: shareUrl
       };
-      await import_react_native45.Share.share(payload);
+      await import_react_native46.Share.share(payload);
       await trackShareApp({
         appId: app.id,
         success: true
@@ -6875,7 +7552,7 @@ ${shareUrl}`;
     onOpenComments,
     commentCountOverride
   });
-  const header = /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+  const header = /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
     PreviewPanelHeader,
     {
       isOwner,
@@ -6883,23 +7560,18 @@ ${shareUrl}`;
       onClose,
       onNavigateHome,
       onGoToChat,
-      onShare: handleShare,
-      relatedApps,
-      relatedAppsLoading,
-      switchingRelatedAppId,
-      onOpenRelatedApps,
-      onSwitchRelatedApp
+      onShare: handleShare
     }
   );
   if (loading || !app) {
-    return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(PreviewPage, { header, children: /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(import_react_native45.View, { style: { flex: 1, justifyContent: "center", alignItems: "center", padding: 24 }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_react_native45.ActivityIndicator, {}),
-      /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_react_native45.View, { style: { height: 12 } }),
-      /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Text, { variant: "bodyMuted", children: "Loading app\u2026" })
+    return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(PreviewPage, { header, children: /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(import_react_native46.View, { style: { flex: 1, justifyContent: "center", alignItems: "center", padding: 24 }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_react_native46.ActivityIndicator, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_react_native46.View, { style: { height: 12 } }),
+      /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(Text, { variant: "bodyMuted", children: "Loading app\u2026" })
     ] }) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(PreviewPage, { header, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(PreviewPage, { header, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
       PreviewHeroSection,
       {
         appStatus: app.status,
@@ -6917,8 +7589,18 @@ ${shareUrl}`;
         }
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(PreviewMetaSection, { app, isOwner, creator, downloadsCount: insights.downloads }),
-    /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(PreviewMetaSection, { app, isOwner, creator, downloadsCount: insights.downloads }),
+    /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+      PreviewRelatedAppsSection,
+      {
+        relatedApps,
+        relatedAppsLoading,
+        switchingRelatedAppId,
+        onOpenRelatedApps,
+        onSwitchRelatedApp
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
       PreviewCustomizeSection,
       {
         app,
@@ -6929,7 +7611,7 @@ ${shareUrl}`;
         onStartDraw
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
       PreviewCollaborateSection,
       {
         canSubmitMergeRequest,
@@ -6955,26 +7637,26 @@ ${shareUrl}`;
 
 // src/studio/ui/ChatPanel.tsx
 var React43 = __toESM(require("react"));
-var import_react_native57 = require("react-native");
+var import_react_native58 = require("react-native");
 
 // src/components/chat/ChatPage.tsx
 var React40 = __toESM(require("react"));
-var import_react_native50 = require("react-native");
+var import_react_native51 = require("react-native");
 var import_react_native_safe_area_context4 = require("react-native-safe-area-context");
 
 // src/components/chat/ChatMessageList.tsx
 var React39 = __toESM(require("react"));
-var import_react_native49 = require("react-native");
+var import_react_native50 = require("react-native");
 var import_bottom_sheet5 = require("@gorhom/bottom-sheet");
 
 // src/components/chat/ChatMessageBubble.tsx
 var React37 = __toESM(require("react"));
-var import_react_native47 = require("react-native");
+var import_react_native48 = require("react-native");
 var import_lucide_react_native10 = require("lucide-react-native");
 
 // src/components/primitives/Button.tsx
-var import_react_native46 = require("react-native");
-var import_jsx_runtime47 = require("react/jsx-runtime");
+var import_react_native47 = require("react-native");
+var import_jsx_runtime48 = require("react/jsx-runtime");
 function backgroundFor2(variant, theme, pressed, disabled) {
   const { colors } = theme;
   if (variant === "ghost") return "transparent";
@@ -7010,8 +7692,8 @@ function Button({
 }) {
   const theme = useTheme();
   const isDisabled = disabled ?? void 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
-    import_react_native46.Pressable,
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+    import_react_native47.Pressable,
     {
       ...props,
       disabled: isDisabled,
@@ -7036,7 +7718,7 @@ function Button({
 }
 
 // src/components/chat/ChatMessageBubble.tsx
-var import_jsx_runtime48 = require("react/jsx-runtime");
+var import_jsx_runtime49 = require("react/jsx-runtime");
 function areMessageMetaEqual(a, b) {
   if (a === b) return true;
   if (!a || !b) return a === b;
@@ -7069,8 +7751,8 @@ function ChatMessageBubbleInner({
   const handleRetryPress = React37.useCallback(() => {
     onRetryMessage == null ? void 0 : onRetryMessage(message.id);
   }, [message.id, onRetryMessage]);
-  return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(import_react_native47.View, { style: [align, style], children: [
-    /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_react_native48.View, { style: [align, style], children: [
+    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
       Surface,
       {
         variant: bubbleVariant,
@@ -7085,14 +7767,14 @@ function ChatMessageBubbleInner({
           },
           cornerStyle
         ],
-        children: /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(import_react_native47.View, { style: { flexDirection: "row", alignItems: "center" }, children: [
-          isMergeCompleted || isSyncCompleted ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_lucide_react_native10.CheckCheck, { size: 16, color: theme.colors.success, style: { marginRight: theme.spacing.sm } }) : null,
-          isMergeApproved || isSyncStarted ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_lucide_react_native10.GitMerge, { size: 16, color: theme.colors.text, style: { marginRight: theme.spacing.sm } }) : null,
-          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_react_native47.View, { style: { flexShrink: 1, minWidth: 0 }, children: renderContent ? renderContent(message) : /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(MarkdownText, { markdown: message.content, variant: "chat", bodyColor }) })
+        children: /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_react_native48.View, { style: { flexDirection: "row", alignItems: "center" }, children: [
+          isMergeCompleted || isSyncCompleted ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_lucide_react_native10.CheckCheck, { size: 16, color: theme.colors.success, style: { marginRight: theme.spacing.sm } }) : null,
+          isMergeApproved || isSyncStarted ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_lucide_react_native10.GitMerge, { size: 16, color: theme.colors.text, style: { marginRight: theme.spacing.sm } }) : null,
+          /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_react_native48.View, { style: { flexShrink: 1, minWidth: 0 }, children: renderContent ? renderContent(message) : /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(MarkdownText, { markdown: message.content, variant: "chat", bodyColor }) })
         ] })
       }
     ),
-    showRetry ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_react_native47.View, { style: { marginTop: theme.spacing.xs, alignSelf: align.alignSelf }, children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+    showRetry ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_react_native48.View, { style: { marginTop: theme.spacing.xs, alignSelf: align.alignSelf }, children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
       Button,
       {
         variant: "ghost",
@@ -7101,9 +7783,9 @@ function ChatMessageBubbleInner({
         disabled: retrying,
         style: { borderColor: theme.colors.danger },
         accessibilityLabel: "Retry send",
-        children: /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(import_react_native47.View, { style: { flexDirection: "row", alignItems: "center" }, children: [
-          !retrying ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_lucide_react_native10.RotateCcw, { size: 14, color: theme.colors.danger }) : null,
-          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_react_native48.View, { style: { flexDirection: "row", alignItems: "center" }, children: [
+          !retrying ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_lucide_react_native10.RotateCcw, { size: 14, color: theme.colors.danger }) : null,
+          /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
             Text,
             {
               variant: "caption",
@@ -7126,23 +7808,23 @@ ChatMessageBubble.displayName = "ChatMessageBubble";
 
 // src/components/chat/TypingIndicator.tsx
 var React38 = __toESM(require("react"));
-var import_react_native48 = require("react-native");
-var import_jsx_runtime49 = require("react/jsx-runtime");
+var import_react_native49 = require("react-native");
+var import_jsx_runtime50 = require("react/jsx-runtime");
 function TypingIndicator({ style }) {
   const theme = useTheme();
   const dotColor = theme.colors.textSubtle;
   const anims = React38.useMemo(
-    () => [new import_react_native48.Animated.Value(0.3), new import_react_native48.Animated.Value(0.3), new import_react_native48.Animated.Value(0.3)],
+    () => [new import_react_native49.Animated.Value(0.3), new import_react_native49.Animated.Value(0.3), new import_react_native49.Animated.Value(0.3)],
     []
   );
   React38.useEffect(() => {
     const loops = [];
     anims.forEach((a, idx) => {
-      const seq = import_react_native48.Animated.sequence([
-        import_react_native48.Animated.timing(a, { toValue: 1, duration: 420, useNativeDriver: true, delay: idx * 140 }),
-        import_react_native48.Animated.timing(a, { toValue: 0.3, duration: 420, useNativeDriver: true })
+      const seq = import_react_native49.Animated.sequence([
+        import_react_native49.Animated.timing(a, { toValue: 1, duration: 420, useNativeDriver: true, delay: idx * 140 }),
+        import_react_native49.Animated.timing(a, { toValue: 0.3, duration: 420, useNativeDriver: true })
       ]);
-      const loop = import_react_native48.Animated.loop(seq);
+      const loop = import_react_native49.Animated.loop(seq);
       loops.push(loop);
       loop.start();
     });
@@ -7150,8 +7832,8 @@ function TypingIndicator({ style }) {
       loops.forEach((l) => l.stop());
     };
   }, [anims]);
-  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_react_native48.View, { style: [{ flexDirection: "row", alignItems: "center" }, style], children: anims.map((a, i) => /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
-    import_react_native48.Animated.View,
+  return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_react_native49.View, { style: [{ flexDirection: "row", alignItems: "center" }, style], children: anims.map((a, i) => /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+    import_react_native49.Animated.View,
     {
       style: {
         width: 8,
@@ -7160,7 +7842,7 @@ function TypingIndicator({ style }) {
         marginHorizontal: 3,
         backgroundColor: dotColor,
         opacity: a,
-        transform: [{ translateY: import_react_native48.Animated.multiply(import_react_native48.Animated.subtract(a, 0.3), 2) }]
+        transform: [{ translateY: import_react_native49.Animated.multiply(import_react_native49.Animated.subtract(a, 0.3), 2) }]
       }
     },
     i
@@ -7168,7 +7850,7 @@ function TypingIndicator({ style }) {
 }
 
 // src/components/chat/ChatMessageList.tsx
-var import_jsx_runtime50 = require("react/jsx-runtime");
+var import_jsx_runtime51 = require("react/jsx-runtime");
 var ChatMessageList = React39.forwardRef(
   ({
     messages,
@@ -7244,16 +7926,16 @@ var ChatMessageList = React39.forwardRef(
       ],
       [contentStyle, theme.spacing.lg, theme.spacing.sm]
     );
-    const renderSeparator = React39.useCallback(() => /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_react_native49.View, { style: { height: theme.spacing.sm } }), [theme.spacing.sm]);
+    const renderSeparator = React39.useCallback(() => /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_react_native50.View, { style: { height: theme.spacing.sm } }), [theme.spacing.sm]);
     const listHeader = React39.useMemo(
-      () => /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(import_react_native49.View, { children: [
-        showTypingIndicator ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_react_native49.View, { style: { marginTop: theme.spacing.sm, alignSelf: "flex-start", paddingHorizontal: theme.spacing.lg }, children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(TypingIndicator, {}) }) : null,
-        bottomInset > 0 ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_react_native49.View, { style: { height: bottomInset } }) : null
+      () => /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(import_react_native50.View, { children: [
+        showTypingIndicator ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_react_native50.View, { style: { marginTop: theme.spacing.sm, alignSelf: "flex-start", paddingHorizontal: theme.spacing.lg }, children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(TypingIndicator, {}) }) : null,
+        bottomInset > 0 ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_react_native50.View, { style: { height: bottomInset } }) : null
       ] }),
       [bottomInset, showTypingIndicator, theme.spacing.lg, theme.spacing.sm]
     );
     const renderItem = React39.useCallback(
-      ({ item }) => /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+      ({ item }) => /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
         ChatMessageBubble,
         {
           message: item,
@@ -7265,7 +7947,7 @@ var ChatMessageList = React39.forwardRef(
       ),
       [isRetryingMessage, lastMessageId, onRetryMessage, renderMessageContent]
     );
-    return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
       import_bottom_sheet5.BottomSheetFlatList,
       {
         ref: listRef,
@@ -7288,7 +7970,7 @@ var ChatMessageList = React39.forwardRef(
 ChatMessageList.displayName = "ChatMessageList";
 
 // src/components/chat/ChatPage.tsx
-var import_jsx_runtime51 = require("react/jsx-runtime");
+var import_jsx_runtime52 = require("react/jsx-runtime");
 function ChatPage({
   header,
   messages,
@@ -7309,7 +7991,7 @@ function ChatPage({
   const insets = (0, import_react_native_safe_area_context4.useSafeAreaInsets)();
   const [composerHeight, setComposerHeight] = React40.useState(0);
   const [composerTopHeight, setComposerTopHeight] = React40.useState(0);
-  const footerBottomPadding = import_react_native50.Platform.OS === "ios" ? insets.bottom - 24 : insets.bottom + 10;
+  const footerBottomPadding = import_react_native51.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;
@@ -7326,16 +8008,16 @@ function ChatPage({
     if (composerTop) return;
     setComposerTopHeight(0);
   }, [composerTop]);
-  return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(import_react_native50.View, { style: [{ flex: 1 }, style], children: [
-    header ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_react_native50.View, { children: header }) : null,
-    topBanner ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_react_native50.View, { style: { paddingHorizontal: theme.spacing.lg, paddingTop: theme.spacing.sm }, children: topBanner }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(import_react_native50.View, { style: { flex: 1 }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(
-        import_react_native50.View,
+  return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(import_react_native51.View, { style: [{ flex: 1 }, style], children: [
+    header ? /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_react_native51.View, { children: header }) : null,
+    topBanner ? /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_react_native51.View, { style: { paddingHorizontal: theme.spacing.lg, paddingTop: theme.spacing.sm }, children: topBanner }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(import_react_native51.View, { style: { flex: 1 }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(
+        import_react_native51.View,
         {
           style: { flex: 1 },
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
               ChatMessageList,
               {
                 ref: listRef,
@@ -7352,8 +8034,8 @@ function ChatPage({
           ]
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(
-        import_react_native50.View,
+      /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(
+        import_react_native51.View,
         {
           style: {
             position: "absolute",
@@ -7365,15 +8047,15 @@ function ChatPage({
             paddingBottom: footerBottomPadding
           },
           children: [
-            composerTop ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
-              import_react_native50.View,
+            composerTop ? /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+              import_react_native51.View,
               {
                 style: { marginBottom: theme.spacing.sm },
                 onLayout: (e) => setComposerTopHeight(e.nativeEvent.layout.height),
                 children: composerTop
               }
             ) : null,
-            /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
               ChatComposer,
               {
                 ...composer,
@@ -7390,9 +8072,9 @@ function ChatPage({
 
 // src/components/chat/ScrollToBottomButton.tsx
 var React41 = __toESM(require("react"));
-var import_react_native51 = require("react-native");
+var import_react_native52 = require("react-native");
 var import_react_native_reanimated2 = __toESM(require("react-native-reanimated"));
-var import_jsx_runtime52 = require("react/jsx-runtime");
+var import_jsx_runtime53 = require("react/jsx-runtime");
 function ScrollToBottomButton({ visible, onPress, children, style }) {
   const theme = useTheme();
   const progress = (0, import_react_native_reanimated2.useSharedValue)(visible ? 1 : 0);
@@ -7406,7 +8088,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__ */ (0, import_jsx_runtime52.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
     import_react_native_reanimated2.default.View,
     {
       pointerEvents: visible ? "auto" : "none",
@@ -7420,8 +8102,8 @@ function ScrollToBottomButton({ visible, onPress, children, style }) {
         style,
         animStyle
       ],
-      children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
-        import_react_native51.View,
+      children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+        import_react_native52.View,
         {
           style: {
             width: 44,
@@ -7439,8 +8121,8 @@ function ScrollToBottomButton({ visible, onPress, children, style }) {
             elevation: 5,
             opacity: pressed ? 0.85 : 1
           },
-          children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
-            import_react_native51.Pressable,
+          children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+            import_react_native52.Pressable,
             {
               onPress,
               onPressIn: () => setPressed(true),
@@ -7457,16 +8139,16 @@ function ScrollToBottomButton({ visible, onPress, children, style }) {
 }
 
 // src/components/chat/ChatHeader.tsx
-var import_react_native52 = require("react-native");
-var import_jsx_runtime53 = require("react/jsx-runtime");
+var import_react_native53 = require("react-native");
+var import_jsx_runtime54 = require("react/jsx-runtime");
 function ChatHeader({ left, right, center, style }) {
-  const flattenedStyle = import_react_native52.StyleSheet.flatten([
+  const flattenedStyle = import_react_native53.StyleSheet.flatten([
     {
       paddingTop: 0
     },
     style
   ]);
-  return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
     StudioSheetHeader,
     {
       left,
@@ -7478,13 +8160,13 @@ function ChatHeader({ left, right, center, style }) {
 }
 
 // src/components/chat/ForkNoticeBanner.tsx
-var import_react_native53 = require("react-native");
-var import_jsx_runtime54 = require("react/jsx-runtime");
+var import_react_native54 = require("react-native");
+var import_jsx_runtime55 = require("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__ */ (0, import_jsx_runtime54.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
     Card,
     {
       variant: "surfaceRaised",
@@ -7499,8 +8181,8 @@ function ForkNoticeBanner({ isOwner = true, title, description, style }) {
         },
         style
       ],
-      children: /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(import_react_native53.View, { style: { minWidth: 0 }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(import_react_native54.View, { style: { minWidth: 0 }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
           Text,
           {
             style: {
@@ -7514,7 +8196,7 @@ function ForkNoticeBanner({ isOwner = true, title, description, style }) {
             children: resolvedTitle
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
           Text,
           {
             style: {
@@ -7533,8 +8215,8 @@ function ForkNoticeBanner({ isOwner = true, title, description, style }) {
 
 // src/components/chat/ChatQueue.tsx
 var React42 = __toESM(require("react"));
-var import_react_native54 = require("react-native");
-var import_jsx_runtime55 = require("react/jsx-runtime");
+var import_react_native55 = require("react-native");
+var import_jsx_runtime56 = require("react/jsx-runtime");
 function ChatQueue({ items, onRemove }) {
   const theme = useTheme();
   const [expanded, setExpanded] = React42.useState({});
@@ -7566,8 +8248,8 @@ ${trimmedLine2}\u2026 `;
     setRemoving((prev) => Object.fromEntries(Object.entries(prev).filter(([id]) => ids.has(id))));
   }, [items]);
   if (items.length === 0) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(
-    import_react_native54.View,
+  return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
+    import_react_native55.View,
     {
       style: {
         borderWidth: 1,
@@ -7578,16 +8260,16 @@ ${trimmedLine2}\u2026 `;
         backgroundColor: "transparent"
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(Text, { variant: "caption", style: { marginBottom: theme.spacing.sm }, children: "Queue" }),
-        /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_react_native54.View, { style: { gap: theme.spacing.sm }, children: items.map((item) => {
+        /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Text, { variant: "caption", style: { marginBottom: theme.spacing.sm }, children: "Queue" }),
+        /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_react_native55.View, { style: { gap: theme.spacing.sm }, children: items.map((item) => {
           const isExpanded = Boolean(expanded[item.id]);
           const showToggle = Boolean(canExpand[item.id]);
           const prompt = item.prompt ?? "";
           const moreLabel = "more";
           const displayPrompt = !isExpanded && showToggle && collapsedText[item.id] ? collapsedText[item.id] : prompt;
           const isRemoving = Boolean(removing[item.id]);
-          return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(
-            import_react_native54.View,
+          return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
+            import_react_native55.View,
             {
               style: {
                 flexDirection: "row",
@@ -7599,8 +8281,8 @@ ${trimmedLine2}\u2026 `;
                 backgroundColor: withAlpha(theme.colors.surface, theme.scheme === "dark" ? 0.8 : 0.9)
               },
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(import_react_native54.View, { style: { flex: 1 }, children: [
-                  !canExpand[item.id] ? /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(import_react_native55.View, { style: { flex: 1 }, children: [
+                  !canExpand[item.id] ? /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
                     Text,
                     {
                       style: { position: "absolute", opacity: 0, zIndex: -1, width: "100%" },
@@ -7619,14 +8301,14 @@ ${trimmedLine2}\u2026 `;
                       children: prompt
                     }
                   ) : null,
-                  /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(
+                  /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
                     Text,
                     {
                       variant: "bodyMuted",
                       numberOfLines: isExpanded ? void 0 : 2,
                       children: [
                         displayPrompt,
-                        !isExpanded && showToggle ? /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+                        !isExpanded && showToggle ? /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
                           Text,
                           {
                             color: theme.colors.text,
@@ -7638,18 +8320,18 @@ ${trimmedLine2}\u2026 `;
                       ]
                     }
                   ),
-                  showToggle && isExpanded ? /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
-                    import_react_native54.Pressable,
+                  showToggle && isExpanded ? /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+                    import_react_native55.Pressable,
                     {
                       onPress: () => setExpanded((prev) => ({ ...prev, [item.id]: false })),
                       hitSlop: 6,
                       style: { alignSelf: "flex-start", marginTop: 4 },
-                      children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(Text, { variant: "captionMuted", color: theme.colors.text, children: "less" })
+                      children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Text, { variant: "captionMuted", color: theme.colors.text, children: "less" })
                     }
                   ) : null
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
-                  import_react_native54.Pressable,
+                /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+                  import_react_native55.Pressable,
                   {
                     onPress: () => {
                       if (!onRemove || isRemoving) return;
@@ -7664,7 +8346,7 @@ ${trimmedLine2}\u2026 `;
                     },
                     hitSlop: 8,
                     style: { alignSelf: "center" },
-                    children: isRemoving ? /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_react_native54.ActivityIndicator, { size: "small", color: theme.colors.text }) : /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(IconClose, { size: 14, colorToken: "text" })
+                    children: isRemoving ? /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_react_native55.ActivityIndicator, { size: "small", color: theme.colors.text }) : /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(IconClose, { size: 14, colorToken: "text" })
                   }
                 )
               ]
@@ -7678,8 +8360,8 @@ ${trimmedLine2}\u2026 `;
 }
 
 // src/components/chat/AgentProgressCard.tsx
-var import_react_native55 = require("react-native");
-var import_jsx_runtime56 = require("react/jsx-runtime");
+var import_react_native56 = require("react-native");
+var import_jsx_runtime57 = require("react/jsx-runtime");
 function titleForPhase(phase) {
   if (phase === "planning") return "Planning";
   if (phase === "reasoning") return "Reasoning";
@@ -7703,8 +8385,8 @@ function AgentProgressCard({ progress }) {
   const phaseLabel = titleForPhase(progress.phase);
   const subtitle = progress.latestMessage || `Agent is ${phaseLabel.toLowerCase()}...`;
   const todo = progress.todoSummary;
-  return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
-    import_react_native55.View,
+  return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(
+    import_react_native56.View,
     {
       style: {
         borderWidth: 1,
@@ -7715,20 +8397,20 @@ function AgentProgressCard({ progress }) {
         backgroundColor: withAlpha(theme.colors.surface, theme.scheme === "dark" ? 0.84 : 0.94)
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(import_react_native55.View, { style: { flexDirection: "row", alignItems: "center", justifyContent: "space-between", marginBottom: 4 }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Text, { variant: "caption", children: statusLabel }),
-          /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Text, { variant: "captionMuted", children: phaseLabel })
+        /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(import_react_native56.View, { style: { flexDirection: "row", alignItems: "center", justifyContent: "space-between", marginBottom: 4 }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(Text, { variant: "caption", children: statusLabel }),
+          /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(Text, { variant: "captionMuted", children: phaseLabel })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Text, { variant: "bodyMuted", children: subtitle }),
-        progress.changedFilesCount > 0 ? /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(Text, { variant: "captionMuted", style: { marginTop: 8 }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(Text, { variant: "bodyMuted", children: subtitle }),
+        progress.changedFilesCount > 0 ? /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(Text, { variant: "captionMuted", style: { marginTop: 8 }, children: [
           "Updated files: ",
           progress.changedFilesCount
         ] }) : null,
-        progress.recentFiles.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_react_native55.View, { style: { marginTop: 6 }, children: progress.recentFiles.map((path) => /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(Text, { variant: "captionMuted", numberOfLines: 1, children: [
+        progress.recentFiles.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_react_native56.View, { style: { marginTop: 6 }, children: progress.recentFiles.map((path) => /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(Text, { variant: "captionMuted", numberOfLines: 1, children: [
           "\u2022 ",
           path
         ] }, path)) }) : null,
-        todo ? /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(Text, { variant: "captionMuted", style: { marginTop: 8 }, children: [
+        todo ? /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(Text, { variant: "captionMuted", style: { marginTop: 8 }, children: [
           "Todos: ",
           todo.completed,
           "/",
@@ -7742,8 +8424,8 @@ function AgentProgressCard({ progress }) {
 }
 
 // src/components/chat/BundleProgressCard.tsx
-var import_react_native56 = require("react-native");
-var import_jsx_runtime57 = require("react/jsx-runtime");
+var import_react_native57 = require("react-native");
+var import_jsx_runtime58 = require("react/jsx-runtime");
 function titleForStatus2(status) {
   if (status === "succeeded") return "Completed";
   if (status === "failed") return "Failed";
@@ -7755,8 +8437,8 @@ function BundleProgressCard({ progress }) {
   const percent = Math.round(Math.max(0, Math.min(1, progress.progressValue)) * 100);
   const fillColor = progress.status === "failed" ? theme.colors.danger : progress.status === "succeeded" ? theme.colors.success : theme.colors.warning;
   const detail = progress.errorMessage || progress.phaseLabel;
-  return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(
-    import_react_native56.View,
+  return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(
+    import_react_native57.View,
     {
       accessible: true,
       accessibilityRole: "progressbar",
@@ -7771,15 +8453,15 @@ function BundleProgressCard({ progress }) {
         backgroundColor: withAlpha(theme.colors.surface, theme.scheme === "dark" ? 0.84 : 0.94)
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(import_react_native56.View, { style: { flexDirection: "row", alignItems: "center", justifyContent: "space-between", marginBottom: 8 }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(Text, { variant: "caption", children: statusLabel }),
-          /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(Text, { variant: "captionMuted", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(import_react_native57.View, { style: { flexDirection: "row", alignItems: "center", justifyContent: "space-between", marginBottom: 8 }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(Text, { variant: "caption", children: statusLabel }),
+          /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(Text, { variant: "captionMuted", children: [
             percent,
             "%"
           ] })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
-          import_react_native56.View,
+        /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+          import_react_native57.View,
           {
             style: {
               width: "100%",
@@ -7788,8 +8470,8 @@ function BundleProgressCard({ progress }) {
               backgroundColor: withAlpha(theme.colors.border, theme.scheme === "dark" ? 0.5 : 0.6),
               overflow: "hidden"
             },
-            children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
-              import_react_native56.View,
+            children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+              import_react_native57.View,
               {
                 style: {
                   width: `${percent}%`,
@@ -7800,21 +8482,21 @@ function BundleProgressCard({ progress }) {
             )
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(Text, { variant: "captionMuted", numberOfLines: 1, style: { marginTop: 8, minHeight: 16 }, children: detail })
+        /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(Text, { variant: "captionMuted", numberOfLines: 1, style: { marginTop: 8, minHeight: 16 }, children: detail })
       ]
     }
   );
 }
 
 // src/studio/ui/ChatPanel.tsx
-var import_jsx_runtime58 = require("react/jsx-runtime");
+var import_jsx_runtime59 = require("react/jsx-runtime");
 function ChatPanel({
   title = "Chat",
   messages,
   showTypingIndicator,
   loading,
   sendDisabled,
-  forking = false,
+  forking: _forking = false,
   sending,
   shouldForkOnEdit,
   attachments = [],
@@ -7852,45 +8534,45 @@ function ChatPanel({
     var _a;
     (_a = listRef.current) == null ? void 0 : _a.scrollToBottom({ animated: true });
   }, []);
-  const header = /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+  const header = /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
     ChatHeader,
     {
-      left: /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(import_react_native57.View, { style: { flexDirection: "row", alignItems: "center" }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(StudioSheetHeaderIconButton, { onPress: onBack, accessibilityLabel: "Back", style: { marginRight: 8 }, children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(IconBack, { size: 20, colorToken: "floatingContent" }) }),
-        onNavigateHome ? /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(StudioSheetHeaderIconButton, { onPress: onNavigateHome, accessibilityLabel: "Home", children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(IconHome, { size: 20, colorToken: "floatingContent" }) }) : null
+      left: /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(import_react_native58.View, { style: { flexDirection: "row", alignItems: "center" }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(StudioSheetHeaderIconButton, { onPress: onBack, accessibilityLabel: "Back", style: { marginRight: 8 }, children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(IconBack, { size: 20, colorToken: "floatingContent" }) }),
+        onNavigateHome ? /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(StudioSheetHeaderIconButton, { onPress: onNavigateHome, accessibilityLabel: "Home", children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(IconHome, { size: 20, colorToken: "floatingContent" }) }) : null
       ] }),
-      right: /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(import_react_native57.View, { style: { flexDirection: "row", alignItems: "center" }, children: [
-        onStartDraw ? /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(StudioSheetHeaderIconButton, { onPress: onStartDraw, accessibilityLabel: "Draw", intent: "danger", style: { marginRight: 8 }, children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(IconDraw, { size: 20, colorToken: "onDanger" }) }) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(StudioSheetHeaderIconButton, { onPress: onClose, accessibilityLabel: "Close", children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(IconClose, { size: 20, colorToken: "floatingContent" }) })
+      right: /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(import_react_native58.View, { style: { flexDirection: "row", alignItems: "center" }, children: [
+        onStartDraw ? /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(StudioSheetHeaderIconButton, { onPress: onStartDraw, accessibilityLabel: "Draw", intent: "danger", style: { marginRight: 8 }, children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(IconDraw, { size: 20, colorToken: "onDanger" }) }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(StudioSheetHeaderIconButton, { onPress: onClose, accessibilityLabel: "Close", children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(IconClose, { size: 20, colorToken: "floatingContent" }) })
       ] }),
       center: null
     }
   );
-  const topBanner = shouldForkOnEdit ? /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+  const topBanner = shouldForkOnEdit ? /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
     ForkNoticeBanner,
     {
       isOwner: !shouldForkOnEdit,
       style: { marginBottom: 12 }
     }
   ) : null;
-  const showMessagesLoading = Boolean(loading) && messages.length === 0 || forking;
+  const showMessagesLoading = Boolean(loading) && messages.length === 0;
   if (showMessagesLoading) {
-    return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(import_react_native57.View, { style: { flex: 1 }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_react_native57.View, { children: header }),
-      topBanner ? /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_react_native57.View, { style: { paddingHorizontal: 16, paddingTop: 8 }, children: topBanner }) : null,
-      /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(import_react_native57.View, { style: { flex: 1, alignItems: "center", justifyContent: "center", paddingHorizontal: 24, paddingVertical: 12 }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_react_native57.ActivityIndicator, {}),
-        /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_react_native57.View, { style: { height: 12 } }),
-        /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(Text, { variant: "bodyMuted", children: forking ? "Creating your copy\u2026" : "Loading messages\u2026" })
+    return /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(import_react_native58.View, { style: { flex: 1 }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_react_native58.View, { children: header }),
+      topBanner ? /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_react_native58.View, { style: { paddingHorizontal: 16, paddingTop: 8 }, children: topBanner }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(import_react_native58.View, { style: { flex: 1, alignItems: "center", justifyContent: "center", paddingHorizontal: 24, paddingVertical: 12 }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_react_native58.ActivityIndicator, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_react_native58.View, { style: { height: 12 } }),
+        /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(Text, { variant: "bodyMuted", children: "Loading messages\u2026" })
       ] })
     ] });
   }
   const bundleProgress = (progress == null ? void 0 : progress.bundle) ?? null;
-  const queueTop = progress || queueItems.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(import_react_native57.View, { style: { gap: theme.spacing.sm }, children: [
-    progress ? bundleProgress ? /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(BundleProgressCard, { progress: bundleProgress }) : /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(AgentProgressCard, { progress }) : null,
-    queueItems.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(ChatQueue, { items: queueItems, onRemove: onRemoveQueueItem }) : null
+  const queueTop = progress || queueItems.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(import_react_native58.View, { style: { gap: theme.spacing.sm }, children: [
+    progress ? bundleProgress ? /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(BundleProgressCard, { progress: bundleProgress }) : /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(AgentProgressCard, { progress }) : null,
+    !progress && queueItems.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(ChatQueue, { items: queueItems, onRemove: onRemoveQueueItem }) : null
   ] }) : null;
-  return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
     ChatPage,
     {
       header,
@@ -7903,20 +8585,20 @@ function ChatPanel({
       composerHorizontalPadding: 0,
       listRef,
       onNearBottomChange: setNearBottom,
-      overlay: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+      overlay: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
         ScrollToBottomButton,
         {
           visible: !nearBottom,
           onPress: handleScrollToBottom,
           style: { bottom: 80 },
-          children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(IconArrowDown, { size: 20, colorToken: "floatingContent" })
+          children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(IconArrowDown, { size: 20, colorToken: "floatingContent" })
         }
       ),
       composer: {
         // Keep the input editable even when sending is disallowed (e.g. agent still working),
         // otherwise iOS will drop focus/keyboard and BottomSheet can get "stuck" with a keyboard-sized gap.
-        disabled: Boolean(loading) || Boolean(forking),
-        sendDisabled: Boolean(sendDisabled) || Boolean(loading) || Boolean(forking),
+        disabled: Boolean(loading),
+        sendDisabled: Boolean(sendDisabled) || Boolean(loading),
         sending: Boolean(sending),
         onSend: handleSend,
         attachments,
@@ -7930,8 +8612,8 @@ function ChatPanel({
 
 // src/components/dialogs/ConfirmMergeRequestDialog.tsx
 var React44 = __toESM(require("react"));
-var import_react_native58 = require("react-native");
-var import_jsx_runtime59 = require("react/jsx-runtime");
+var import_react_native59 = require("react-native");
+var import_jsx_runtime60 = require("react/jsx-runtime");
 function ConfirmMergeRequestDialog({
   visible,
   onOpenChange,
@@ -7961,7 +8643,7 @@ function ConfirmMergeRequestDialog({
     justifyContent: "center",
     alignSelf: "stretch"
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(
     Modal,
     {
       visible,
@@ -7972,7 +8654,7 @@ function ConfirmMergeRequestDialog({
         backgroundColor: theme.colors.background
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_react_native58.View, { children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_react_native59.View, { children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
           Text,
           {
             style: {
@@ -7984,9 +8666,9 @@ function ConfirmMergeRequestDialog({
             children: "Are you sure you want to approve this merge request?"
           }
         ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(import_react_native58.View, { style: { marginTop: 16 }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
-            import_react_native58.View,
+        /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(import_react_native59.View, { style: { marginTop: 16 }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+            import_react_native59.View,
             {
               style: [
                 fullWidthButtonBase,
@@ -7995,22 +8677,22 @@ function ConfirmMergeRequestDialog({
                   opacity: canConfirm ? 1 : 0.5
                 }
               ],
-              children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
-                import_react_native58.Pressable,
+              children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+                import_react_native59.Pressable,
                 {
                   accessibilityRole: "button",
                   accessibilityLabel: "Approve Merge",
                   disabled: !canConfirm,
                   onPress: handleConfirm,
                   style: [fullWidthButtonBase, { flex: 1 }],
-                  children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(Text, { style: { textAlign: "center", color: theme.colors.onPrimary }, children: "Approve Merge" })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(Text, { style: { textAlign: "center", color: theme.colors.onPrimary }, children: "Approve Merge" })
                 }
               )
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_react_native58.View, { style: { height: 8 } }),
-          /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
-            import_react_native58.View,
+          /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_react_native59.View, { style: { height: 8 } }),
+          /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+            import_react_native59.View,
             {
               style: [
                 fullWidthButtonBase,
@@ -8021,22 +8703,22 @@ function ConfirmMergeRequestDialog({
                   opacity: isBuilding || !mergeRequest ? 0.5 : 1
                 }
               ],
-              children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
-                import_react_native58.Pressable,
+              children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+                import_react_native59.Pressable,
                 {
                   accessibilityRole: "button",
                   accessibilityLabel: isBuilding ? "Preparing\u2026" : "Test edits first",
                   disabled: isBuilding || !mergeRequest,
                   onPress: handleTestFirst,
                   style: [fullWidthButtonBase, { flex: 1 }],
-                  children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(Text, { style: { textAlign: "center", color: theme.colors.text }, children: isBuilding ? "Preparing\u2026" : "Test edits first" })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(Text, { style: { textAlign: "center", color: theme.colors.text }, children: isBuilding ? "Preparing\u2026" : "Test edits first" })
                 }
               )
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_react_native58.View, { style: { height: 8 } }),
-          /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
-            import_react_native58.View,
+          /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_react_native59.View, { style: { height: 8 } }),
+          /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+            import_react_native59.View,
             {
               style: [
                 fullWidthButtonBase,
@@ -8046,14 +8728,14 @@ function ConfirmMergeRequestDialog({
                   borderColor: theme.colors.border
                 }
               ],
-              children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
-                import_react_native58.Pressable,
+              children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+                import_react_native59.Pressable,
                 {
                   accessibilityRole: "button",
                   accessibilityLabel: "Cancel",
                   onPress: close,
                   style: [fullWidthButtonBase, { flex: 1 }],
-                  children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(Text, { style: { textAlign: "center", color: theme.colors.text }, children: "Cancel" })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(Text, { style: { textAlign: "center", color: theme.colors.text }, children: "Cancel" })
                 }
               )
             }
@@ -8065,7 +8747,7 @@ function ConfirmMergeRequestDialog({
 }
 
 // src/studio/ui/ConfirmMergeFlow.tsx
-var import_jsx_runtime60 = require("react/jsx-runtime");
+var import_jsx_runtime61 = require("react/jsx-runtime");
 function ConfirmMergeFlow({
   visible,
   onOpenChange,
@@ -8076,7 +8758,7 @@ function ConfirmMergeFlow({
   onConfirm,
   onTestFirst
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
     ConfirmMergeRequestDialog,
     {
       visible,
@@ -8132,7 +8814,7 @@ function isOptimisticResolvedByServer(chatMessages, o) {
 }
 function useOptimisticChatMessages({
   threadId,
-  shouldForkOnEdit,
+  shouldForkOnEdit: _shouldForkOnEdit,
   disableOptimistic = false,
   chatMessages,
   onSendChat
@@ -8167,7 +8849,7 @@ function useOptimisticChatMessages({
   }, [chatMessages, optimisticChat.length]);
   const onSend = React45.useCallback(
     async (text, attachments) => {
-      if (shouldForkOnEdit || disableOptimistic) {
+      if (disableOptimistic) {
         await onSendChat(text, attachments);
         return;
       }
@@ -8191,11 +8873,11 @@ function useOptimisticChatMessages({
         setOptimisticChat((prev) => prev.map((m) => m.id === id ? { ...m, failed: true } : m));
       });
     },
-    [chatMessages, disableOptimistic, onSendChat, shouldForkOnEdit]
+    [chatMessages, disableOptimistic, onSendChat]
   );
   const onRetry = React45.useCallback(
     async (messageId) => {
-      if (shouldForkOnEdit || disableOptimistic) return;
+      if (disableOptimistic) return;
       const target = optimisticChat.find((m) => m.id === messageId);
       if (!target || target.retrying) return;
       const baseServerLastId = chatMessages.length > 0 ? chatMessages[chatMessages.length - 1].id : null;
@@ -8215,7 +8897,7 @@ function useOptimisticChatMessages({
         );
       }
     },
-    [chatMessages, disableOptimistic, onSendChat, optimisticChat, shouldForkOnEdit]
+    [chatMessages, disableOptimistic, onSendChat, optimisticChat]
   );
   const isRetrying = React45.useCallback(
     (messageId) => {
@@ -8228,7 +8910,55 @@ function useOptimisticChatMessages({
 
 // src/studio/ui/StudioOverlay.tsx
 var import_studio_control = require("@comergehq/studio-control");
-var import_jsx_runtime61 = require("react/jsx-runtime");
+
+// src/components/icons/RemixUpIcon.tsx
+var import_react_native_svg3 = __toESM(require("react-native-svg"));
+var import_jsx_runtime62 = require("react/jsx-runtime");
+function RemixUpIcon({ width = 24, height = 24, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(import_react_native_svg3.default, { viewBox: "0 0 70 49", width, height, fill: "none", ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+      import_react_native_svg3.Path,
+      {
+        d: "M34.706 7.62939e-05L34.7656 2.28882e-05L21.44 13.2661L0 34.8401L13.266 48.1061L34.706 26.5321L21.44 13.2661L34.706 7.62939e-05Z",
+        fill: "#00CBC0"
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+      import_react_native_svg3.Path,
+      {
+        d: "M47.972 13.266L34.7656 2.28882e-05L34.706 7.62939e-05L47.972 13.266L34.706 26.5321L56.28 48.106L69.546 34.84L47.972 13.266Z",
+        fill: "#FF1820"
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+      import_react_native_svg3.Path,
+      {
+        d: "M34.7656 2.28882e-05L21.44 13.2661L34.706 26.5321L47.972 13.266L34.7656 2.28882e-05Z",
+        fill: "#00322A"
+      }
+    )
+  ] });
+}
+
+// src/components/icons/RemixXLoopLottie.tsx
+var import_lottie_react_native = __toESM(require("lottie-react-native"));
+var import_jsx_runtime63 = require("react/jsx-runtime");
+var remixXLoopSource = require_remix_x_loop_lottie();
+var Lottie = import_lottie_react_native.default;
+function RemixXLoopLottie({ size = 24, style }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+    Lottie,
+    {
+      source: remixXLoopSource,
+      autoPlay: true,
+      loop: true,
+      style: [{ width: size, height: size }, style]
+    }
+  );
+}
+
+// src/studio/ui/StudioOverlay.tsx
+var import_jsx_runtime64 = require("react/jsx-runtime");
 function StudioOverlay({
   captureTargetRef,
   app,
@@ -8272,7 +9002,7 @@ function StudioOverlay({
   onSwitchRelatedApp
 }) {
   const theme = useTheme();
-  const { width } = (0, import_react_native59.useWindowDimensions)();
+  const { width } = (0, import_react_native60.useWindowDimensions)();
   const [sheetOpen, setSheetOpen] = React46.useState(false);
   const sheetOpenRef = React46.useRef(sheetOpen);
   const pendingNavigateHomeRef = React46.useRef(false);
@@ -8283,6 +9013,7 @@ function StudioOverlay({
   const [commentsCount, setCommentsCount] = React46.useState(null);
   const threadId = (app == null ? void 0 : app.threadId) ?? null;
   const isForking = chatForking || (app == null ? void 0 : app.status) === "forking";
+  const isBubbleLoading = (app == null ? void 0 : app.status) === "editing" || isBaseBundleDownloading;
   const queueItemsForChat = isForking ? [] : chatQueueItems;
   const disableOptimistic = Boolean(queueItemsForChat && queueItemsForChat.length > 0) || (app == null ? void 0 : app.status) === "editing";
   const optimistic = useOptimisticChatMessages({
@@ -8299,7 +9030,7 @@ function StudioOverlay({
   );
   const handleSheetOpenChange = React46.useCallback((open) => {
     setSheetOpen(open);
-    if (!open) import_react_native59.Keyboard.dismiss();
+    if (!open) import_react_native60.Keyboard.dismiss();
   }, []);
   const closeSheet = React46.useCallback(() => {
     handleSheetOpenChange(false);
@@ -8310,8 +9041,8 @@ function StudioOverlay({
     openSheet();
   }, [openSheet]);
   const backToPreview = React46.useCallback(() => {
-    if (import_react_native59.Platform.OS !== "ios") {
-      import_react_native59.Keyboard.dismiss();
+    if (import_react_native60.Platform.OS !== "ios") {
+      import_react_native60.Keyboard.dismiss();
       setActivePage("preview");
       return;
     }
@@ -8323,9 +9054,9 @@ function StudioOverlay({
       clearTimeout(t);
       setActivePage("preview");
     };
-    const sub = import_react_native59.Keyboard.addListener("keyboardDidHide", finalize);
+    const sub = import_react_native60.Keyboard.addListener("keyboardDidHide", finalize);
     const t = setTimeout(finalize, 350);
-    import_react_native59.Keyboard.dismiss();
+    import_react_native60.Keyboard.dismiss();
   }, []);
   const startDraw = React46.useCallback(() => {
     setDrawing(true);
@@ -8362,26 +9093,26 @@ function StudioOverlay({
   );
   const handleNavigateHome = React46.useCallback(() => {
     if (!onNavigateHome) return;
-    if (import_react_native59.Platform.OS !== "android") {
+    if (import_react_native60.Platform.OS !== "android") {
       onNavigateHome();
       return;
     }
     if (!sheetOpenRef.current) {
-      import_react_native59.InteractionManager.runAfterInteractions(() => {
+      import_react_native60.InteractionManager.runAfterInteractions(() => {
         onNavigateHome();
       });
       return;
     }
     pendingNavigateHomeRef.current = true;
-    import_react_native59.Keyboard.dismiss();
+    import_react_native60.Keyboard.dismiss();
     setActivePage("preview");
     closeSheet();
   }, [closeSheet, onNavigateHome]);
   const handleSheetDismiss = React46.useCallback(() => {
-    if (import_react_native59.Platform.OS !== "android") return;
+    if (import_react_native60.Platform.OS !== "android") return;
     if (!pendingNavigateHomeRef.current) return;
     pendingNavigateHomeRef.current = false;
-    import_react_native59.InteractionManager.runAfterInteractions(() => {
+    import_react_native60.InteractionManager.runAfterInteractions(() => {
       onNavigateHome == null ? void 0 : onNavigateHome();
     });
   }, [onNavigateHome]);
@@ -8410,14 +9141,14 @@ function StudioOverlay({
   React46.useEffect(() => {
     void (0, import_studio_control.publishComergeStudioUIState)(sheetOpen, studioControlOptions);
   }, [sheetOpen, studioControlOptions]);
-  return /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(import_jsx_runtime61.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(EdgeGlowFrame, { visible: isTesting, role: "accent", thickness: 40, intensity: 1 }),
-    /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(StudioBottomSheet, { open: sheetOpen, onOpenChange: handleSheetOpenChange, onDismiss: handleSheetDismiss, children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)(import_jsx_runtime64.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(EdgeGlowFrame, { visible: isTesting, role: "accent", thickness: 40, intensity: 1 }),
+    /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(StudioBottomSheet, { open: sheetOpen, onOpenChange: handleSheetOpenChange, onDismiss: handleSheetDismiss, children: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
       StudioSheetPager,
       {
         activePage,
         width,
-        preview: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+        preview: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
           PreviewPanel,
           {
             app,
@@ -8451,7 +9182,7 @@ function StudioOverlay({
             onSwitchRelatedApp
           }
         ),
-        chat: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+        chat: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
           ChatPanel,
           {
             messages: optimistic.messages,
@@ -8478,19 +9209,19 @@ function StudioOverlay({
         )
       }
     ) }),
-    showBubble && /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+    showBubble && /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
       Bubble,
       {
         visible: !sheetOpen && !drawing,
         ariaLabel: sheetOpen ? "Hide studio" : "Show studio",
         badgeCount: incomingMergeRequests.length,
         onPress: toggleSheet,
-        isLoading: (app == null ? void 0 : app.status) === "editing" || isBaseBundleDownloading,
+        isLoading: isBubbleLoading,
         loadingBorderTone: isBaseBundleDownloading ? "warning" : "default",
-        children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(import_react_native59.View, { style: { width: 28, height: 28, alignItems: "center", justifyContent: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(MergeIcon, { width: 24, height: 24, color: theme.colors.floatingContent }) })
+        children: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(import_react_native60.View, { style: { width: 28, height: 28, alignItems: "center", justifyContent: "center" }, children: isBubbleLoading ? /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(RemixXLoopLottie, { size: 24 }) : /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(RemixUpIcon, { width: 24, height: 24 }) })
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
       DrawModeOverlay,
       {
         visible: drawing,
@@ -8499,7 +9230,7 @@ function StudioOverlay({
         onCapture: handleDrawCapture
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
       ConfirmMergeFlow,
       {
         visible: Boolean(confirmMr),
@@ -8513,7 +9244,7 @@ function StudioOverlay({
         onTestFirst: handleTestMr
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
       AppCommentsSheet,
       {
         appId: commentsAppId,
@@ -9152,7 +9883,7 @@ function useRelatedApps(appId) {
 }
 
 // src/studio/ComergeStudio.tsx
-var import_jsx_runtime62 = require("react/jsx-runtime");
+var import_jsx_runtime65 = require("react/jsx-runtime");
 function ComergeStudio({
   appId,
   clientKey: clientKey2,
@@ -9170,20 +9901,20 @@ function ComergeStudio({
   const [activeAppId, setActiveAppId] = React51.useState(appId);
   const [runtimeAppId, setRuntimeAppId] = React51.useState(appId);
   const [pendingRuntimeTargetAppId, setPendingRuntimeTargetAppId] = React51.useState(null);
-  const platform = React51.useMemo(() => import_react_native60.Platform.OS === "ios" ? "ios" : "android", []);
+  const platform = React51.useMemo(() => import_react_native61.Platform.OS === "ios" ? "ios" : "android", []);
   React51.useEffect(() => {
     setActiveAppId(appId);
     setRuntimeAppId(appId);
     setPendingRuntimeTargetAppId(null);
   }, [appId]);
   const captureTargetRef = React51.useRef(null);
-  return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
     StudioBootstrap,
     {
       clientKey: clientKey2,
       analyticsEnabled,
-      fallback: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(import_react_native60.View, { style: { flex: 1 } }),
-      children: ({ userId }) => /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(import_bottom_sheet6.BottomSheetModalProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(LiquidGlassResetProvider, { resetTriggers: [appId, activeAppId, runtimeAppId], children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+      fallback: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(import_react_native61.View, { style: { flex: 1 } }),
+      children: ({ userId }) => /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(import_bottom_sheet6.BottomSheetModalProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(LiquidGlassResetProvider, { resetTriggers: [appId, activeAppId, runtimeAppId], children: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
         ComergeStudioInner,
         {
           userId,
@@ -9319,6 +10050,7 @@ function ComergeStudioInner({
       }
     },
     uploadAttachments: uploader.uploadBase64Images,
+    stageAttachments: uploader.stageBase64Images,
     onEditStart: () => {
       if (editQueue.items.length === 0) {
         setSuppressQueueUntilResponse(true);
@@ -9465,8 +10197,8 @@ function ComergeStudioInner({
       setRuntimeAppId
     ]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(import_react_native60.View, { style: [{ flex: 1 }, style], children: /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(import_react_native60.View, { ref: captureTargetRef, style: { flex: 1 }, collapsable: false, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(import_react_native61.View, { style: [{ flex: 1 }, style], children: /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(import_react_native61.View, { ref: captureTargetRef, style: { flex: 1 }, collapsable: false, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
       RuntimeRenderer,
       {
         appKey,
@@ -9490,7 +10222,7 @@ function ComergeStudioInner({
         }
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
       StudioOverlay,
       {
         captureTargetRef,