@comergehq/studio 0.1.9 → 0.1.10

package/dist/index.js

@@ -36,8 +36,8 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/studio/ComergeStudio.tsx
-var React39 = __toESM(require("react"));
-var import_react_native53 = require("react-native");
+var React40 = __toESM(require("react"));
+var import_react_native54 = require("react-native");
 var import_bottom_sheet6 = require("@gorhom/bottom-sheet");
 
 // src/studio/bootstrap/StudioBootstrap.tsx
@@ -982,6 +982,39 @@ var BundlesRepositoryImpl = class extends BaseRepository {
 var bundlesRepository = new BundlesRepositoryImpl(bundlesRemoteDataSource);
 
 // src/studio/hooks/useBundleManager.ts
+function sleep(ms) {
+  return new Promise((r) => setTimeout(r, ms));
+}
+function isRetryableNetworkError(e) {
+  var _a;
+  const err = e;
+  const code = typeof (err == null ? void 0 : err.code) === "string" ? err.code : "";
+  const message = typeof (err == null ? void 0 : err.message) === "string" ? err.message : "";
+  if (code === "ERR_NETWORK" || code === "ECONNABORTED") return true;
+  if (message.toLowerCase().includes("network error")) return true;
+  if (message.toLowerCase().includes("timeout")) return true;
+  const status = typeof ((_a = err == null ? void 0 : err.response) == null ? void 0 : _a.status) === "number" ? err.response.status : void 0;
+  if (status && (status === 429 || status >= 500)) return true;
+  return false;
+}
+async function withRetry(fn, opts) {
+  let lastErr = null;
+  for (let attempt = 1; attempt <= opts.attempts; attempt += 1) {
+    try {
+      return await fn();
+    } catch (e) {
+      lastErr = e;
+      const retryable = isRetryableNetworkError(e);
+      if (!retryable || attempt >= opts.attempts) {
+        throw e;
+      }
+      const exp = Math.min(opts.maxDelayMs, opts.baseDelayMs * Math.pow(2, attempt - 1));
+      const jitter = Math.floor(Math.random() * 250);
+      await sleep(exp + jitter);
+    }
+  }
+  throw lastErr;
+}
 function safeName(s) {
   return s.replace(/[^a-zA-Z0-9._-]/g, "_");
 }
@@ -1039,8 +1072,16 @@ async function getExistingNonEmptyFileUri(fileUri) {
 async function downloadIfMissing(url, fileUri) {
   const existing = await getExistingNonEmptyFileUri(fileUri);
   if (existing) return existing;
-  const res = await FileSystem.downloadAsync(url, fileUri);
-  return res.uri;
+  return await withRetry(
+    async () => {
+      await deleteFileIfExists(fileUri);
+      const res = await FileSystem.downloadAsync(url, fileUri);
+      const ok = await getExistingNonEmptyFileUri(res.uri);
+      if (!ok) throw new Error("Downloaded bundle is empty.");
+      return res.uri;
+    },
+    { attempts: 3, baseDelayMs: 500, maxDelayMs: 4e3 }
+  );
 }
 async function deleteFileIfExists(fileUri) {
   try {
@@ -1054,11 +1095,15 @@ async function deleteFileIfExists(fileUri) {
 async function safeReplaceFileFromUrl(url, targetUri, tmpKey) {
   const tmpUri = toBundleFileUri(`tmp:${tmpKey}:${Date.now()}`);
   try {
-    await FileSystem.downloadAsync(url, tmpUri);
-    const tmpOk = await getExistingNonEmptyFileUri(tmpUri);
-    if (!tmpOk) {
-      throw new Error("Downloaded bundle is empty.");
-    }
+    await withRetry(
+      async () => {
+        await deleteFileIfExists(tmpUri);
+        await FileSystem.downloadAsync(url, tmpUri);
+        const tmpOk = await getExistingNonEmptyFileUri(tmpUri);
+        if (!tmpOk) throw new Error("Downloaded bundle is empty.");
+      },
+      { attempts: 3, baseDelayMs: 500, maxDelayMs: 4e3 }
+    );
     await deleteFileIfExists(targetUri);
     await FileSystem.moveAsync({ from: tmpUri, to: targetUri });
     const finalOk = await getExistingNonEmptyFileUri(targetUri);
@@ -1071,28 +1116,44 @@ async function safeReplaceFileFromUrl(url, targetUri, tmpKey) {
 async function pollBundle(appId, bundleId, opts) {
   const start = Date.now();
   while (true) {
-    const bundle = await bundlesRepository.getById(appId, bundleId);
-    if (bundle.status === "succeeded" || bundle.status === "failed") return bundle;
+    try {
+      const bundle = await bundlesRepository.getById(appId, bundleId);
+      if (bundle.status === "succeeded" || bundle.status === "failed") return bundle;
+    } catch (e) {
+      if (!isRetryableNetworkError(e)) {
+        throw e;
+      }
+    }
     if (Date.now() - start > opts.timeoutMs) {
       throw new Error("Bundle build timed out.");
     }
-    await new Promise((r) => setTimeout(r, opts.intervalMs));
+    await sleep(opts.intervalMs);
   }
 }
 async function resolveBundlePath(src, platform, mode) {
   const { appId, commitId } = src;
   const dir = bundlesCacheDir();
   await ensureDir(dir);
-  const initiate = await bundlesRepository.initiate(appId, {
-    platform,
-    commitId: commitId ?? void 0,
-    idempotencyKey: `${appId}:${commitId ?? "head"}:${platform}`
-  });
+  const initiate = await withRetry(
+    async () => {
+      return await bundlesRepository.initiate(appId, {
+        platform,
+        commitId: commitId ?? void 0,
+        idempotencyKey: `${appId}:${commitId ?? "head"}:${platform}`
+      });
+    },
+    { attempts: 3, baseDelayMs: 500, maxDelayMs: 4e3 }
+  );
   const finalBundle = initiate.status === "succeeded" || initiate.status === "failed" ? initiate : await pollBundle(appId, initiate.id, { timeoutMs: 3 * 60 * 1e3, intervalMs: 1200 });
   if (finalBundle.status === "failed") {
     throw new Error("Bundle build failed.");
   }
-  const signed = await bundlesRepository.getSignedDownloadUrl(appId, finalBundle.id, { redirect: false });
+  const signed = await withRetry(
+    async () => {
+      return await bundlesRepository.getSignedDownloadUrl(appId, finalBundle.id, { redirect: false });
+    },
+    { attempts: 3, baseDelayMs: 500, maxDelayMs: 4e3 }
+  );
   const bundlePath = mode === "base" ? await safeReplaceFileFromUrl(
     signed.url,
     toBundleFileUri(baseBundleKey(appId, platform)),
@@ -1108,6 +1169,7 @@ function useBundleManager({
   const [bundlePath, setBundlePath] = React5.useState(null);
   const [renderToken, setRenderToken] = React5.useState(0);
   const [loading, setLoading] = React5.useState(false);
+  const [loadingMode, setLoadingMode] = React5.useState(null);
   const [statusLabel, setStatusLabel] = React5.useState(null);
   const [error, setError] = React5.useState(null);
   const [isTesting, setIsTesting] = React5.useState(false);
@@ -1123,6 +1185,7 @@ function useBundleManager({
       baseOpIdRef.current += 1;
       if (activeLoadModeRef.current === "base") {
         setLoading(false);
+        setLoadingMode(null);
         setStatusLabel(null);
         activeLoadModeRef.current = null;
       }
@@ -1187,6 +1250,7 @@ function useBundleManager({
     const opId = mode === "base" ? ++baseOpIdRef.current : ++testOpIdRef.current;
     activeLoadModeRef.current = mode;
     setLoading(true);
+    setLoadingMode(mode);
     setError(null);
     setStatusLabel(mode === "test" ? "Loading test bundle\u2026" : "Loading latest build\u2026");
     if (mode === "base") {
@@ -1229,6 +1293,7 @@ function useBundleManager({
       if (mode === "base" && opId !== baseOpIdRef.current) return;
       if (mode === "test" && opId !== testOpIdRef.current) return;
       setLoading(false);
+      setLoadingMode(null);
       if (activeLoadModeRef.current === mode) activeLoadModeRef.current = null;
     }
   }, [activateCachedBase, platform]);
@@ -1250,7 +1315,7 @@ function useBundleManager({
     if (!canRequestLatest) return;
     void loadBase();
   }, [base.appId, base.commitId, platform, canRequestLatest, loadBase]);
-  return { bundlePath, renderToken, loading, statusLabel, error, isTesting, loadBase, loadTest, restoreBase };
+  return { bundlePath, renderToken, loading, loadingMode, statusLabel, error, isTesting, loadBase, loadTest, restoreBase };
 }
 
 // src/studio/hooks/useMergeRequests.ts
@@ -1509,6 +1574,8 @@ function useMergeRequests(params) {
 
 // src/studio/hooks/useAttachmentUpload.ts
 var React7 = __toESM(require("react"));
+var import_react_native5 = require("react-native");
+var FileSystem2 = __toESM(require("expo-file-system/legacy"));
 
 // src/data/attachment/remote.ts
 var AttachmentRemoteDataSourceImpl = class extends BaseRemote {
@@ -1548,6 +1615,40 @@ var attachmentRepository = new AttachmentRepositoryImpl(
 );
 
 // src/studio/hooks/useAttachmentUpload.ts
+async function dataUrlToBlobAndroid(dataUrl) {
+  const normalized = dataUrl.startsWith("data:") ? dataUrl : `data:image/png;base64,${dataUrl}`;
+  const comma = normalized.indexOf(",");
+  if (comma === -1) {
+    throw new Error("Invalid data URL (missing comma separator)");
+  }
+  const header = normalized.slice(0, comma);
+  const base64 = normalized.slice(comma + 1);
+  const mimeMatch = header.match(/data:(.*?);base64/i);
+  const mimeType = (mimeMatch == null ? void 0 : mimeMatch[1]) ?? "application/octet-stream";
+  const cacheDir = FileSystem2.cacheDirectory;
+  if (!cacheDir) {
+    throw new Error("expo-file-system cacheDirectory is unavailable");
+  }
+  const fileUri = `${cacheDir}attachment-${Date.now()}-${Math.random().toString(16).slice(2)}.bin`;
+  await FileSystem2.writeAsStringAsync(fileUri, base64, {
+    encoding: FileSystem2.EncodingType.Base64
+  });
+  try {
+    const resp = await fetch(fileUri);
+    const blob = await resp.blob();
+    return blob.type ? blob : new Blob([blob], { type: mimeType });
+  } finally {
+    void FileSystem2.deleteAsync(fileUri, { idempotent: true }).catch(() => {
+    });
+  }
+}
+function getMimeTypeFromDataUrl(dataUrl) {
+  const normalized = dataUrl.startsWith("data:") ? dataUrl : `data:image/png;base64,${dataUrl}`;
+  const comma = normalized.indexOf(",");
+  const header = comma === -1 ? normalized : normalized.slice(0, comma);
+  const mimeMatch = header.match(/data:(.*?);base64/i);
+  return (mimeMatch == null ? void 0 : mimeMatch[1]) ?? "image/png";
+}
 function useAttachmentUpload() {
   const [uploading, setUploading] = React7.useState(false);
   const [error, setError] = React7.useState(null);
@@ -1560,15 +1661,15 @@ function useAttachmentUpload() {
       const blobs = await Promise.all(
         dataUrls.map(async (dataUrl, idx) => {
           const normalized = dataUrl.startsWith("data:") ? dataUrl : `data:image/png;base64,${dataUrl}`;
-          const resp = await fetch(normalized);
-          const blob = await resp.blob();
-          return { blob, idx };
+          const blob = import_react_native5.Platform.OS === "android" ? await dataUrlToBlobAndroid(normalized) : await (await fetch(normalized)).blob();
+          const mimeType = getMimeTypeFromDataUrl(normalized);
+          return { blob, idx, mimeType };
         })
       );
-      const files = blobs.map(({ blob }, idx) => ({
+      const files = blobs.map(({ blob, mimeType }, idx) => ({
         name: `attachment-${Date.now()}-${idx}.png`,
         size: blob.size,
-        mimeType: blob.type || "image/png"
+        mimeType
       }));
       const presign = await attachmentRepository.presign({ threadId, appId, files });
       await Promise.all(presign.uploads.map((u, index) => attachmentRepository.upload(u, blobs[index].blob)));
@@ -1692,14 +1793,14 @@ function hasNoOutcomeAfterLastHuman(messages) {
 }
 
 // src/studio/ui/RuntimeRenderer.tsx
-var import_react_native5 = require("react-native");
+var import_react_native6 = require("react-native");
 var import_runtime = require("@comergehq/runtime");
 var import_jsx_runtime3 = require("react/jsx-runtime");
-function RuntimeRenderer({ appKey, bundlePath, renderToken, style }) {
-  if (!bundlePath) {
-    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native5.View, { style: [{ flex: 1, justifyContent: "center", alignItems: "center", padding: 24 }, style], children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Text, { variant: "bodyMuted", children: "Preparing app\u2026" }) });
+function RuntimeRenderer({ appKey, bundlePath, forcePreparing, renderToken, style }) {
+  if (!bundlePath || forcePreparing) {
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native6.View, { style: [{ flex: 1, justifyContent: "center", alignItems: "center", padding: 24 }, style], children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Text, { variant: "bodyMuted", children: "Preparing app\u2026" }) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native5.View, { style: [{ flex: 1 }, style], children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native6.View, { style: [{ flex: 1 }, style], children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
     import_runtime.ComergeRuntimeRenderer,
     {
       appKey,
@@ -1711,17 +1812,17 @@ function RuntimeRenderer({ appKey, bundlePath, renderToken, style }) {
 }
 
 // src/studio/ui/StudioOverlay.tsx
-var React38 = __toESM(require("react"));
-var import_react_native52 = require("react-native");
+var React39 = __toESM(require("react"));
+var import_react_native53 = require("react-native");
 
 // src/components/studio-sheet/StudioBottomSheet.tsx
 var React9 = __toESM(require("react"));
-var import_react_native7 = require("react-native");
+var import_react_native8 = require("react-native");
 var import_bottom_sheet = __toESM(require("@gorhom/bottom-sheet"));
 var import_react_native_safe_area_context = require("react-native-safe-area-context");
 
 // src/components/studio-sheet/StudioSheetBackground.tsx
-var import_react_native6 = require("react-native");
+var import_react_native7 = require("react-native");
 var import_liquid_glass = require("@callstack/liquid-glass");
 var import_jsx_runtime4 = require("react/jsx-runtime");
 function StudioSheetBackground({
@@ -1729,7 +1830,7 @@ function StudioSheetBackground({
   renderBackground
 }) {
   const theme = useTheme();
-  const radius = import_react_native6.Platform.OS === "ios" ? 39 : 16;
+  const radius = import_react_native7.Platform.OS === "ios" ? 39 : 16;
   const fallbackBgColor = theme.scheme === "dark" ? "rgba(11, 8, 15, 0.85)" : "rgba(255, 255, 255, 0.85)";
   const secondaryBgBaseColor = theme.scheme === "dark" ? "rgb(24, 24, 27)" : "rgb(173, 173, 173)";
   const containerStyle = {
@@ -1750,7 +1851,7 @@ function StudioSheetBackground({
       }
     ),
     import_liquid_glass.isLiquidGlassSupported && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-      import_react_native6.View,
+      import_react_native7.View,
       {
         style: [
           containerStyle,
@@ -1775,7 +1876,7 @@ var import_jsx_runtime5 = require("react/jsx-runtime");
 function StudioBottomSheet({
   open,
   onOpenChange,
-  snapPoints = ["80%", "100%"],
+  snapPoints = ["100%"],
   sheetRef,
   background,
   children,
@@ -1786,13 +1887,13 @@ function StudioBottomSheet({
   const internalSheetRef = React9.useRef(null);
   const resolvedSheetRef = sheetRef ?? internalSheetRef;
   const currentIndexRef = React9.useRef(open ? snapPoints.length - 1 : -1);
-  const lastAppStateRef = React9.useRef(import_react_native7.AppState.currentState);
+  const lastAppStateRef = React9.useRef(import_react_native8.AppState.currentState);
   React9.useEffect(() => {
-    const sub = import_react_native7.AppState.addEventListener("change", (state) => {
+    const sub = import_react_native8.AppState.addEventListener("change", (state) => {
       const prev = lastAppStateRef.current;
       lastAppStateRef.current = state;
       if (state === "background" || state === "inactive") {
-        import_react_native7.Keyboard.dismiss();
+        import_react_native8.Keyboard.dismiss();
         return;
       }
       if (state !== "active") return;
@@ -1800,7 +1901,7 @@ function StudioBottomSheet({
       if (!sheet) return;
       const idx = currentIndexRef.current;
       if (open && idx >= 0) {
-        import_react_native7.Keyboard.dismiss();
+        import_react_native8.Keyboard.dismiss();
         requestAnimationFrame(() => sheet.snapToIndex(idx));
         setTimeout(() => sheet.snapToIndex(idx), 120);
       }
@@ -1829,9 +1930,9 @@ function StudioBottomSheet({
       ref: resolvedSheetRef,
       index: open ? snapPoints.length - 1 : -1,
       snapPoints,
+      enableDynamicSizing: false,
       enablePanDownToClose: true,
-      keyboardBehavior: "interactive",
-      keyboardBlurBehavior: "restore",
+      enableContentPanningGesture: false,
       android_keyboardInputMode: "adjustResize",
       backgroundComponent: (props) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(StudioSheetBackground, { ...props, renderBackground: background == null ? void 0 : background.renderBackground }),
       topInset: insets.top,
@@ -1839,19 +1940,19 @@ function StudioBottomSheet({
       handleIndicatorStyle: { backgroundColor: theme.colors.handleIndicator },
       onChange: handleChange,
       ...bottomSheetProps,
-      children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_native7.View, { style: { flex: 1, overflow: "hidden" }, children })
+      children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_native8.View, { style: { flex: 1, overflow: "hidden" }, children })
     }
   );
 }
 
 // src/components/studio-sheet/StudioSheetPager.tsx
 var React10 = __toESM(require("react"));
-var import_react_native8 = require("react-native");
+var import_react_native9 = require("react-native");
 var import_jsx_runtime6 = require("react/jsx-runtime");
 function StudioSheetPager({ activePage, width, preview, chat, style }) {
-  const anim = React10.useRef(new import_react_native8.Animated.Value(activePage === "chat" ? 1 : 0)).current;
+  const anim = React10.useRef(new import_react_native9.Animated.Value(activePage === "chat" ? 1 : 0)).current;
   React10.useEffect(() => {
-    import_react_native8.Animated.spring(anim, {
+    import_react_native9.Animated.spring(anim, {
       toValue: activePage === "chat" ? 1 : 0,
       useNativeDriver: true,
       tension: 65,
@@ -1860,9 +1961,9 @@ function StudioSheetPager({ activePage, width, preview, chat, style }) {
   }, [activePage, anim]);
   const previewTranslateX = anim.interpolate({ inputRange: [0, 1], outputRange: [0, -width] });
   const chatTranslateX = anim.interpolate({ inputRange: [0, 1], outputRange: [width, 0] });
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_react_native8.Animated.View, { style: [{ flex: 1 }, style], children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_react_native9.Animated.View, { style: [{ flex: 1 }, style], children: [
     /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-      import_react_native8.Animated.View,
+      import_react_native9.Animated.View,
       {
         style: [
           {
@@ -1879,7 +1980,7 @@ function StudioSheetPager({ activePage, width, preview, chat, style }) {
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-      import_react_native8.Animated.View,
+      import_react_native9.Animated.View,
       {
         style: [
           {
@@ -1900,7 +2001,7 @@ function StudioSheetPager({ activePage, width, preview, chat, style }) {
 
 // src/components/floating-draggable-button/FloatingDraggableButton.tsx
 var import_react = require("react");
-var import_react_native9 = require("react-native");
+var import_react_native10 = require("react-native");
 var Haptics = __toESM(require("expo-haptics"));
 var import_react_native_reanimated = __toESM(require("react-native-reanimated"));
 var import_liquid_glass2 = require("@callstack/liquid-glass");
@@ -1959,7 +2060,7 @@ function FloatingDraggableButton({
   backgroundColor
 }) {
   const theme = useTheme();
-  const { width, height } = (0, import_react_native9.useWindowDimensions)();
+  const { width, height } = (0, import_react_native10.useWindowDimensions)();
   const isDanger = variant === "danger";
   const onPressRef = (0, import_react.useRef)(onPress);
   (0, import_react.useEffect)(() => {
@@ -2062,7 +2163,7 @@ function FloatingDraggableButton({
     }
   }, [forceShowTrigger, visible, animateIn]);
   const panResponder = (0, import_react.useRef)(
-    import_react_native9.PanResponder.create({
+    import_react_native10.PanResponder.create({
       onStartShouldSetPanResponder: () => true,
       onMoveShouldSetPanResponder: () => true,
       onPanResponderGrant: () => {
@@ -2125,24 +2226,24 @@ function FloatingDraggableButton({
             interactive: true,
             effect: "clear",
             children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-              import_react_native9.Pressable,
+              import_react_native10.Pressable,
               {
                 onPress: () => {
                   if (!disabled) animateOut();
                 },
                 style: styles.buttonInner,
                 android_ripple: { color: "rgba(255, 255, 255, 0.3)", borderless: true },
-                children: children ?? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native9.View, {})
+                children: children ?? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native10.View, {})
               }
             )
           }
         ) }),
-        badgeCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native9.View, { style: [styles.badge, { backgroundColor: theme.colors.danger }], children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native9.Text, { style: [styles.badgeText, { color: theme.colors.onDanger }], children: badgeCount > 99 ? "99+" : badgeCount }) })
+        badgeCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native10.View, { style: [styles.badge, { backgroundColor: theme.colors.danger }], children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native10.Text, { style: [styles.badgeText, { color: theme.colors.onDanger }], children: badgeCount > 99 ? "99+" : badgeCount }) })
       ]
     }
   );
 }
-var styles = import_react_native9.StyleSheet.create({
+var styles = import_react_native10.StyleSheet.create({
   floatingButton: {
     position: "absolute",
     justifyContent: "center",
@@ -2179,7 +2280,7 @@ var styles = import_react_native9.StyleSheet.create({
 
 // src/components/overlays/EdgeGlowFrame.tsx
 var React11 = __toESM(require("react"));
-var import_react_native10 = require("react-native");
+var import_react_native11 = require("react-native");
 var import_expo_linear_gradient = require("expo-linear-gradient");
 
 // src/components/utils/color.ts
@@ -2221,9 +2322,9 @@ function EdgeGlowFrame({
 }) {
   const theme = useTheme();
   const alpha = Math.max(0, Math.min(1, intensity));
-  const anim = React11.useRef(new import_react_native10.Animated.Value(visible ? 1 : 0)).current;
+  const anim = React11.useRef(new import_react_native11.Animated.Value(visible ? 1 : 0)).current;
   React11.useEffect(() => {
-    import_react_native10.Animated.timing(anim, {
+    import_react_native11.Animated.timing(anim, {
       toValue: visible ? 1 : 0,
       duration: 300,
       useNativeDriver: true
@@ -2232,8 +2333,8 @@ function EdgeGlowFrame({
   const c = baseColor(role, theme);
   const strong = withAlpha(c, 0.6 * alpha);
   const soft = withAlpha(c, 0.22 * alpha);
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_react_native10.Animated.View, { pointerEvents: "none", style: [{ position: "absolute", inset: 0, opacity: anim }, style], children: [
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native10.View, { style: { position: "absolute", top: 0, left: 0, right: 0, height: thickness }, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_react_native11.Animated.View, { pointerEvents: "none", style: [{ position: "absolute", inset: 0, opacity: anim }, style], children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native11.View, { style: { position: "absolute", top: 0, left: 0, right: 0, height: thickness }, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
       import_expo_linear_gradient.LinearGradient,
       {
         colors: [strong, soft, "transparent"],
@@ -2242,7 +2343,7 @@ function EdgeGlowFrame({
         style: { width: "100%", height: "100%" }
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native10.View, { style: { position: "absolute", bottom: 0, left: 0, right: 0, height: thickness }, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native11.View, { style: { position: "absolute", bottom: 0, left: 0, right: 0, height: thickness }, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
       import_expo_linear_gradient.LinearGradient,
       {
         colors: ["transparent", soft, strong],
@@ -2251,7 +2352,7 @@ function EdgeGlowFrame({
         style: { width: "100%", height: "100%" }
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native10.View, { style: { position: "absolute", top: 0, bottom: 0, left: 0, width: thickness }, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native11.View, { style: { position: "absolute", top: 0, bottom: 0, left: 0, width: thickness }, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
       import_expo_linear_gradient.LinearGradient,
       {
         colors: [strong, soft, "transparent"],
@@ -2260,7 +2361,7 @@ function EdgeGlowFrame({
         style: { width: "100%", height: "100%" }
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native10.View, { style: { position: "absolute", top: 0, bottom: 0, right: 0, width: thickness }, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native11.View, { style: { position: "absolute", top: 0, bottom: 0, right: 0, width: thickness }, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
       import_expo_linear_gradient.LinearGradient,
       {
         colors: ["transparent", soft, strong],
@@ -2274,12 +2375,12 @@ function EdgeGlowFrame({
 
 // src/components/draw/DrawModeOverlay.tsx
 var React14 = __toESM(require("react"));
-var import_react_native14 = require("react-native");
+var import_react_native15 = require("react-native");
 var import_react_native_view_shot = require("react-native-view-shot");
 
 // src/components/draw/DrawSurface.tsx
 var React12 = __toESM(require("react"));
-var import_react_native11 = require("react-native");
+var import_react_native12 = require("react-native");
 var import_react_native_svg = __toESM(require("react-native-svg"));
 
 // src/components/draw/strokes.ts
@@ -2350,7 +2451,7 @@ function DrawSurface({
     triggerRender();
   }, [color, onAddStroke, strokeWidth, triggerRender]);
   const panResponder = React12.useMemo(
-    () => import_react_native11.PanResponder.create({
+    () => import_react_native12.PanResponder.create({
       onStartShouldSetPanResponder: () => true,
       onMoveShouldSetPanResponder: () => true,
       onPanResponderGrant: onStart,
@@ -2362,7 +2463,7 @@ function DrawSurface({
   );
   const currentPath = pointsToSmoothPath(currentPointsRef.current);
   void renderTick;
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native11.View, { style: [import_react_native11.StyleSheet.absoluteFill, styles2.container, style], ...panResponder.panHandlers, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_react_native_svg.default, { style: import_react_native11.StyleSheet.absoluteFill, width: "100%", height: "100%", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native12.View, { style: [import_react_native12.StyleSheet.absoluteFill, styles2.container, style], ...panResponder.panHandlers, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_react_native_svg.default, { style: import_react_native12.StyleSheet.absoluteFill, width: "100%", height: "100%", children: [
     strokes.map((s, idx) => {
       const d = pointsToSmoothPath(s.points);
       if (!d) return null;
@@ -2392,7 +2493,7 @@ function DrawSurface({
     ) : null
   ] }) });
 }
-var styles2 = import_react_native11.StyleSheet.create({
+var styles2 = import_react_native12.StyleSheet.create({
   container: {
     zIndex: 5
   }
@@ -2400,7 +2501,7 @@ var styles2 = import_react_native11.StyleSheet.create({
 
 // src/components/draw/DrawToolbar.tsx
 var React13 = __toESM(require("react"));
-var import_react_native13 = require("react-native");
+var import_react_native14 = require("react-native");
 var import_react_native_safe_area_context2 = require("react-native-safe-area-context");
 var import_lucide_react_native = require("lucide-react-native");
 
@@ -2419,7 +2520,7 @@ async function impact(style) {
 }
 
 // src/components/draw/DrawColorPicker.tsx
-var import_react_native12 = require("react-native");
+var import_react_native13 = require("react-native");
 var import_jsx_runtime10 = require("react/jsx-runtime");
 function DrawColorPicker({
   colors,
@@ -2454,10 +2555,10 @@ function DrawColorPicker({
     return { ...base, ...selectedStyle, ...whiteStyle };
   };
   if (!expanded) {
-    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native12.Pressable, { onPress: onToggle, style: [swatchStyle(selected, true), style] });
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native13.Pressable, { onPress: onToggle, style: [swatchStyle(selected, true), style] });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native12.View, { style: [{ flexDirection: "row", alignItems: "center", gap: 8 }, style], children: colors.map((c, idx) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-    import_react_native12.Pressable,
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native13.View, { style: [{ flexDirection: "row", alignItems: "center", gap: 8 }, style], children: colors.map((c, idx) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    import_react_native13.Pressable,
     {
       onPress: () => {
         onSelect(c);
@@ -2488,14 +2589,14 @@ function DrawToolbar({
   style
 }) {
   const insets = (0, import_react_native_safe_area_context2.useSafeAreaInsets)();
-  const { width: screenWidth, height: screenHeight } = (0, import_react_native13.useWindowDimensions)();
+  const { width: screenWidth, height: screenHeight } = (0, import_react_native14.useWindowDimensions)();
   const [expanded, setExpanded] = React13.useState(false);
-  const pos = React13.useRef(new import_react_native13.Animated.ValueXY({ x: screenWidth / 2 - 110, y: -140 })).current;
+  const pos = React13.useRef(new import_react_native14.Animated.ValueXY({ x: screenWidth / 2 - 110, y: -140 })).current;
   const start = React13.useRef({ x: 0, y: 0 });
   const currentPos = React13.useRef({ x: 0, y: 0 });
   React13.useEffect(() => {
     if (hidden) return;
-    import_react_native13.Animated.spring(pos.y, {
+    import_react_native14.Animated.spring(pos.y, {
       toValue: insets.top + 60,
       useNativeDriver: true,
       damping: 12,
@@ -2522,7 +2623,7 @@ function DrawToolbar({
     [insets.top, screenHeight, screenWidth]
   );
   const panResponder = React13.useMemo(
-    () => import_react_native13.PanResponder.create({
+    () => import_react_native14.PanResponder.create({
       onStartShouldSetPanResponder: () => false,
       onMoveShouldSetPanResponder: (_e, g) => Math.abs(g.dx) > 5 || Math.abs(g.dy) > 5,
       onPanResponderGrant: () => {
@@ -2534,7 +2635,7 @@ function DrawToolbar({
       },
       onPanResponderRelease: () => {
         const next = clamp2(currentPos.current.x, currentPos.current.y);
-        import_react_native13.Animated.spring(pos, { toValue: next, useNativeDriver: true }).start();
+        import_react_native14.Animated.spring(pos, { toValue: next, useNativeDriver: true }).start();
       }
     }),
     [clamp2, pos]
@@ -2551,7 +2652,7 @@ function DrawToolbar({
     const isDisabled = Boolean(disabled) || Boolean(capturingDisabled);
     const [pressed, setPressed] = React13.useState(false);
     return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-      import_react_native13.View,
+      import_react_native14.View,
       {
         style: {
           width: 28,
@@ -2563,7 +2664,7 @@ function DrawToolbar({
           opacity: isDisabled ? 0.5 : pressed ? 0.85 : 1
         },
         children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-          import_react_native13.Pressable,
+          import_react_native14.Pressable,
           {
             accessibilityRole: "button",
             accessibilityLabel,
@@ -2580,7 +2681,7 @@ function DrawToolbar({
     );
   }
   return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-    import_react_native13.Animated.View,
+    import_react_native14.Animated.View,
     {
       style: [
         {
@@ -2597,7 +2698,7 @@ function DrawToolbar({
       ],
       ...panResponder.panHandlers,
       children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-        import_react_native13.View,
+        import_react_native14.View,
         {
           style: {
             backgroundColor: "#F43F5E",
@@ -2605,7 +2706,7 @@ function DrawToolbar({
             padding: 12,
             minWidth: 220
           },
-          children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_react_native13.View, { style: { flexDirection: "row", alignItems: "center", gap: 8 }, children: [
+          children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_react_native14.View, { style: { flexDirection: "row", alignItems: "center", gap: 8 }, children: [
             renderDragHandle ? renderDragHandle() : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_lucide_react_native.GripVertical, { size: 20, color: "rgba(255, 255, 255, 0.6)" }),
             /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
               DrawColorPicker,
@@ -2623,7 +2724,7 @@ function DrawToolbar({
                 }
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_native13.View, { style: { width: 1, height: 20, backgroundColor: "rgba(255, 255, 255, 0.3)", marginHorizontal: 4 } }),
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_native14.View, { style: { width: 1, height: 20, backgroundColor: "rgba(255, 255, 255, 0.3)", marginHorizontal: 4 } }),
             /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
               CircleActionButton,
               {
@@ -2661,7 +2762,7 @@ function DrawToolbar({
                   void impact("medium");
                   onDone();
                 },
-                children: capturing ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_native13.ActivityIndicator, { color: "#FFFFFF", size: "small" }) : renderDoneIcon ? renderDoneIcon() : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_lucide_react_native.Check, { size: 16, color: "#FFFFFF" })
+                children: capturing ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_native14.ActivityIndicator, { color: "#FFFFFF", size: "small" }) : renderDoneIcon ? renderDoneIcon() : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_lucide_react_native.Check, { size: 16, color: "#FFFFFF" })
               }
             )
           ] })
@@ -2746,7 +2847,7 @@ function DrawModeOverlay({
     }
   }, [captureTargetRef, capturing, onCapture]);
   if (!visible) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_react_native14.View, { style: [import_react_native14.StyleSheet.absoluteFill, styles3.root, style], pointerEvents: "box-none", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_react_native15.View, { style: [import_react_native15.StyleSheet.absoluteFill, styles3.root, style], pointerEvents: "box-none", children: [
     /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(EdgeGlowFrame, { visible: !hideUi, role: "danger", thickness: 50, intensity: 1 }),
     /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
       DrawSurface,
@@ -2777,7 +2878,7 @@ function DrawModeOverlay({
     )
   ] });
 }
-var styles3 = import_react_native14.StyleSheet.create({
+var styles3 = import_react_native15.StyleSheet.create({
   root: {
     zIndex: 9999
   }
@@ -2785,7 +2886,7 @@ var styles3 = import_react_native14.StyleSheet.create({
 
 // src/components/comments/AppCommentsSheet.tsx
 var React21 = __toESM(require("react"));
-var import_react_native20 = require("react-native");
+var import_react_native21 = require("react-native");
 var import_bottom_sheet3 = require("@gorhom/bottom-sheet");
 var import_react_native_safe_area_context3 = require("react-native-safe-area-context");
 var import_liquid_glass4 = require("@callstack/liquid-glass");
@@ -2793,13 +2894,13 @@ var import_lucide_react_native4 = require("lucide-react-native");
 
 // src/components/chat/ChatComposer.tsx
 var React16 = __toESM(require("react"));
-var import_react_native16 = require("react-native");
+var import_react_native17 = require("react-native");
 var import_liquid_glass3 = require("@callstack/liquid-glass");
 var import_lucide_react_native3 = require("lucide-react-native");
 
 // src/components/chat/MultilineTextInput.tsx
 var React15 = __toESM(require("react"));
-var import_react_native15 = require("react-native");
+var import_react_native16 = require("react-native");
 var import_bottom_sheet2 = require("@gorhom/bottom-sheet");
 var import_jsx_runtime13 = require("react/jsx-runtime");
 var MultilineTextInput = React15.forwardRef(function MultilineTextInput2({ useBottomSheetTextInput = false, placeholder, placeholderTextColor, style, ...props }, ref) {
@@ -2822,7 +2923,7 @@ var MultilineTextInput = React15.forwardRef(function MultilineTextInput2({ useBo
     style: [baseStyle, style],
     textAlignVertical: "top"
   };
-  return useBottomSheetTextInput ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_bottom_sheet2.BottomSheetTextInput, { ref, ...commonProps }) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_native15.TextInput, { ref, ...commonProps });
+  return useBottomSheetTextInput ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_bottom_sheet2.BottomSheetTextInput, { ref, ...commonProps }) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_native16.TextInput, { ref, ...commonProps });
 });
 
 // src/components/icons/StudioIcons.tsx
@@ -2875,9 +2976,9 @@ function AspectRatioThumbnail({
   renderRemoveIcon
 }) {
   const [aspectRatio, setAspectRatio] = React16.useState(1);
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_react_native16.View, { style: { height: THUMBNAIL_HEIGHT, aspectRatio, position: "relative" }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react_native16.View, { style: { flex: 1, borderRadius: 8, overflow: "hidden" }, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-      import_react_native16.Image,
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_react_native17.View, { style: { height: THUMBNAIL_HEIGHT, aspectRatio, position: "relative" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react_native17.View, { style: { flex: 1, borderRadius: 8, overflow: "hidden" }, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+      import_react_native17.Image,
       {
         source: { uri },
         style: { width: "100%", height: "100%" },
@@ -2890,7 +2991,7 @@ function AspectRatioThumbnail({
       }
     ) }),
     onRemove ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-      import_react_native16.Pressable,
+      import_react_native17.Pressable,
       {
         style: {
           position: "absolute",
@@ -2938,8 +3039,8 @@ function ChatComposer({
   const hasText = text.trim().length > 0;
   const composerMinHeight = hasAttachments ? THUMBNAIL_HEIGHT + 44 + 24 : 44;
   const isButtonDisabled = sending || disabled || sendDisabled;
-  const maxInputHeight = React16.useMemo(() => import_react_native16.Dimensions.get("window").height * 0.5, []);
-  const shakeAnim = React16.useRef(new import_react_native16.Animated.Value(0)).current;
+  const maxInputHeight = React16.useMemo(() => import_react_native17.Dimensions.get("window").height * 0.5, []);
+  const shakeAnim = React16.useRef(new import_react_native17.Animated.Value(0)).current;
   const [sendPressed, setSendPressed] = React16.useState(false);
   const inputRef = React16.useRef(null);
   const prevAutoFocusRef = React16.useRef(false);
@@ -2955,12 +3056,12 @@ function ChatComposer({
   }, [autoFocus, disabled, sending]);
   const triggerShake = React16.useCallback(() => {
     shakeAnim.setValue(0);
-    import_react_native16.Animated.sequence([
-      import_react_native16.Animated.timing(shakeAnim, { toValue: 10, duration: 50, useNativeDriver: true }),
-      import_react_native16.Animated.timing(shakeAnim, { toValue: -10, duration: 50, useNativeDriver: true }),
-      import_react_native16.Animated.timing(shakeAnim, { toValue: 10, duration: 50, useNativeDriver: true }),
-      import_react_native16.Animated.timing(shakeAnim, { toValue: -10, duration: 50, useNativeDriver: true }),
-      import_react_native16.Animated.timing(shakeAnim, { toValue: 0, duration: 50, useNativeDriver: true })
+    import_react_native17.Animated.sequence([
+      import_react_native17.Animated.timing(shakeAnim, { toValue: 10, duration: 50, useNativeDriver: true }),
+      import_react_native17.Animated.timing(shakeAnim, { toValue: -10, duration: 50, useNativeDriver: true }),
+      import_react_native17.Animated.timing(shakeAnim, { toValue: 10, duration: 50, useNativeDriver: true }),
+      import_react_native17.Animated.timing(shakeAnim, { toValue: -10, duration: 50, useNativeDriver: true }),
+      import_react_native17.Animated.timing(shakeAnim, { toValue: 0, duration: 50, useNativeDriver: true })
     ]).start();
   }, [shakeAnim]);
   const handleSend = React16.useCallback(async () => {
@@ -2976,12 +3077,12 @@ function ChatComposer({
   const textareaBgColor = theme.scheme === "dark" ? "#18181B" : "#F6F6F6";
   const placeholderTextColor = theme.scheme === "dark" ? "#A1A1AA" : "#71717A";
   return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-    import_react_native16.View,
+    import_react_native17.View,
     {
       style: [{ paddingHorizontal: 16, paddingBottom: 12, paddingTop: 8 }, style],
       onLayout: (e) => onLayout == null ? void 0 : onLayout({ height: e.nativeEvent.layout.height }),
-      children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_react_native16.View, { style: { flexDirection: "row", alignItems: "flex-end", gap: 8 }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react_native16.Animated.View, { style: { flex: 1, transform: [{ translateX: shakeAnim }] }, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_react_native17.View, { style: { flexDirection: "row", alignItems: "flex-end", gap: 8 }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react_native17.Animated.View, { style: { flex: 1, transform: [{ translateX: shakeAnim }] }, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
           import_liquid_glass3.LiquidGlassView,
           {
             style: [
@@ -2994,7 +3095,7 @@ function ChatComposer({
             effect: "clear",
             children: [
               hasAttachments ? /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
-                import_react_native16.ScrollView,
+                import_react_native17.ScrollView,
                 {
                   horizontal: true,
                   showsHorizontalScrollIndicator: false,
@@ -3011,7 +3112,7 @@ function ChatComposer({
                       `attachment-${index}`
                     )),
                     onAddAttachment ? renderAddAttachment ? renderAddAttachment() : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-                      import_react_native16.Pressable,
+                      import_react_native17.Pressable,
                       {
                         style: {
                           height: THUMBNAIL_HEIGHT,
@@ -3063,7 +3164,7 @@ function ChatComposer({
             interactive: true,
             effect: "clear",
             children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-              import_react_native16.View,
+              import_react_native17.View,
               {
                 style: {
                   width: 44,
@@ -3074,7 +3175,7 @@ function ChatComposer({
                   opacity: isButtonDisabled ? 0.6 : sendPressed ? 0.9 : 1
                 },
                 children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-                  import_react_native16.Pressable,
+                  import_react_native17.Pressable,
                   {
                     accessibilityRole: "button",
                     accessibilityLabel: "Send",
@@ -3083,7 +3184,7 @@ function ChatComposer({
                     onPressIn: () => setSendPressed(true),
                     onPressOut: () => setSendPressed(false),
                     style: { flex: 1, alignItems: "center", justifyContent: "center" },
-                    children: sending ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react_native16.ActivityIndicator, {}) : renderSendIcon ? renderSendIcon() : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(IconChevronRight, { size: 20, colorToken: "onPrimary" })
+                    children: sending ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react_native17.ActivityIndicator, {}) : renderSendIcon ? renderSendIcon() : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(IconChevronRight, { size: 20, colorToken: "onPrimary" })
                   }
                 )
               }
@@ -3097,10 +3198,10 @@ function ChatComposer({
 
 // src/components/comments/CommentRow.tsx
 var React17 = __toESM(require("react"));
-var import_react_native18 = require("react-native");
+var import_react_native19 = require("react-native");
 
 // src/components/primitives/Avatar.tsx
-var import_react_native17 = require("react-native");
+var import_react_native18 = require("react-native");
 var import_jsx_runtime16 = require("react/jsx-runtime");
 function initialsFrom(name) {
   var _a, _b;
@@ -3120,7 +3221,7 @@ function Avatar({
   const radius = size / 2;
   const fallbackBg = fallbackBackgroundColor ?? theme.colors.neutral;
   return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-    import_react_native17.View,
+    import_react_native18.View,
     {
       style: [
         {
@@ -3135,7 +3236,7 @@ function Avatar({
         style
       ],
       children: uri ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-        import_react_native17.Image,
+        import_react_native18.Image,
         {
           source: { uri },
           style: [{ width: size, height: size }, imageStyle],
@@ -3186,7 +3287,7 @@ function CommentRow({ comment, showDivider }) {
     };
   }, [comment.authorId]);
   return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
-    import_react_native18.View,
+    import_react_native19.View,
     {
       style: {
         flexDirection: "row",
@@ -3197,8 +3298,8 @@ function CommentRow({ comment, showDivider }) {
       },
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Avatar, { size: 32, uri: authorAvatar, name: authorName ?? comment.authorId, style: { marginTop: 6 } }),
-        /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_react_native18.View, { style: { flex: 1, minWidth: 0, gap: 4 }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_react_native18.View, { style: { flexDirection: "row", alignItems: "center", gap: theme.spacing.sm }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_react_native19.View, { style: { flex: 1, minWidth: 0, gap: 4 }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_react_native19.View, { style: { flexDirection: "row", alignItems: "center", gap: theme.spacing.sm }, children: [
             /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Text, { style: { fontSize: 14, lineHeight: 18, fontWeight: theme.typography.fontWeight.bold, color: theme.colors.text }, children: authorName ?? "Unknown User" }),
             /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Text, { style: { fontSize: 12, lineHeight: 16, color: theme.colors.textMuted }, children: formatTimeAgo(comment.createdAt) })
           ] }),
@@ -3366,13 +3467,13 @@ function useAppDetails(appId) {
 
 // src/components/comments/useIosKeyboardSnapFix.ts
 var React20 = __toESM(require("react"));
-var import_react_native19 = require("react-native");
+var import_react_native20 = require("react-native");
 function useIosKeyboardSnapFix(sheetRef, options) {
   const [keyboardVisible, setKeyboardVisible] = React20.useState(false);
   React20.useEffect(() => {
-    if (import_react_native19.Platform.OS !== "ios") return;
-    const show = import_react_native19.Keyboard.addListener("keyboardWillShow", () => setKeyboardVisible(true));
-    const hide = import_react_native19.Keyboard.addListener("keyboardWillHide", () => {
+    if (import_react_native20.Platform.OS !== "ios") return;
+    const show = import_react_native20.Keyboard.addListener("keyboardWillShow", () => setKeyboardVisible(true));
+    const hide = import_react_native20.Keyboard.addListener("keyboardWillHide", () => {
       var _a;
       setKeyboardVisible(false);
       const target = (options == null ? void 0 : options.targetIndex) ?? 1;
@@ -3448,17 +3549,17 @@ function AppCommentsSheet({ appId, onClose, onCountChange, onPlayApp }) {
       onChange: handleChange,
       backgroundStyle: {
         backgroundColor: theme.scheme === "dark" ? "#0B080F" : "#FFFFFF",
-        borderTopLeftRadius: import_react_native20.Platform.OS === "ios" ? 39 : 16,
-        borderTopRightRadius: import_react_native20.Platform.OS === "ios" ? 39 : 16
+        borderTopLeftRadius: import_react_native21.Platform.OS === "ios" ? 39 : 16,
+        borderTopRightRadius: import_react_native21.Platform.OS === "ios" ? 39 : 16
       },
       handleIndicatorStyle: { backgroundColor: theme.colors.handleIndicator },
       keyboardBehavior: "interactive",
       keyboardBlurBehavior: "restore",
       android_keyboardInputMode: "adjustResize",
       topInset: insets.top,
-      children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_react_native20.View, { style: { flex: 1 }, children: [
+      children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_react_native21.View, { style: { flex: 1 }, children: [
         /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
-          import_react_native20.View,
+          import_react_native21.View,
           {
             style: {
               flexDirection: "row",
@@ -3494,7 +3595,7 @@ function AppCommentsSheet({ appId, onClose, onCountChange, onPlayApp }) {
                   interactive: true,
                   effect: "clear",
                   children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
-                    import_react_native20.View,
+                    import_react_native21.View,
                     {
                       style: {
                         width: 32,
@@ -3506,7 +3607,7 @@ function AppCommentsSheet({ appId, onClose, onCountChange, onPlayApp }) {
                         opacity: appId ? 1 : 0.5
                       },
                       children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
-                        import_react_native20.Pressable,
+                        import_react_native21.Pressable,
                         {
                           disabled: !appId,
                           onPress: () => void handlePlay(),
@@ -3541,13 +3642,13 @@ function AppCommentsSheet({ appId, onClose, onCountChange, onPlayApp }) {
             },
             keyboardShouldPersistTaps: "handled",
             children: [
-              loading && comments.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_native20.View, { style: { flex: 1, alignItems: "center", justifyContent: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_native20.ActivityIndicator, {}) }) : comments.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_native20.View, { style: { flex: 1, alignItems: "center", justifyContent: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Text, { variant: "bodyMuted", style: { textAlign: "center" }, children: "No comments yet" }) }) : comments.map((c, idx) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(CommentRow, { comment: c, showDivider: idx < comments.length - 1 }, c.id)),
+              loading && comments.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_native21.View, { style: { flex: 1, alignItems: "center", justifyContent: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_native21.ActivityIndicator, {}) }) : comments.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_native21.View, { style: { flex: 1, alignItems: "center", justifyContent: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Text, { variant: "bodyMuted", style: { textAlign: "center" }, children: "No comments yet" }) }) : comments.map((c, idx) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(CommentRow, { comment: c, showDivider: idx < comments.length - 1 }, c.id)),
               error ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Text, { variant: "captionMuted", style: { marginTop: theme.spacing.lg }, children: "Failed to load comments." }) : null
             ]
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
-          import_react_native20.View,
+          import_react_native21.View,
           {
             style: {
               position: "absolute",
@@ -3556,7 +3657,7 @@ function AppCommentsSheet({ appId, onClose, onCountChange, onPlayApp }) {
               bottom: 0,
               paddingHorizontal: theme.spacing.lg,
               paddingTop: theme.spacing.sm,
-              paddingBottom: import_react_native20.Platform.OS === "ios" ? keyboardVisible ? theme.spacing.lg : insets.bottom : insets.bottom + 10,
+              paddingBottom: import_react_native21.Platform.OS === "ios" ? keyboardVisible ? theme.spacing.lg : insets.bottom : insets.bottom + 10,
               borderTopWidth: 1,
               borderTopColor: withAlpha(theme.colors.border, 0.1),
               backgroundColor: withAlpha(theme.colors.background, 0.8)
@@ -3570,7 +3671,7 @@ function AppCommentsSheet({ appId, onClose, onCountChange, onPlayApp }) {
                 useBottomSheetTextInput: true,
                 onSend: async (text) => {
                   await create(text);
-                  import_react_native20.Keyboard.dismiss();
+                  import_react_native21.Keyboard.dismiss();
                 }
               }
             )
@@ -3582,16 +3683,16 @@ function AppCommentsSheet({ appId, onClose, onCountChange, onPlayApp }) {
 }
 
 // src/studio/ui/PreviewPanel.tsx
-var import_react_native41 = require("react-native");
+var import_react_native42 = require("react-native");
 
 // src/components/preview/PreviewPage.tsx
-var import_react_native21 = require("react-native");
+var import_react_native22 = require("react-native");
 var import_bottom_sheet4 = require("@gorhom/bottom-sheet");
 var import_jsx_runtime19 = require("react/jsx-runtime");
 function PreviewPage({ header, children, contentStyle }) {
   const theme = useTheme();
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_react_native21.View, { style: { flex: 1 }, children: [
-    header ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react_native21.View, { children: header }) : null,
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_react_native22.View, { style: { flex: 1 }, children: [
+    header ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react_native22.View, { children: header }) : null,
     /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
       import_bottom_sheet4.BottomSheetScrollView,
       {
@@ -3611,15 +3712,15 @@ function PreviewPage({ header, children, contentStyle }) {
 }
 
 // src/studio/ui/preview-panel/PreviewPanelHeader.tsx
-var import_react_native24 = require("react-native");
+var import_react_native25 = require("react-native");
 
 // src/components/studio-sheet/StudioSheetHeader.tsx
-var import_react_native22 = require("react-native");
+var import_react_native23 = require("react-native");
 var import_jsx_runtime20 = require("react/jsx-runtime");
 function StudioSheetHeader({ left, center, right, style }) {
   const theme = useTheme();
   return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
-    import_react_native22.View,
+    import_react_native23.View,
     {
       style: [
         {
@@ -3632,9 +3733,9 @@ function StudioSheetHeader({ left, center, right, style }) {
         style
       ],
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react_native22.View, { style: { flexDirection: "row", alignItems: "center" }, children: left }),
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react_native22.View, { style: { flex: 1, alignItems: "center" }, children: center }),
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react_native22.View, { style: { flexDirection: "row", alignItems: "center" }, children: right })
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react_native23.View, { style: { flexDirection: "row", alignItems: "center" }, children: left }),
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react_native23.View, { style: { flex: 1, alignItems: "center" }, children: center }),
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react_native23.View, { style: { flexDirection: "row", alignItems: "center" }, children: right })
       ]
     }
   );
@@ -3642,7 +3743,7 @@ function StudioSheetHeader({ left, center, right, style }) {
 
 // src/components/studio-sheet/StudioSheetHeaderIconButton.tsx
 var React22 = __toESM(require("react"));
-var import_react_native23 = require("react-native");
+var import_react_native24 = require("react-native");
 var import_liquid_glass5 = require("@callstack/liquid-glass");
 var import_jsx_runtime21 = require("react/jsx-runtime");
 function StudioSheetHeaderIconButton({
@@ -3661,14 +3762,14 @@ function StudioSheetHeaderIconButton({
   const glassFallbackBg = theme.scheme === "dark" ? "#18181B" : "#F6F6F6";
   const glassInnerBg = intent === "danger" ? theme.colors.danger : theme.colors.primary;
   const resolvedOpacity = disabled ? 0.6 : pressed ? 0.9 : 1;
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_react_native23.View, { style, children: appearance === "glass" ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_react_native24.View, { style, children: appearance === "glass" ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
     import_liquid_glass5.LiquidGlassView,
     {
       style: [{ borderRadius: 100 }, !import_liquid_glass5.isLiquidGlassSupported && { backgroundColor: glassFallbackBg }],
       interactive: true,
       effect: "clear",
       children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-        import_react_native23.View,
+        import_react_native24.View,
         {
           style: {
             width: size,
@@ -3680,7 +3781,7 @@ function StudioSheetHeaderIconButton({
             opacity: resolvedOpacity
           },
           children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-            import_react_native23.Pressable,
+            import_react_native24.Pressable,
             {
               accessibilityRole: "button",
               accessibilityLabel,
@@ -3699,7 +3800,7 @@ function StudioSheetHeaderIconButton({
       )
     }
   ) : /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-    import_react_native23.View,
+    import_react_native24.View,
     {
       style: {
         width: size,
@@ -3711,7 +3812,7 @@ function StudioSheetHeaderIconButton({
         opacity: resolvedOpacity
       },
       children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-        import_react_native23.Pressable,
+        import_react_native24.Pressable,
         {
           accessibilityRole: "button",
           accessibilityLabel,
@@ -3738,7 +3839,7 @@ function PreviewPanelHeader({ isOwner, onClose, onNavigateHome, onGoToChat }) {
     {
       left: onNavigateHome ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(StudioSheetHeaderIconButton, { onPress: onNavigateHome, accessibilityLabel: "Home", appearance: "glass", intent: "primary", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(IconHome, { size: 20, colorToken: "onPrimary" }) }) : null,
       center: null,
-      right: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_react_native24.View, { style: { flexDirection: "row", alignItems: "center" }, children: [
+      right: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_react_native25.View, { style: { flexDirection: "row", alignItems: "center" }, children: [
         isOwner ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
           StudioSheetHeaderIconButton,
           {
@@ -3757,10 +3858,10 @@ function PreviewPanelHeader({ isOwner, onClose, onNavigateHome, onGoToChat }) {
 }
 
 // src/components/preview/PreviewHeroCard.tsx
-var import_react_native26 = require("react-native");
+var import_react_native27 = require("react-native");
 
 // src/components/primitives/Surface.tsx
-var import_react_native25 = require("react-native");
+var import_react_native26 = require("react-native");
 var import_jsx_runtime23 = require("react/jsx-runtime");
 function backgroundFor(variant, theme) {
   const { colors } = theme;
@@ -3779,7 +3880,7 @@ function backgroundFor(variant, theme) {
 function Surface({ variant = "surface", border = false, style, ...props }) {
   const theme = useTheme();
   return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
-    import_react_native25.View,
+    import_react_native26.View,
     {
       ...props,
       style: [
@@ -3835,11 +3936,11 @@ function PreviewHeroCard({
         },
         style
       ],
-      children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_react_native26.View, { style: { flex: 1 }, children: [
-        background ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_react_native26.View, { style: { position: "absolute", inset: 0 }, children: background }) : null,
-        image ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_react_native26.View, { style: { position: "absolute", inset: 0 }, children: image }) : null,
-        overlayTopLeft ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_react_native26.View, { style: { position: "absolute", top: theme.spacing.sm, left: theme.spacing.sm, zIndex: 2 }, children: overlayTopLeft }) : null,
-        overlayBottom ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_react_native26.View, { style: { flex: 1, justifyContent: "flex-end" }, children: overlayBottom }) : null
+      children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_react_native27.View, { style: { flex: 1 }, children: [
+        background ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_react_native27.View, { style: { position: "absolute", inset: 0 }, children: background }) : null,
+        image ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_react_native27.View, { style: { position: "absolute", inset: 0 }, children: image }) : null,
+        overlayTopLeft ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_react_native27.View, { style: { position: "absolute", top: theme.spacing.sm, left: theme.spacing.sm, zIndex: 2 }, children: overlayTopLeft }) : null,
+        overlayBottom ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_react_native27.View, { style: { flex: 1, justifyContent: "flex-end" }, children: overlayBottom }) : null
       ] })
     }
   );
@@ -3847,20 +3948,20 @@ function PreviewHeroCard({
 
 // src/components/preview/PreviewPlaceholder.tsx
 var React23 = __toESM(require("react"));
-var import_react_native27 = require("react-native");
+var import_react_native28 = require("react-native");
 var import_expo_linear_gradient2 = require("expo-linear-gradient");
 var import_jsx_runtime26 = require("react/jsx-runtime");
 function PreviewPlaceholder({ visible, style }) {
   if (!visible) return null;
-  const opacityAnim = React23.useRef(new import_react_native27.Animated.Value(0)).current;
+  const opacityAnim = React23.useRef(new import_react_native28.Animated.Value(0)).current;
   React23.useEffect(() => {
     if (!visible) return;
-    const animation = import_react_native27.Animated.loop(
-      import_react_native27.Animated.sequence([
-        import_react_native27.Animated.timing(opacityAnim, { toValue: 1, duration: 1500, useNativeDriver: true }),
-        import_react_native27.Animated.timing(opacityAnim, { toValue: 2, duration: 1500, useNativeDriver: true }),
-        import_react_native27.Animated.timing(opacityAnim, { toValue: 3, duration: 1500, useNativeDriver: true }),
-        import_react_native27.Animated.timing(opacityAnim, { toValue: 0, duration: 1500, useNativeDriver: true })
+    const animation = import_react_native28.Animated.loop(
+      import_react_native28.Animated.sequence([
+        import_react_native28.Animated.timing(opacityAnim, { toValue: 1, duration: 1500, useNativeDriver: true }),
+        import_react_native28.Animated.timing(opacityAnim, { toValue: 2, duration: 1500, useNativeDriver: true }),
+        import_react_native28.Animated.timing(opacityAnim, { toValue: 3, duration: 1500, useNativeDriver: true }),
+        import_react_native28.Animated.timing(opacityAnim, { toValue: 0, duration: 1500, useNativeDriver: true })
       ])
     );
     animation.start();
@@ -3871,7 +3972,7 @@ function PreviewPlaceholder({ visible, style }) {
   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_runtime26.jsxs)(import_jsx_runtime26.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react_native27.Animated.View, { style: [{ position: "absolute", inset: 0, opacity: opacity1 }, style], children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react_native28.Animated.View, { style: [{ position: "absolute", inset: 0, opacity: opacity1 }, style], children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
       import_expo_linear_gradient2.LinearGradient,
       {
         colors: ["rgba(98, 0, 238, 0.45)", "rgba(168, 85, 247, 0.35)"],
@@ -3880,7 +3981,7 @@ function PreviewPlaceholder({ visible, style }) {
         style: { width: "100%", height: "100%" }
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react_native27.Animated.View, { style: [{ position: "absolute", inset: 0, opacity: opacity2 }, style], children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react_native28.Animated.View, { style: [{ position: "absolute", inset: 0, opacity: opacity2 }, style], children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
       import_expo_linear_gradient2.LinearGradient,
       {
         colors: ["rgba(168, 85, 247, 0.45)", "rgba(139, 92, 246, 0.35)"],
@@ -3889,7 +3990,7 @@ function PreviewPlaceholder({ visible, style }) {
         style: { width: "100%", height: "100%" }
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react_native27.Animated.View, { style: [{ position: "absolute", inset: 0, opacity: opacity3 }, style], children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react_native28.Animated.View, { style: [{ position: "absolute", inset: 0, opacity: opacity3 }, style], children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
       import_expo_linear_gradient2.LinearGradient,
       {
         colors: ["rgba(139, 92, 246, 0.45)", "rgba(126, 34, 206, 0.35)"],
@@ -3898,7 +3999,7 @@ function PreviewPlaceholder({ visible, style }) {
         style: { width: "100%", height: "100%" }
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react_native27.Animated.View, { style: [{ position: "absolute", inset: 0, opacity: opacity4 }, style], children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react_native28.Animated.View, { style: [{ position: "absolute", inset: 0, opacity: opacity4 }, style], children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
       import_expo_linear_gradient2.LinearGradient,
       {
         colors: ["rgba(126, 34, 206, 0.45)", "rgba(98, 0, 238, 0.35)"],
@@ -3911,12 +4012,12 @@ function PreviewPlaceholder({ visible, style }) {
 }
 
 // src/components/preview/PreviewImage.tsx
-var import_react_native28 = require("react-native");
+var import_react_native29 = require("react-native");
 var import_jsx_runtime27 = require("react/jsx-runtime");
 function PreviewImage({ uri, onLoad, style }) {
   if (!uri) return null;
   return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
-    import_react_native28.Image,
+    import_react_native29.Image,
     {
       source: { uri },
       resizeMode: "cover",
@@ -3927,7 +4028,7 @@ function PreviewImage({ uri, onLoad, style }) {
 }
 
 // src/components/preview/StatsBar.tsx
-var import_react_native29 = require("react-native");
+var import_react_native30 = require("react-native");
 var import_liquid_glass6 = require("@callstack/liquid-glass");
 var import_lucide_react_native5 = require("lucide-react-native");
 
@@ -3960,7 +4061,7 @@ function StatsBar({
   const theme = useTheme();
   const statsBgColor = theme.scheme === "dark" ? "rgba(24, 24, 27, 0.5)" : "rgba(255, 255, 255, 0.5)";
   return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
-    import_react_native29.View,
+    import_react_native30.View,
     {
       style: [
         { position: "absolute", bottom: 12, width: "100%", paddingHorizontal: 12 },
@@ -3976,15 +4077,15 @@ function StatsBar({
             !import_liquid_glass6.isLiquidGlassSupported && { backgroundColor: statsBgColor }
           ],
           effect: "clear",
-          children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_react_native29.View, { style: { flexDirection: "row", alignItems: "center", justifyContent: "space-between", paddingHorizontal: 16 }, children: [
+          children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_react_native30.View, { style: { flexDirection: "row", alignItems: "center", justifyContent: "space-between", paddingHorizontal: 16 }, children: [
             /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
-              import_react_native29.Pressable,
+              import_react_native30.Pressable,
               {
                 disabled: !onPressLike,
                 onPress: onPressLike,
                 hitSlop: 8,
                 style: { paddingVertical: 8 },
-                children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_react_native29.View, { style: { flexDirection: "row", alignItems: "center" }, children: [
+                children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_react_native30.View, { style: { flexDirection: "row", alignItems: "center" }, children: [
                   /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
                     import_lucide_react_native5.Heart,
                     {
@@ -3994,7 +4095,7 @@ function StatsBar({
                       fill: isLiked ? theme.colors.danger : "transparent"
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_react_native29.View, { style: { width: 4 } }),
+                  /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_react_native30.View, { style: { width: 4 } }),
                   /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
                     Text,
                     {
@@ -4010,22 +4111,22 @@ function StatsBar({
               }
             ),
             /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
-              import_react_native29.Pressable,
+              import_react_native30.Pressable,
               {
                 disabled: !onPressComments,
                 onPress: onPressComments,
                 hitSlop: 8,
                 style: { paddingVertical: 8 },
-                children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_react_native29.View, { style: { flexDirection: "row", alignItems: "center" }, children: [
+                children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_react_native30.View, { style: { flexDirection: "row", alignItems: "center" }, children: [
                   /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_lucide_react_native5.MessageCircle, { size: 16, strokeWidth: 2.5, color: "#FFFFFF" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_react_native29.View, { style: { width: 4 } }),
+                  /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_react_native30.View, { style: { width: 4 } }),
                   /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Text, { variant: "caption", style: { color: "#FFFFFF", fontWeight: theme.typography.fontWeight.bold }, children: commentCount })
                 ] })
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_react_native29.View, { style: { flexDirection: "row", alignItems: "center", paddingVertical: 8 }, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_react_native29.View, { style: { transform: [{ scaleY: -1 }] }, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(MergeIcon, { width: 14, height: 14, color: "#FFFFFF" }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_react_native29.View, { style: { width: 4 } }),
+            /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_react_native30.View, { style: { flexDirection: "row", alignItems: "center", paddingVertical: 8 }, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_react_native30.View, { style: { transform: [{ scaleY: -1 }] }, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(MergeIcon, { width: 14, height: 14, color: "#FFFFFF" }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_react_native30.View, { style: { width: 4 } }),
               /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Text, { variant: "caption", style: { color: "#FFFFFF", fontWeight: theme.typography.fontWeight.bold }, children: forkCount })
             ] })
           ] })
@@ -4036,7 +4137,7 @@ function StatsBar({
 }
 
 // src/components/preview/PreviewStatusBadge.tsx
-var import_react_native30 = require("react-native");
+var import_react_native31 = require("react-native");
 var import_lucide_react_native6 = require("lucide-react-native");
 
 // src/data/apps/types.ts
@@ -4081,7 +4182,7 @@ function PreviewStatusBadge({ status }) {
   const IconComp = STATUS_ICON[status];
   const label = APP_STATUS_LABEL[status] ?? status;
   return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
-    import_react_native30.View,
+    import_react_native31.View,
     {
       style: {
         flexDirection: "row",
@@ -4134,10 +4235,10 @@ function PreviewHeroSection({
 }
 
 // src/studio/ui/preview-panel/PreviewMetaSection.tsx
-var import_react_native32 = require("react-native");
+var import_react_native33 = require("react-native");
 
 // src/components/preview/PreviewMetaRow.tsx
-var import_react_native31 = require("react-native");
+var import_react_native32 = require("react-native");
 var import_jsx_runtime32 = require("react/jsx-runtime");
 function PreviewMetaRow({
   avatarUri,
@@ -4149,10 +4250,10 @@ function PreviewMetaRow({
   style
 }) {
   const theme = useTheme();
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_react_native31.View, { style: [{ alignSelf: "stretch" }, style], children: [
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_react_native31.View, { style: { flexDirection: "row", alignItems: "center" }, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_react_native32.View, { style: [{ alignSelf: "stretch" }, style], children: [
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_react_native32.View, { style: { flexDirection: "row", alignItems: "center" }, children: [
       /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Avatar, { uri: avatarUri, name: creatorName, size: 24, style: { marginRight: theme.spacing.sm } }),
-      /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_react_native31.View, { style: { flexDirection: "row", alignItems: "center", flex: 1, minWidth: 0, marginRight: theme.spacing.sm }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_react_native32.View, { style: { flexDirection: "row", alignItems: "center", flex: 1, minWidth: 0, marginRight: theme.spacing.sm }, children: [
         /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
           Text,
           {
@@ -4167,9 +4268,9 @@ function PreviewMetaRow({
             children: title
           }
         ),
-        tag ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_react_native31.View, { style: { marginLeft: theme.spacing.sm }, children: tag }) : null
+        tag ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_react_native32.View, { style: { marginLeft: theme.spacing.sm }, children: tag }) : null
       ] }),
-      rightMetric ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_react_native31.View, { children: rightMetric }) : null
+      rightMetric ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_react_native32.View, { children: rightMetric }) : null
     ] }),
     subtitle ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
       Text,
@@ -4225,9 +4326,9 @@ function PreviewMetaSection({ app, isOwner, creator, downloadsCount }) {
       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_runtime33.jsx)(import_react_native32.View, { style: { paddingHorizontal: 8, paddingVertical: 2, borderRadius: 999, backgroundColor: "#3700B3" }, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Text, { variant: "caption", style: { color: "#fff", fontWeight: theme.typography.fontWeight.semibold }, children: app.forkedFromAppId ? "Remix" : "Owner" }) }) : null,
+      tag: isOwner || app.forkedFromAppId ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_react_native33.View, { style: { paddingHorizontal: 8, paddingVertical: 2, borderRadius: 999, backgroundColor: "#3700B3" }, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Text, { variant: "caption", style: { color: "#fff", fontWeight: theme.typography.fontWeight.semibold }, children: app.forkedFromAppId ? "Remix" : "Owner" }) }) : null,
       rightMetric: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
-        import_react_native32.View,
+        import_react_native33.View,
         {
           style: {
             flexDirection: "row",
@@ -4261,10 +4362,10 @@ function PreviewMetaSection({ app, isOwner, creator, downloadsCount }) {
 }
 
 // src/studio/ui/preview-panel/PreviewCustomizeSection.tsx
-var import_react_native34 = require("react-native");
+var import_react_native35 = require("react-native");
 
 // src/studio/ui/preview-panel/PressableCardRow.tsx
-var import_react_native33 = require("react-native");
+var import_react_native34 = require("react-native");
 var import_jsx_runtime34 = require("react/jsx-runtime");
 function PressableCardRow({
   accessibilityLabel,
@@ -4277,20 +4378,20 @@ function PressableCardRow({
   style
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
-    import_react_native33.Pressable,
+    import_react_native34.Pressable,
     {
       accessibilityRole: "button",
       accessibilityLabel,
       disabled,
       onPress,
       style: ({ pressed }) => ({ opacity: disabled ? 0.6 : pressed ? 0.85 : 1 }),
-      children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Card, { padded: false, border: false, style, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_react_native33.View, { style: { flexDirection: "row", alignItems: "center" }, children: [
+      children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Card, { padded: false, border: false, style, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_react_native34.View, { style: { flexDirection: "row", alignItems: "center" }, children: [
         left,
-        /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_react_native33.View, { style: { flex: 1, minWidth: 0 }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_react_native34.View, { style: { flex: 1, minWidth: 0 }, children: [
           title,
           subtitle ? subtitle : null
         ] }),
-        right ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_react_native33.View, { style: { marginLeft: 16 }, children: right }) : null
+        right ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_react_native34.View, { style: { marginLeft: 16 }, children: right }) : null
       ] }) })
     }
   );
@@ -4332,7 +4433,7 @@ function PreviewCustomizeSection({
   return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_jsx_runtime36.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(SectionTitle, { children: "Customize" }),
     showProcessing ? /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
-      import_react_native34.View,
+      import_react_native35.View,
       {
         style: {
           flexDirection: "row",
@@ -4346,7 +4447,7 @@ function PreviewCustomizeSection({
         },
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
-            import_react_native34.View,
+            import_react_native35.View,
             {
               style: {
                 width: 40,
@@ -4357,10 +4458,10 @@ function PreviewCustomizeSection({
                 backgroundColor: withAlpha(theme.colors.warning, 0.1),
                 marginRight: theme.spacing.lg
               },
-              children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_react_native34.ActivityIndicator, { color: theme.colors.warning, size: "small" })
+              children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_react_native35.ActivityIndicator, { color: theme.colors.warning, size: "small" })
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_react_native34.View, { style: { flex: 1, minWidth: 0 }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_react_native35.View, { style: { flex: 1, minWidth: 0 }, children: [
             /* @__PURE__ */ (0, import_jsx_runtime36.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_runtime36.jsx)(Text, { style: { color: theme.colors.textMuted, fontSize: 12, lineHeight: 16, marginTop: 2 }, children: statusDescription(app.status, app.statusError) })
           ] })
@@ -4381,7 +4482,7 @@ function PreviewCustomizeSection({
           marginBottom: theme.spacing.sm
         },
         left: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
-          import_react_native34.View,
+          import_react_native35.View,
           {
             style: {
               width: 40,
@@ -4414,7 +4515,7 @@ function PreviewCustomizeSection({
           marginBottom: theme.spacing.sm
         },
         left: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
-          import_react_native34.View,
+          import_react_native35.View,
           {
             style: {
               width: 40,
@@ -4438,16 +4539,16 @@ function PreviewCustomizeSection({
 
 // src/studio/ui/preview-panel/PreviewCollaborateSection.tsx
 var React29 = __toESM(require("react"));
-var import_react_native40 = require("react-native");
+var import_react_native41 = require("react-native");
 var import_lucide_react_native9 = require("lucide-react-native");
 
 // src/components/merge-requests/MergeRequestStatusCard.tsx
 var React25 = __toESM(require("react"));
-var import_react_native36 = require("react-native");
+var import_react_native37 = require("react-native");
 var import_lucide_react_native7 = require("lucide-react-native");
 
 // src/components/primitives/MarkdownText.tsx
-var import_react_native35 = require("react-native");
+var import_react_native36 = require("react-native");
 var import_react_native_markdown_display = __toESM(require("react-native-markdown-display"));
 var import_jsx_runtime37 = require("react/jsx-runtime");
 function MarkdownText({ markdown, variant = "chat", bodyColor, style }) {
@@ -4460,7 +4561,7 @@ function MarkdownText({ markdown, variant = "chat", bodyColor, style }) {
   const codeTextColor = isDark ? "#FFFFFF" : theme.colors.text;
   const paragraphBottom = variant === "mergeRequest" ? 8 : 6;
   const baseLineHeight = variant === "mergeRequest" ? 22 : 20;
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_react_native35.View, { style, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_react_native36.View, { style, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
     import_react_native_markdown_display.default,
     {
       style: {
@@ -4473,7 +4574,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_native35.Platform.OS === "ios" ? "Menlo" : "monospace",
+          fontFamily: import_react_native36.Platform.OS === "ios" ? "Menlo" : "monospace",
           fontSize: 13
         },
         code_block: {
@@ -4585,15 +4686,15 @@ function MergeRequestStatusCard({
   const createdIso = toIsoString(mergeRequest.createdAt ?? null);
   const headerTimeAgo = updatedIso ? formatTimeAgo(updatedIso) : "";
   const createdTimeAgo = createdIso ? formatTimeAgo(createdIso) : "";
-  const rotate = React25.useRef(new import_react_native36.Animated.Value(expanded ? 1 : 0)).current;
+  const rotate = React25.useRef(new import_react_native37.Animated.Value(expanded ? 1 : 0)).current;
   React25.useEffect(() => {
-    import_react_native36.Animated.timing(rotate, {
+    import_react_native37.Animated.timing(rotate, {
       toValue: expanded ? 1 : 0,
       duration: 200,
       useNativeDriver: true
     }).start();
   }, [expanded, rotate]);
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_react_native36.Pressable, { onPress: () => setExpanded(!expanded), style: ({ pressed }) => [{ opacity: pressed ? 0.95 : 1 }], children: /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_react_native37.Pressable, { onPress: () => setExpanded(!expanded), style: ({ pressed }) => [{ opacity: pressed ? 0.95 : 1 }], children: /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
     Card,
     {
       padded: false,
@@ -4606,10 +4707,10 @@ function MergeRequestStatusCard({
         style
       ],
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_react_native36.View, { style: { flexDirection: "row", alignItems: "center", gap: theme.spacing.lg }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_react_native36.View, { style: { width: 40, height: 40, borderRadius: 999, alignItems: "center", justifyContent: "center", backgroundColor: bgColor }, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(StatusIcon, { size: 20, color: iconColor }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_react_native36.View, { style: { flex: 1, minWidth: 0 }, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_react_native36.View, { style: { flexDirection: "row", alignItems: "center", justifyContent: "space-between" }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_react_native37.View, { style: { flexDirection: "row", alignItems: "center", gap: theme.spacing.lg }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_react_native37.View, { style: { width: 40, height: 40, borderRadius: 999, alignItems: "center", justifyContent: "center", backgroundColor: bgColor }, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(StatusIcon, { size: 20, color: iconColor }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_react_native37.View, { style: { flex: 1, minWidth: 0 }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_react_native37.View, { style: { flexDirection: "row", alignItems: "center", justifyContent: "space-between" }, children: [
               /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
                 Text,
                 {
@@ -4628,8 +4729,8 @@ function MergeRequestStatusCard({
             ] }),
             /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Text, { style: { fontSize: 12, lineHeight: 16, color: theme.colors.textMuted }, numberOfLines: 1, children: mergeRequest.title ?? "Untitled merge request" })
           ] }),
-          headerRight ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_react_native36.View, { children: headerRight }) : /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
-            import_react_native36.Animated.View,
+          headerRight ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_react_native37.View, { children: headerRight }) : /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+            import_react_native37.Animated.View,
             {
               style: {
                 transform: [
@@ -4642,7 +4743,7 @@ function MergeRequestStatusCard({
             }
           )
         ] }),
-        expanded ? /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_react_native36.View, { style: { marginTop: 16, marginLeft: 56 }, children: [
+        expanded ? /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_react_native37.View, { style: { marginTop: 16, marginLeft: 56 }, children: [
           /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
             Text,
             {
@@ -4678,16 +4779,16 @@ function MergeRequestStatusCard({
 
 // src/components/merge-requests/ReviewMergeRequestCarousel.tsx
 var React28 = __toESM(require("react"));
-var import_react_native39 = require("react-native");
+var import_react_native40 = require("react-native");
 
 // src/components/merge-requests/ReviewMergeRequestCard.tsx
 var React27 = __toESM(require("react"));
-var import_react_native38 = require("react-native");
+var import_react_native39 = require("react-native");
 var import_lucide_react_native8 = require("lucide-react-native");
 
 // src/components/merge-requests/ReviewMergeRequestActionButton.tsx
 var React26 = __toESM(require("react"));
-var import_react_native37 = require("react-native");
+var import_react_native38 = require("react-native");
 var import_jsx_runtime39 = require("react/jsx-runtime");
 function ReviewMergeRequestActionButton({
   accessibilityLabel,
@@ -4704,7 +4805,7 @@ function ReviewMergeRequestActionButton({
   const paddingVertical = iconOnly ? 0 : 8;
   const opacity = disabled ? 0.5 : pressed ? 0.9 : 1;
   return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
-    import_react_native37.View,
+    import_react_native38.View,
     {
       style: {
         width,
@@ -4719,7 +4820,7 @@ function ReviewMergeRequestActionButton({
         justifyContent: "center"
       },
       children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
-        import_react_native37.Pressable,
+        import_react_native38.Pressable,
         {
           accessibilityRole: "button",
           accessibilityLabel,
@@ -4761,12 +4862,12 @@ function ReviewMergeRequestCard({
   const theme = useTheme();
   const status = React27.useMemo(() => getMergeRequestStatusDisplay(mr.status), [mr.status]);
   const canAct = mr.status === "open";
-  const rotate = React27.useRef(new import_react_native38.Animated.Value(isExpanded ? 1 : 0)).current;
+  const rotate = React27.useRef(new import_react_native39.Animated.Value(isExpanded ? 1 : 0)).current;
   React27.useEffect(() => {
-    import_react_native38.Animated.timing(rotate, { toValue: isExpanded ? 1 : 0, duration: 200, useNativeDriver: true }).start();
+    import_react_native39.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_runtime40.jsx)(import_react_native38.Pressable, { onPress: onToggle, style: ({ pressed }) => ({ opacity: pressed ? 0.95 : 1 }), children: /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_react_native39.Pressable, { onPress: onToggle, style: ({ pressed }) => ({ opacity: pressed ? 0.95 : 1 }), children: /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
     Card,
     {
       padded: false,
@@ -4779,9 +4880,9 @@ function ReviewMergeRequestCard({
         }
       ],
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_react_native38.View, { style: { flexDirection: "row", alignItems: "center", gap: 12 }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_react_native39.View, { style: { flexDirection: "row", alignItems: "center", gap: 12 }, children: [
           /* @__PURE__ */ (0, import_jsx_runtime40.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_runtime40.jsxs)(import_react_native38.View, { style: { flex: 1, minWidth: 0 }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_react_native39.View, { style: { flex: 1, minWidth: 0 }, children: [
             /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
               Text,
               {
@@ -4797,7 +4898,7 @@ function ReviewMergeRequestCard({
             ] })
           ] }),
           /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
-            import_react_native38.Animated.View,
+            import_react_native39.Animated.View,
             {
               style: {
                 transform: [{ rotate: rotate.interpolate({ inputRange: [0, 1], outputRange: ["0deg", "180deg"] }) }]
@@ -4806,7 +4907,7 @@ function ReviewMergeRequestCard({
             }
           )
         ] }),
-        isExpanded ? /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_react_native38.View, { style: { marginTop: 16 }, children: [
+        isExpanded ? /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_react_native39.View, { style: { marginTop: 16 }, children: [
           /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
             Text,
             {
@@ -4824,9 +4925,9 @@ function ReviewMergeRequestCard({
           /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Text, { style: { color: theme.colors.textMuted, fontSize: 12, lineHeight: 16, marginBottom: 12 }, children: creator ? `${creator.approvedOpenedMergeRequests} approved merge${creator.approvedOpenedMergeRequests !== 1 ? "s" : ""}` : "Loading stats..." }),
           mr.description ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(MarkdownText, { markdown: mr.description, variant: "mergeRequest" }) : null
         ] }) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_react_native38.View, { style: { height: 1, backgroundColor: withAlpha(theme.colors.borderStrong, 0.5), marginTop: 12, marginBottom: 12 } }),
-        /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_react_native38.View, { style: { flexDirection: "row", alignItems: "center", justifyContent: "space-between" }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_react_native38.View, { style: { flexDirection: "row", gap: 8 }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_react_native39.View, { style: { height: 1, backgroundColor: withAlpha(theme.colors.borderStrong, 0.5), marginTop: 12, marginBottom: 12 } }),
+        /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_react_native39.View, { style: { flexDirection: "row", alignItems: "center", justifyContent: "space-between" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_react_native39.View, { style: { flexDirection: "row", gap: 8 }, children: [
             /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
               ReviewMergeRequestActionButton,
               {
@@ -4835,7 +4936,7 @@ function ReviewMergeRequestCard({
                 disabled: !canAct || isAnyProcessing,
                 onPress: onReject,
                 iconOnly: !isExpanded,
-                children: /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_react_native38.View, { style: { flexDirection: "row", alignItems: "center", gap: isExpanded ? 4 : 0 }, children: [
+                children: /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_react_native39.View, { style: { flexDirection: "row", alignItems: "center", gap: isExpanded ? 4 : 0 }, children: [
                   /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_lucide_react_native8.X, { size: 18, color: "#FFFFFF" }),
                   isExpanded ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Text, { style: { fontSize: 13, color: "#FFFFFF", fontWeight: theme.typography.fontWeight.semibold }, children: "Reject" }) : null
                 ] })
@@ -4849,10 +4950,10 @@ function ReviewMergeRequestCard({
                 disabled: !canAct || isAnyProcessing,
                 onPress: onApprove,
                 iconOnly: !isExpanded,
-                children: isProcessing ? /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_react_native38.View, { style: { flexDirection: "row", alignItems: "center", gap: isExpanded ? 4 : 0 }, children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_react_native38.ActivityIndicator, { size: "small", color: "#FFFFFF" }),
+                children: isProcessing ? /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_react_native39.View, { style: { flexDirection: "row", alignItems: "center", gap: isExpanded ? 4 : 0 }, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_react_native39.ActivityIndicator, { size: "small", color: "#FFFFFF" }),
                   isExpanded ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Text, { style: { fontSize: 13, color: "#FFFFFF", fontWeight: theme.typography.fontWeight.semibold }, children: "Processing" }) : null
-                ] }) : /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_react_native38.View, { style: { flexDirection: "row", alignItems: "center", gap: isExpanded ? 4 : 0 }, children: [
+                ] }) : /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_react_native39.View, { style: { flexDirection: "row", alignItems: "center", gap: isExpanded ? 4 : 0 }, children: [
                   /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_lucide_react_native8.Check, { size: 18, color: "#FFFFFF" }),
                   isExpanded ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Text, { style: { fontSize: 13, color: "#FFFFFF", fontWeight: theme.typography.fontWeight.semibold }, children: "Approve" }) : null
                 ] })
@@ -4867,7 +4968,7 @@ function ReviewMergeRequestCard({
               disabled: isBuilding || isTestingThis,
               onPress: onTest,
               iconOnly: !isExpanded,
-              children: isTestingThis ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_react_native38.ActivityIndicator, { size: "small", color: "#888" }) : /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_react_native38.View, { style: { flexDirection: "row", alignItems: "center", gap: isExpanded ? 4 : 0 }, children: [
+              children: isTestingThis ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_react_native39.ActivityIndicator, { size: "small", color: "#888" }) : /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_react_native39.View, { style: { flexDirection: "row", alignItems: "center", gap: isExpanded ? 4 : 0 }, children: [
                 /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_lucide_react_native8.Play, { size: 14, color: theme.colors.text }),
                 isExpanded ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Text, { style: { fontSize: 13, color: theme.colors.text, fontWeight: theme.typography.fontWeight.semibold }, children: "Test" }) : null
               ] })
@@ -4893,32 +4994,32 @@ function ReviewMergeRequestCarousel({
   style
 }) {
   const theme = useTheme();
-  const { width } = (0, import_react_native39.useWindowDimensions)();
+  const { width } = (0, import_react_native40.useWindowDimensions)();
   const [expanded, setExpanded] = React28.useState({});
-  const carouselScrollX = React28.useRef(new import_react_native39.Animated.Value(0)).current;
+  const carouselScrollX = React28.useRef(new import_react_native40.Animated.Value(0)).current;
   const peekAmount = 24;
   const gap = 16;
   const cardWidth = React28.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_runtime41.jsxs)(import_react_native39.View, { style: [{ marginHorizontal: -theme.spacing.lg }, style], children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_react_native40.View, { style: [{ marginHorizontal: -theme.spacing.lg }, style], children: [
     /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
-      import_react_native39.FlatList,
+      import_react_native40.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_runtime41.jsx)(import_react_native39.View, { style: { width: gap } }),
+        ItemSeparatorComponent: () => /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_react_native40.View, { style: { width: gap } }),
         snapToAlignment: "start",
         decelerationRate: "fast",
         snapToInterval: snapInterval,
         disableIntervalMomentum: true,
         style: { paddingRight: peekAmount },
-        ListFooterComponent: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_react_native39.View, { style: { width: peekAmount } }),
-        onScroll: import_react_native39.Animated.event([{ nativeEvent: { contentOffset: { x: carouselScrollX } } }], {
+        ListFooterComponent: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_react_native40.View, { style: { width: peekAmount } }),
+        onScroll: import_react_native40.Animated.event([{ nativeEvent: { contentOffset: { x: carouselScrollX } } }], {
           useNativeDriver: false
         }),
         scrollEventThrottle: 16,
@@ -4929,7 +5030,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_runtime41.jsx)(import_react_native39.View, { style: { width: cardWidth }, children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+          return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_react_native40.View, { style: { width: cardWidth }, children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
             ReviewMergeRequestCard,
             {
               mr: item,
@@ -4950,7 +5051,7 @@ function ReviewMergeRequestCarousel({
         }
       }
     ),
-    mergeRequests.length >= 1 ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_react_native39.View, { style: { flexDirection: "row", justifyContent: "center", columnGap: 8, marginTop: theme.spacing.md }, children: mergeRequests.map((mr, index) => {
+    mergeRequests.length >= 1 ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_react_native40.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,
@@ -4963,7 +5064,7 @@ function ReviewMergeRequestCarousel({
         extrapolate: "clamp"
       });
       return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
-        import_react_native39.Animated.View,
+        import_react_native40.Animated.View,
         {
           style: {
             width: 8,
@@ -5024,7 +5125,7 @@ function PreviewCollaborateSection({
         accessibilityLabel: "Submit merge request",
         disabled: submittingMr,
         onPress: () => {
-          import_react_native40.Alert.alert(
+          import_react_native41.Alert.alert(
             "Submit Merge Request",
             "Are you sure you want to submit your changes to the original app?",
             [
@@ -5050,7 +5151,7 @@ function PreviewCollaborateSection({
           marginBottom: theme.spacing.sm
         },
         left: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
-          import_react_native40.View,
+          import_react_native41.View,
           {
             style: {
               width: 40,
@@ -5061,7 +5162,7 @@ function PreviewCollaborateSection({
               backgroundColor: withAlpha("#03DAC6", 0.1),
               marginRight: theme.spacing.lg
             },
-            children: submittingMr ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_react_native40.ActivityIndicator, { color: "#03DAC6", size: "small" }) : /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(MergeIcon, { width: 20, height: 20, color: "#03DAC6" })
+            children: submittingMr ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_react_native41.ActivityIndicator, { color: "#03DAC6", size: "small" }) : /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(MergeIcon, { width: 20, height: 20, color: "#03DAC6" })
           }
         ),
         title: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Text, { style: { color: theme.colors.text, fontSize: 16, lineHeight: 20, fontWeight: theme.typography.fontWeight.semibold }, children: "Submit your new changes" }),
@@ -5099,7 +5200,7 @@ function PreviewCollaborateSection({
           children: "History"
         }
       ),
-      outgoingMergeRequests.map((mr) => /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_react_native40.View, { style: { marginBottom: theme.spacing.sm }, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(MergeRequestStatusCard, { mergeRequest: toMergeRequestSummary(mr) }) }, mr.id))
+      outgoingMergeRequests.map((mr) => /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_react_native41.View, { style: { marginBottom: theme.spacing.sm }, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(MergeRequestStatusCard, { mergeRequest: toMergeRequestSummary(mr) }) }, mr.id))
     ] }) : null
   ] });
 }
@@ -5423,9 +5524,9 @@ function PreviewPanel({
   });
   const header = /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(PreviewPanelHeader, { isOwner, onClose, onNavigateHome, onGoToChat });
   if (loading || !app) {
-    return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(PreviewPage, { header, children: /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_react_native41.View, { style: { flex: 1, justifyContent: "center", alignItems: "center", padding: 24 }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_react_native41.ActivityIndicator, {}),
-      /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_react_native41.View, { style: { height: 12 } }),
+    return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(PreviewPage, { header, children: /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_react_native42.View, { style: { flex: 1, justifyContent: "center", alignItems: "center", padding: 24 }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_react_native42.ActivityIndicator, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_react_native42.View, { style: { height: 12 } }),
       /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Text, { variant: "bodyMuted", children: "Loading app\u2026" })
     ] }) });
   }
@@ -5482,20 +5583,20 @@ function PreviewPanel({
 
 // src/studio/ui/ChatPanel.tsx
 var React36 = __toESM(require("react"));
-var import_react_native49 = require("react-native");
+var import_react_native50 = require("react-native");
 
 // src/components/chat/ChatPage.tsx
 var React34 = __toESM(require("react"));
-var import_react_native45 = require("react-native");
+var import_react_native46 = require("react-native");
 var import_react_native_safe_area_context4 = require("react-native-safe-area-context");
 
 // src/components/chat/ChatMessageList.tsx
 var React33 = __toESM(require("react"));
-var import_react_native44 = require("react-native");
+var import_react_native45 = require("react-native");
 var import_bottom_sheet5 = require("@gorhom/bottom-sheet");
 
 // src/components/chat/ChatMessageBubble.tsx
-var import_react_native42 = require("react-native");
+var import_react_native43 = require("react-native");
 var import_lucide_react_native10 = require("lucide-react-native");
 var import_jsx_runtime44 = require("react/jsx-runtime");
 function ChatMessageBubble({ message, renderContent, style }) {
@@ -5511,7 +5612,7 @@ function ChatMessageBubble({ message, renderContent, style }) {
   const bubbleVariant = isHuman ? "surface" : "surfaceRaised";
   const cornerStyle = isHuman ? { borderTopRightRadius: 0 } : { borderTopLeftRadius: 0 };
   const bodyColor = metaStatus === "success" ? theme.colors.success : metaStatus === "error" ? theme.colors.danger : void 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_react_native42.View, { style: [align, style], children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_react_native43.View, { style: [align, style], children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
     Surface,
     {
       variant: bubbleVariant,
@@ -5526,10 +5627,10 @@ function ChatMessageBubble({ message, renderContent, style }) {
         },
         cornerStyle
       ],
-      children: /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_react_native42.View, { style: { flexDirection: "row", alignItems: "center" }, children: [
+      children: /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_react_native43.View, { style: { flexDirection: "row", alignItems: "center" }, children: [
         isMergeCompleted ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_lucide_react_native10.CheckCheck, { size: 16, color: theme.colors.success, style: { marginRight: theme.spacing.sm } }) : null,
         isMergeApproved ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_lucide_react_native10.GitMerge, { size: 16, color: theme.colors.text, style: { marginRight: theme.spacing.sm } }) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_react_native42.View, { style: { flexShrink: 1, minWidth: 0 }, children: renderContent ? renderContent(message) : /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(MarkdownText, { markdown: message.content, variant: "chat", bodyColor }) })
+        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_react_native43.View, { style: { flexShrink: 1, minWidth: 0 }, children: renderContent ? renderContent(message) : /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(MarkdownText, { markdown: message.content, variant: "chat", bodyColor }) })
       ] })
     }
   ) });
@@ -5537,23 +5638,23 @@ function ChatMessageBubble({ message, renderContent, style }) {
 
 // src/components/chat/TypingIndicator.tsx
 var React32 = __toESM(require("react"));
-var import_react_native43 = require("react-native");
+var import_react_native44 = require("react-native");
 var import_jsx_runtime45 = require("react/jsx-runtime");
 function TypingIndicator({ style }) {
   const theme = useTheme();
   const dotColor = theme.colors.textSubtle;
   const anims = React32.useMemo(
-    () => [new import_react_native43.Animated.Value(0.3), new import_react_native43.Animated.Value(0.3), new import_react_native43.Animated.Value(0.3)],
+    () => [new import_react_native44.Animated.Value(0.3), new import_react_native44.Animated.Value(0.3), new import_react_native44.Animated.Value(0.3)],
     []
   );
   React32.useEffect(() => {
     const loops = [];
     anims.forEach((a, idx) => {
-      const seq = import_react_native43.Animated.sequence([
-        import_react_native43.Animated.timing(a, { toValue: 1, duration: 420, useNativeDriver: true, delay: idx * 140 }),
-        import_react_native43.Animated.timing(a, { toValue: 0.3, duration: 420, useNativeDriver: true })
+      const seq = import_react_native44.Animated.sequence([
+        import_react_native44.Animated.timing(a, { toValue: 1, duration: 420, useNativeDriver: true, delay: idx * 140 }),
+        import_react_native44.Animated.timing(a, { toValue: 0.3, duration: 420, useNativeDriver: true })
       ]);
-      const loop = import_react_native43.Animated.loop(seq);
+      const loop = import_react_native44.Animated.loop(seq);
       loops.push(loop);
       loop.start();
     });
@@ -5561,8 +5662,8 @@ function TypingIndicator({ style }) {
       loops.forEach((l) => l.stop());
     };
   }, [anims]);
-  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_react_native43.View, { style: [{ flexDirection: "row", alignItems: "center" }, style], children: anims.map((a, i) => /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
-    import_react_native43.Animated.View,
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_react_native44.View, { style: [{ flexDirection: "row", alignItems: "center" }, style], children: anims.map((a, i) => /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+    import_react_native44.Animated.View,
     {
       style: {
         width: 8,
@@ -5571,7 +5672,7 @@ function TypingIndicator({ style }) {
         marginHorizontal: 3,
         backgroundColor: dotColor,
         opacity: a,
-        transform: [{ translateY: import_react_native43.Animated.multiply(import_react_native43.Animated.subtract(a, 0.3), 2) }]
+        transform: [{ translateY: import_react_native44.Animated.multiply(import_react_native44.Animated.subtract(a, 0.3), 2) }]
       }
     },
     i
@@ -5595,19 +5696,19 @@ var ChatMessageList = React33.forwardRef(
     const nearBottomRef = React33.useRef(true);
     const initialScrollDoneRef = React33.useRef(false);
     const lastMessageIdRef = React33.useRef(null);
+    const data = React33.useMemo(() => {
+      return [...messages].reverse();
+    }, [messages]);
     const scrollToBottom = React33.useCallback((options) => {
       var _a;
       const animated = (options == null ? void 0 : options.animated) ?? true;
-      (_a = listRef.current) == null ? void 0 : _a.scrollToEnd({ animated });
+      (_a = listRef.current) == null ? void 0 : _a.scrollToOffset({ offset: 0, animated });
     }, []);
     React33.useImperativeHandle(ref, () => ({ scrollToBottom }), [scrollToBottom]);
     const handleScroll = React33.useCallback(
       (e) => {
         const { contentOffset, contentSize, layoutMeasurement } = e.nativeEvent;
-        const distanceFromBottom = Math.max(
-          contentSize.height - Math.max(bottomInset, 0) - (contentOffset.y + layoutMeasurement.height),
-          0
-        );
+        const distanceFromBottom = Math.max(contentOffset.y - Math.max(bottomInset, 0), 0);
         const isNear = distanceFromBottom <= nearBottomThreshold;
         if (nearBottomRef.current !== isNear) {
           nearBottomRef.current = isNear;
@@ -5616,15 +5717,6 @@ var ChatMessageList = React33.forwardRef(
       },
       [bottomInset, nearBottomThreshold, onNearBottomChange]
     );
-    React33.useEffect(() => {
-      var _a;
-      if (initialScrollDoneRef.current) return;
-      if (messages.length === 0) return;
-      initialScrollDoneRef.current = true;
-      lastMessageIdRef.current = ((_a = messages[messages.length - 1]) == null ? void 0 : _a.id) ?? null;
-      const id = requestAnimationFrame(() => scrollToBottom({ animated: false }));
-      return () => cancelAnimationFrame(id);
-    }, [messages, scrollToBottom]);
     React33.useEffect(() => {
       if (!initialScrollDoneRef.current) return;
       const lastId = messages.length > 0 ? messages[messages.length - 1].id : null;
@@ -5642,35 +5734,37 @@ var ChatMessageList = React33.forwardRef(
       }
       return void 0;
     }, [showTypingIndicator, scrollToBottom]);
-    React33.useEffect(() => {
-      if (!initialScrollDoneRef.current) return;
-      if (!nearBottomRef.current) return;
-      const id = requestAnimationFrame(() => scrollToBottom({ animated: false }));
-      return () => cancelAnimationFrame(id);
-    }, [bottomInset, scrollToBottom]);
     return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
       import_bottom_sheet5.BottomSheetFlatList,
       {
         ref: listRef,
-        data: messages,
+        inverted: true,
+        data,
         keyExtractor: (m) => m.id,
-        keyboardDismissMode: import_react_native44.Platform.OS === "ios" ? "interactive" : "on-drag",
         keyboardShouldPersistTaps: "handled",
         onScroll: handleScroll,
         scrollEventThrottle: 16,
         showsVerticalScrollIndicator: false,
+        onContentSizeChange: () => {
+          if (initialScrollDoneRef.current) return;
+          initialScrollDoneRef.current = true;
+          lastMessageIdRef.current = messages.length > 0 ? messages[messages.length - 1].id : null;
+          nearBottomRef.current = true;
+          onNearBottomChange == null ? void 0 : onNearBottomChange(true);
+          requestAnimationFrame(() => scrollToBottom({ animated: false }));
+        },
         contentContainerStyle: [
           {
             paddingHorizontal: theme.spacing.lg,
-            paddingTop: theme.spacing.sm,
-            paddingBottom: theme.spacing.sm
+            paddingVertical: theme.spacing.sm
           },
           contentStyle
         ],
-        renderItem: ({ item, index }) => /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_react_native44.View, { style: { marginTop: index === 0 ? 0 : theme.spacing.sm }, children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(ChatMessageBubble, { message: item, renderContent: renderMessageContent }) }),
-        ListFooterComponent: /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(import_react_native44.View, { children: [
-          showTypingIndicator ? /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_react_native44.View, { style: { marginTop: theme.spacing.sm, alignSelf: "flex-start", paddingHorizontal: theme.spacing.lg }, children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(TypingIndicator, {}) }) : null,
-          bottomInset > 0 ? /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_react_native44.View, { style: { height: bottomInset } }) : null
+        ItemSeparatorComponent: () => /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_react_native45.View, { style: { height: theme.spacing.sm } }),
+        renderItem: ({ item }) => /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(ChatMessageBubble, { message: item, renderContent: renderMessageContent }),
+        ListHeaderComponent: /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(import_react_native45.View, { children: [
+          showTypingIndicator ? /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_react_native45.View, { style: { marginTop: theme.spacing.sm, alignSelf: "flex-start", paddingHorizontal: theme.spacing.lg }, children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(TypingIndicator, {}) }) : null,
+          bottomInset > 0 ? /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_react_native45.View, { style: { height: bottomInset } }) : null
         ] })
       }
     );
@@ -5689,6 +5783,7 @@ function ChatPage({
   composer,
   overlay,
   style,
+  composerHorizontalPadding,
   onNearBottomChange,
   listRef
 }) {
@@ -5697,15 +5792,15 @@ function ChatPage({
   const [composerHeight, setComposerHeight] = React34.useState(0);
   const [keyboardVisible, setKeyboardVisible] = React34.useState(false);
   React34.useEffect(() => {
-    if (import_react_native45.Platform.OS !== "ios") return;
-    const show = import_react_native45.Keyboard.addListener("keyboardWillShow", () => setKeyboardVisible(true));
-    const hide = import_react_native45.Keyboard.addListener("keyboardWillHide", () => setKeyboardVisible(false));
+    if (import_react_native46.Platform.OS !== "ios") return;
+    const show = import_react_native46.Keyboard.addListener("keyboardWillShow", () => setKeyboardVisible(true));
+    const hide = import_react_native46.Keyboard.addListener("keyboardWillHide", () => setKeyboardVisible(false));
     return () => {
       show.remove();
       hide.remove();
     };
   }, []);
-  const footerBottomPadding = import_react_native45.Platform.OS === "ios" ? keyboardVisible ? 0 : insets.bottom : insets.bottom + 10;
+  const footerBottomPadding = import_react_native46.Platform.OS === "ios" ? keyboardVisible ? 0 : insets.bottom : insets.bottom + 10;
   const overlayBottom = composerHeight + footerBottomPadding + theme.spacing.lg;
   const bottomInset = composerHeight + footerBottomPadding + theme.spacing.xl;
   const resolvedOverlay = React34.useMemo(() => {
@@ -5717,12 +5812,12 @@ function ChatPage({
       style: [prevStyle, { bottom: overlayBottom }]
     });
   }, [overlay, overlayBottom]);
-  return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(import_react_native45.View, { style: [{ flex: 1 }, style], children: [
-    header ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_react_native45.View, { children: header }) : null,
-    topBanner ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_react_native45.View, { style: { paddingHorizontal: theme.spacing.lg, paddingTop: theme.spacing.sm }, children: topBanner }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(import_react_native45.View, { style: { flex: 1 }, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(import_react_native46.View, { style: [{ flex: 1 }, style], children: [
+    header ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_react_native46.View, { children: header }) : null,
+    topBanner ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_react_native46.View, { style: { paddingHorizontal: theme.spacing.lg, paddingTop: theme.spacing.sm }, children: topBanner }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(import_react_native46.View, { style: { flex: 1 }, children: [
       /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
-        import_react_native45.View,
+        import_react_native46.View,
         {
           style: { flex: 1 },
           children: [
@@ -5742,14 +5837,14 @@ function ChatPage({
         }
       ),
       /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
-        import_react_native45.View,
+        import_react_native46.View,
         {
           style: {
             position: "absolute",
             left: 0,
             right: 0,
             bottom: 0,
-            paddingHorizontal: theme.spacing.lg,
+            paddingHorizontal: composerHorizontalPadding ?? theme.spacing.md,
             paddingTop: theme.spacing.sm,
             paddingBottom: footerBottomPadding
           },
@@ -5769,7 +5864,7 @@ function ChatPage({
 
 // src/components/chat/ScrollToBottomButton.tsx
 var React35 = __toESM(require("react"));
-var import_react_native46 = require("react-native");
+var import_react_native47 = require("react-native");
 var import_react_native_reanimated2 = __toESM(require("react-native-reanimated"));
 var import_jsx_runtime48 = require("react/jsx-runtime");
 function ScrollToBottomButton({ visible, onPress, children, style }) {
@@ -5800,7 +5895,7 @@ function ScrollToBottomButton({ visible, onPress, children, style }) {
         animStyle
       ],
       children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
-        import_react_native46.View,
+        import_react_native47.View,
         {
           style: {
             width: 44,
@@ -5819,7 +5914,7 @@ function ScrollToBottomButton({ visible, onPress, children, style }) {
             opacity: pressed ? 0.85 : 1
           },
           children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
-            import_react_native46.Pressable,
+            import_react_native47.Pressable,
             {
               onPress,
               onPressIn: () => setPressed(true),
@@ -5836,10 +5931,10 @@ function ScrollToBottomButton({ visible, onPress, children, style }) {
 }
 
 // src/components/chat/ChatHeader.tsx
-var import_react_native47 = require("react-native");
+var import_react_native48 = require("react-native");
 var import_jsx_runtime49 = require("react/jsx-runtime");
 function ChatHeader({ left, right, center, style }) {
-  const flattenedStyle = import_react_native47.StyleSheet.flatten([
+  const flattenedStyle = import_react_native48.StyleSheet.flatten([
     {
       paddingTop: 0
     },
@@ -5857,7 +5952,7 @@ function ChatHeader({ left, right, center, style }) {
 }
 
 // src/components/chat/ForkNoticeBanner.tsx
-var import_react_native48 = require("react-native");
+var import_react_native49 = require("react-native");
 var import_jsx_runtime50 = require("react/jsx-runtime");
 function ForkNoticeBanner({ isOwner = true, title, description, style }) {
   const theme = useTheme();
@@ -5878,7 +5973,7 @@ function ForkNoticeBanner({ isOwner = true, title, description, style }) {
         },
         style
       ],
-      children: /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(import_react_native48.View, { style: { minWidth: 0 }, children: [
+      children: /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(import_react_native49.View, { style: { minWidth: 0 }, children: [
         /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
           Text,
           {
@@ -5954,11 +6049,11 @@ function ChatPanel({
   const header = /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
     ChatHeader,
     {
-      left: /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(import_react_native49.View, { style: { flexDirection: "row", alignItems: "center" }, children: [
+      left: /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(import_react_native50.View, { style: { flexDirection: "row", alignItems: "center" }, children: [
         /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(StudioSheetHeaderIconButton, { onPress: onBack, accessibilityLabel: "Back", style: { marginRight: 8 }, children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(IconBack, { size: 20, colorToken: "floatingContent" }) }),
         onNavigateHome ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(StudioSheetHeaderIconButton, { onPress: onNavigateHome, accessibilityLabel: "Home", children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(IconHome, { size: 20, colorToken: "floatingContent" }) }) : null
       ] }),
-      right: /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(import_react_native49.View, { style: { flexDirection: "row", alignItems: "center" }, children: [
+      right: /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(import_react_native50.View, { style: { flexDirection: "row", alignItems: "center" }, children: [
         onStartDraw ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(StudioSheetHeaderIconButton, { onPress: onStartDraw, accessibilityLabel: "Draw", intent: "danger", style: { marginRight: 8 }, children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(IconDraw, { size: 20, colorToken: "onDanger" }) }) : null,
         /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(StudioSheetHeaderIconButton, { onPress: onClose, accessibilityLabel: "Close", children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(IconClose, { size: 20, colorToken: "floatingContent" }) })
       ] }),
@@ -5974,12 +6069,12 @@ function ChatPanel({
   ) : null;
   const showMessagesLoading = Boolean(loading) && messages.length === 0 || forking;
   if (showMessagesLoading) {
-    return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(import_react_native49.View, { style: { flex: 1 }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_react_native49.View, { children: header }),
-      topBanner ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_react_native49.View, { style: { paddingHorizontal: 16, paddingTop: 8 }, children: topBanner }) : null,
-      /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(import_react_native49.View, { style: { flex: 1, alignItems: "center", justifyContent: "center", paddingHorizontal: 24, paddingVertical: 12 }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_react_native49.ActivityIndicator, {}),
-        /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_react_native49.View, { style: { height: 12 } }),
+    return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(import_react_native50.View, { style: { flex: 1 }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_react_native50.View, { children: header }),
+      topBanner ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_react_native50.View, { style: { paddingHorizontal: 16, paddingTop: 8 }, children: topBanner }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(import_react_native50.View, { style: { flex: 1, alignItems: "center", justifyContent: "center", paddingHorizontal: 24, paddingVertical: 12 }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_react_native50.ActivityIndicator, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_react_native50.View, { style: { height: 12 } }),
         /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Text, { variant: "bodyMuted", children: forking ? "Creating your copy\u2026" : "Loading messages\u2026" })
       ] })
     ] });
@@ -5991,6 +6086,7 @@ function ChatPanel({
       messages,
       showTypingIndicator,
       topBanner,
+      composerHorizontalPadding: 0,
       listRef,
       onNearBottomChange: setNearBottom,
       overlay: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
@@ -6021,10 +6117,10 @@ function ChatPanel({
 
 // src/components/dialogs/ConfirmMergeRequestDialog.tsx
 var React37 = __toESM(require("react"));
-var import_react_native51 = require("react-native");
+var import_react_native52 = require("react-native");
 
 // src/components/primitives/Modal.tsx
-var import_react_native50 = require("react-native");
+var import_react_native51 = require("react-native");
 var import_jsx_runtime52 = require("react/jsx-runtime");
 function Modal({
   visible,
@@ -6035,15 +6131,15 @@ function Modal({
 }) {
   const theme = useTheme();
   return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
-    import_react_native50.Modal,
+    import_react_native51.Modal,
     {
       visible,
       transparent: true,
       animationType: "fade",
       onRequestClose,
-      children: /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(import_react_native50.View, { style: { flex: 1, backgroundColor: theme.colors.backdrop, justifyContent: "center", padding: theme.spacing.lg }, children: [
+      children: /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(import_react_native51.View, { style: { flex: 1, backgroundColor: theme.colors.backdrop, justifyContent: "center", padding: theme.spacing.lg }, children: [
         /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
-          import_react_native50.Pressable,
+          import_react_native51.Pressable,
           {
             accessibilityRole: "button",
             onPress: dismissOnBackdropPress ? onRequestClose : void 0,
@@ -6098,7 +6194,7 @@ function ConfirmMergeRequestDialog({
         backgroundColor: theme.colors.background
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_react_native51.View, { children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_react_native52.View, { children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
           Text,
           {
             style: {
@@ -6110,9 +6206,9 @@ function ConfirmMergeRequestDialog({
             children: "Are you sure you want to approve this merge request?"
           }
         ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(import_react_native51.View, { style: { marginTop: 16 }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(import_react_native52.View, { style: { marginTop: 16 }, children: [
           /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
-            import_react_native51.View,
+            import_react_native52.View,
             {
               style: [
                 fullWidthButtonBase,
@@ -6122,7 +6218,7 @@ function ConfirmMergeRequestDialog({
                 }
               ],
               children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
-                import_react_native51.Pressable,
+                import_react_native52.Pressable,
                 {
                   accessibilityRole: "button",
                   accessibilityLabel: "Approve Merge",
@@ -6134,9 +6230,9 @@ function ConfirmMergeRequestDialog({
               )
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_react_native51.View, { style: { height: 8 } }),
+          /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_react_native52.View, { style: { height: 8 } }),
           /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
-            import_react_native51.View,
+            import_react_native52.View,
             {
               style: [
                 fullWidthButtonBase,
@@ -6148,7 +6244,7 @@ function ConfirmMergeRequestDialog({
                 }
               ],
               children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
-                import_react_native51.Pressable,
+                import_react_native52.Pressable,
                 {
                   accessibilityRole: "button",
                   accessibilityLabel: isBuilding ? "Preparing\u2026" : "Test edits first",
@@ -6160,9 +6256,9 @@ function ConfirmMergeRequestDialog({
               )
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_react_native51.View, { style: { height: 8 } }),
+          /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_react_native52.View, { style: { height: 8 } }),
           /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
-            import_react_native51.View,
+            import_react_native52.View,
             {
               style: [
                 fullWidthButtonBase,
@@ -6173,7 +6269,7 @@ function ConfirmMergeRequestDialog({
                 }
               ],
               children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
-                import_react_native51.Pressable,
+                import_react_native52.Pressable,
                 {
                   accessibilityRole: "button",
                   accessibilityLabel: "Cancel",
@@ -6223,6 +6319,92 @@ function ConfirmMergeFlow({
   );
 }
 
+// src/studio/hooks/useOptimisticChatMessages.ts
+var React38 = __toESM(require("react"));
+function makeOptimisticId() {
+  return `optimistic:${Date.now().toString(36)}:${Math.random().toString(36).slice(2, 10)}`;
+}
+function toEpochMs(createdAt) {
+  if (createdAt == null) return 0;
+  if (typeof createdAt === "number") return createdAt;
+  if (createdAt instanceof Date) return createdAt.getTime();
+  const t = Date.parse(String(createdAt));
+  return Number.isFinite(t) ? t : 0;
+}
+function isOptimisticResolvedByServer(chatMessages, o) {
+  if (o.failed) return false;
+  const normalize = (s) => s.trim();
+  let startIndex = -1;
+  if (o.baseServerLastId) {
+    startIndex = chatMessages.findIndex((m) => m.id === o.baseServerLastId);
+  }
+  const candidates = startIndex >= 0 ? chatMessages.slice(startIndex + 1) : chatMessages;
+  const target = normalize(o.content);
+  for (const m of candidates) {
+    if (m.author !== "human") continue;
+    if (normalize(m.content) !== target) continue;
+    const serverMs = toEpochMs(m.createdAt);
+    const optimisticMs = Date.parse(o.createdAtIso);
+    if (Number.isFinite(optimisticMs) && optimisticMs > 0 && serverMs > 0) {
+      if (serverMs + 12e4 < optimisticMs) continue;
+    }
+    return true;
+  }
+  return false;
+}
+function useOptimisticChatMessages({
+  threadId,
+  shouldForkOnEdit,
+  chatMessages,
+  onSendChat
+}) {
+  const [optimisticChat, setOptimisticChat] = React38.useState([]);
+  React38.useEffect(() => {
+    setOptimisticChat([]);
+  }, [threadId]);
+  const messages = React38.useMemo(() => {
+    if (!optimisticChat || optimisticChat.length === 0) return chatMessages;
+    const unresolved = optimisticChat.filter((o) => !isOptimisticResolvedByServer(chatMessages, o));
+    if (unresolved.length === 0) return chatMessages;
+    const optimisticAsChat = unresolved.map((o) => ({
+      id: o.id,
+      author: "human",
+      content: o.content,
+      createdAt: o.createdAtIso,
+      kind: "optimistic",
+      meta: o.failed ? { kind: "optimistic", event: "send.failed", status: "error" } : { kind: "optimistic", event: "send.pending", status: "info" }
+    }));
+    const merged = [...chatMessages, ...optimisticAsChat];
+    merged.sort((a, b) => String(a.createdAt).localeCompare(String(b.createdAt)));
+    return merged;
+  }, [chatMessages, optimisticChat]);
+  React38.useEffect(() => {
+    if (optimisticChat.length === 0) return;
+    setOptimisticChat((prev) => {
+      if (prev.length === 0) return prev;
+      const next = prev.filter((o) => !isOptimisticResolvedByServer(chatMessages, o) || o.failed);
+      return next.length === prev.length ? prev : next;
+    });
+  }, [chatMessages, optimisticChat.length]);
+  const onSend = React38.useCallback(
+    async (text, attachments) => {
+      if (shouldForkOnEdit) {
+        await onSendChat(text, attachments);
+        return;
+      }
+      const createdAtIso = (/* @__PURE__ */ new Date()).toISOString();
+      const baseServerLastId = chatMessages.length > 0 ? chatMessages[chatMessages.length - 1].id : null;
+      const id = makeOptimisticId();
+      setOptimisticChat((prev) => [...prev, { id, content: text, createdAtIso, baseServerLastId, failed: false }]);
+      void Promise.resolve(onSendChat(text, attachments)).catch(() => {
+        setOptimisticChat((prev) => prev.map((m) => m.id === id ? { ...m, failed: true } : m));
+      });
+    },
+    [chatMessages, onSendChat, shouldForkOnEdit]
+  );
+  return { messages, onSend };
+}
+
 // src/studio/ui/StudioOverlay.tsx
 var import_jsx_runtime55 = require("react/jsx-runtime");
 function StudioOverlay({
@@ -6254,33 +6436,40 @@ function StudioOverlay({
   onNavigateHome
 }) {
   const theme = useTheme();
-  const { width } = (0, import_react_native52.useWindowDimensions)();
-  const [sheetOpen, setSheetOpen] = React38.useState(false);
-  const [activePage, setActivePage] = React38.useState("preview");
-  const [drawing, setDrawing] = React38.useState(false);
-  const [chatAttachments, setChatAttachments] = React38.useState([]);
-  const [commentsAppId, setCommentsAppId] = React38.useState(null);
-  const [commentsCount, setCommentsCount] = React38.useState(null);
-  const [confirmMrId, setConfirmMrId] = React38.useState(null);
-  const confirmMr = React38.useMemo(
+  const { width } = (0, import_react_native53.useWindowDimensions)();
+  const [sheetOpen, setSheetOpen] = React39.useState(false);
+  const [activePage, setActivePage] = React39.useState("preview");
+  const [drawing, setDrawing] = React39.useState(false);
+  const [chatAttachments, setChatAttachments] = React39.useState([]);
+  const [commentsAppId, setCommentsAppId] = React39.useState(null);
+  const [commentsCount, setCommentsCount] = React39.useState(null);
+  const threadId = (app == null ? void 0 : app.threadId) ?? null;
+  const optimistic = useOptimisticChatMessages({
+    threadId,
+    shouldForkOnEdit,
+    chatMessages,
+    onSendChat
+  });
+  const [confirmMrId, setConfirmMrId] = React39.useState(null);
+  const confirmMr = React39.useMemo(
     () => confirmMrId ? incomingMergeRequests.find((m) => m.id === confirmMrId) ?? null : null,
     [confirmMrId, incomingMergeRequests]
   );
-  const handleSheetOpenChange = React38.useCallback((open) => {
+  const handleSheetOpenChange = React39.useCallback((open) => {
     setSheetOpen(open);
-    if (!open) import_react_native52.Keyboard.dismiss();
+    if (!open) import_react_native53.Keyboard.dismiss();
   }, []);
-  const closeSheet = React38.useCallback(() => {
+  const closeSheet = React39.useCallback(() => {
     handleSheetOpenChange(false);
   }, [handleSheetOpenChange]);
-  const openSheet = React38.useCallback(() => setSheetOpen(true), []);
-  const goToChat = React38.useCallback(() => {
+  const openSheet = React39.useCallback(() => setSheetOpen(true), []);
+  const goToChat = React39.useCallback(() => {
     setActivePage("chat");
     openSheet();
   }, [openSheet]);
-  const backToPreview = React38.useCallback(() => {
-    if (import_react_native52.Platform.OS !== "ios") {
-      import_react_native52.Keyboard.dismiss();
+  const backToPreview = React39.useCallback(() => {
+    if (import_react_native53.Platform.OS !== "ios") {
+      import_react_native53.Keyboard.dismiss();
       setActivePage("preview");
       return;
     }
@@ -6292,15 +6481,15 @@ function StudioOverlay({
       clearTimeout(t);
       setActivePage("preview");
     };
-    const sub = import_react_native52.Keyboard.addListener("keyboardDidHide", finalize);
+    const sub = import_react_native53.Keyboard.addListener("keyboardDidHide", finalize);
     const t = setTimeout(finalize, 350);
-    import_react_native52.Keyboard.dismiss();
+    import_react_native53.Keyboard.dismiss();
   }, []);
-  const startDraw = React38.useCallback(() => {
+  const startDraw = React39.useCallback(() => {
     setDrawing(true);
     closeSheet();
   }, [closeSheet]);
-  const handleDrawCapture = React38.useCallback(
+  const handleDrawCapture = React39.useCallback(
     (dataUrl) => {
       setChatAttachments((prev) => [...prev, dataUrl]);
       setDrawing(false);
@@ -6309,7 +6498,7 @@ function StudioOverlay({
     },
     [openSheet]
   );
-  const toggleSheet = React38.useCallback(async () => {
+  const toggleSheet = React39.useCallback(async () => {
     if (!sheetOpen) {
       const shouldExitTest = Boolean(testingMrId) || isTesting;
       if (shouldExitTest) {
@@ -6321,7 +6510,7 @@ function StudioOverlay({
       closeSheet();
     }
   }, [closeSheet, isTesting, onRestoreBase, sheetOpen, testingMrId]);
-  const handleTestMr = React38.useCallback(
+  const handleTestMr = React39.useCallback(
     async (mr) => {
       if (!onTestMr) return;
       await onTestMr(mr);
@@ -6365,7 +6554,7 @@ function StudioOverlay({
         chat: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
           ChatPanel,
           {
-            messages: chatMessages,
+            messages: optimistic.messages,
             showTypingIndicator: chatShowTypingIndicator,
             loading: chatLoading,
             sendDisabled: chatSendDisabled,
@@ -6380,7 +6569,7 @@ function StudioOverlay({
             onClose: closeSheet,
             onNavigateHome,
             onStartDraw: startDraw,
-            onSend: onSendChat
+            onSend: optimistic.onSend
           }
         )
       }
@@ -6393,7 +6582,7 @@ function StudioOverlay({
         badgeCount: incomingMergeRequests.length,
         onPress: toggleSheet,
         isLoading: (app == null ? void 0 : app.status) === "editing",
-        children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_react_native52.View, { style: { width: 28, height: 28, alignItems: "center", justifyContent: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(MergeIcon, { width: 24, height: 24, color: theme.colors.floatingContent }) })
+        children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_react_native53.View, { style: { width: 28, height: 28, alignItems: "center", justifyContent: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(MergeIcon, { width: 24, height: 24, color: theme.colors.floatingContent }) })
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
@@ -6439,16 +6628,16 @@ function ComergeStudio({
   onNavigateHome,
   style
 }) {
-  const [activeAppId, setActiveAppId] = React39.useState(appId);
-  const [runtimeAppId, setRuntimeAppId] = React39.useState(appId);
-  const [pendingRuntimeTargetAppId, setPendingRuntimeTargetAppId] = React39.useState(null);
-  const platform = React39.useMemo(() => import_react_native53.Platform.OS === "ios" ? "ios" : "android", []);
-  React39.useEffect(() => {
+  const [activeAppId, setActiveAppId] = React40.useState(appId);
+  const [runtimeAppId, setRuntimeAppId] = React40.useState(appId);
+  const [pendingRuntimeTargetAppId, setPendingRuntimeTargetAppId] = React40.useState(null);
+  const platform = React40.useMemo(() => import_react_native54.Platform.OS === "ios" ? "ios" : "android", []);
+  React40.useEffect(() => {
     setActiveAppId(appId);
     setRuntimeAppId(appId);
     setPendingRuntimeTargetAppId(null);
   }, [appId]);
-  const captureTargetRef = React39.useRef(null);
+  const captureTargetRef = React40.useRef(null);
   return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(StudioBootstrap, { apiKey, children: ({ userId }) => /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_bottom_sheet6.BottomSheetModalProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
     ComergeStudioInner,
     {
@@ -6484,11 +6673,11 @@ function ComergeStudioInner({
   const { app, loading: appLoading } = useApp(activeAppId);
   const { app: runtimeAppFromHook } = useApp(runtimeAppId, { enabled: runtimeAppId !== activeAppId });
   const runtimeApp = runtimeAppId === activeAppId ? app : runtimeAppFromHook;
-  const sawEditingOnPendingTargetRef = React39.useRef(false);
-  React39.useEffect(() => {
+  const sawEditingOnPendingTargetRef = React40.useRef(false);
+  React40.useEffect(() => {
     sawEditingOnPendingTargetRef.current = false;
   }, [pendingRuntimeTargetAppId]);
-  React39.useEffect(() => {
+  React40.useEffect(() => {
     if (!pendingRuntimeTargetAppId) return;
     if (activeAppId !== pendingRuntimeTargetAppId) return;
     if ((app == null ? void 0 : app.status) === "editing") {
@@ -6505,13 +6694,38 @@ function ComergeStudioInner({
     platform,
     canRequestLatest: (runtimeApp == null ? void 0 : runtimeApp.status) === "ready"
   });
+  const sawEditingOnActiveAppRef = React40.useRef(false);
+  const [showPostEditPreparing, setShowPostEditPreparing] = React40.useState(false);
+  React40.useEffect(() => {
+    sawEditingOnActiveAppRef.current = false;
+    setShowPostEditPreparing(false);
+  }, [activeAppId]);
+  React40.useEffect(() => {
+    if (!(app == null ? void 0 : app.id)) return;
+    if (app.status === "editing") {
+      sawEditingOnActiveAppRef.current = true;
+      setShowPostEditPreparing(false);
+      return;
+    }
+    if (app.status === "ready" && sawEditingOnActiveAppRef.current) {
+      setShowPostEditPreparing(true);
+      sawEditingOnActiveAppRef.current = false;
+    }
+  }, [app == null ? void 0 : app.id, app == null ? void 0 : app.status]);
+  React40.useEffect(() => {
+    if (!showPostEditPreparing) return;
+    const stillProcessingBaseBundle = bundle.loading && bundle.loadingMode === "base" && !bundle.isTesting;
+    if (!stillProcessingBaseBundle) {
+      setShowPostEditPreparing(false);
+    }
+  }, [showPostEditPreparing, bundle.loading, bundle.loadingMode, bundle.isTesting]);
   const threadId = (app == null ? void 0 : app.threadId) ?? "";
   const thread = useThreadMessages(threadId);
   const mergeRequests = useMergeRequests({ appId: activeAppId });
-  const hasOpenOutgoingMr = React39.useMemo(() => {
+  const hasOpenOutgoingMr = React40.useMemo(() => {
     return mergeRequests.lists.outgoing.some((mr) => mr.status === "open");
   }, [mergeRequests.lists.outgoing]);
-  const incomingReviewMrs = React39.useMemo(() => {
+  const incomingReviewMrs = React40.useMemo(() => {
     if (!userId) return mergeRequests.lists.incoming;
     return mergeRequests.lists.incoming.filter((mr) => mr.createdBy !== userId);
   }, [mergeRequests.lists.incoming, userId]);
@@ -6533,17 +6747,25 @@ function ComergeStudioInner({
     uploadAttachments: uploader.uploadBase64Images
   });
   const chatSendDisabled = hasNoOutcomeAfterLastHuman(thread.raw);
-  const [processingMrId, setProcessingMrId] = React39.useState(null);
-  const [testingMrId, setTestingMrId] = React39.useState(null);
-  const chatShowTypingIndicator = React39.useMemo(() => {
+  const [processingMrId, setProcessingMrId] = React40.useState(null);
+  const [testingMrId, setTestingMrId] = React40.useState(null);
+  const chatShowTypingIndicator = React40.useMemo(() => {
     var _a;
     if (!thread.raw || thread.raw.length === 0) return false;
     const last = thread.raw[thread.raw.length - 1];
     const payloadType = typeof ((_a = last.payload) == null ? void 0 : _a.type) === "string" ? String(last.payload.type) : void 0;
     return payloadType !== "outcome";
   }, [thread.raw]);
-  return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_react_native53.View, { style: [{ flex: 1 }, style], children: /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(import_react_native53.View, { ref: captureTargetRef, style: { flex: 1 }, collapsable: false, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(RuntimeRenderer, { appKey, bundlePath: bundle.bundlePath, renderToken: bundle.renderToken }),
+  return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_react_native54.View, { style: [{ flex: 1 }, style], children: /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(import_react_native54.View, { ref: captureTargetRef, style: { flex: 1 }, collapsable: false, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+      RuntimeRenderer,
+      {
+        appKey,
+        bundlePath: bundle.bundlePath,
+        forcePreparing: showPostEditPreparing,
+        renderToken: bundle.renderToken
+      }
+    ),
     /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
       StudioOverlay,
       {