@comergehq/studio 0.1.6 → 0.1.8

package/dist/index.js

@@ -36,8 +36,8 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/studio/ComergeStudio.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");
 var import_bottom_sheet6 = require("@gorhom/bottom-sheet");
 
 // src/studio/bootstrap/StudioBootstrap.tsx
@@ -393,7 +393,7 @@ function StudioBootstrap({ children, fallback, renderError, apiKey }) {
 }
 
 // src/studio/hooks/useApp.ts
-var React2 = __toESM(require("react"));
+var React3 = __toESM(require("react"));
 
 // src/core/services/http/index.ts
 var import_axios2 = __toESM(require("axios"));
@@ -692,13 +692,40 @@ var AppsRepositoryImpl = class extends BaseRepository {
 };
 var appsRepository = new AppsRepositoryImpl(appsRemoteDataSource);
 
+// src/studio/hooks/useForegroundSignal.ts
+var React2 = __toESM(require("react"));
+var import_react_native4 = require("react-native");
+function useForegroundSignal(enabled = true) {
+  const [signal, setSignal] = React2.useState(0);
+  const lastStateRef = React2.useRef(import_react_native4.AppState.currentState);
+  React2.useEffect(() => {
+    if (!enabled) return;
+    const sub = import_react_native4.AppState.addEventListener("change", (nextState) => {
+      var _a, _b;
+      const prevState = lastStateRef.current;
+      lastStateRef.current = nextState;
+      const didResume = (prevState === "background" || prevState === "inactive") && nextState === "active";
+      if (!didResume) return;
+      try {
+        const supabase = getSupabaseClient();
+        (_b = (_a = supabase == null ? void 0 : supabase.realtime) == null ? void 0 : _a.connect) == null ? void 0 : _b.call(_a);
+      } catch {
+      }
+      setSignal((s) => s + 1);
+    });
+    return () => sub.remove();
+  }, [enabled]);
+  return signal;
+}
+
 // src/studio/hooks/useApp.ts
 function useApp(appId, options) {
   const enabled = (options == null ? void 0 : options.enabled) ?? true;
-  const [app, setApp] = React2.useState(null);
-  const [loading, setLoading] = React2.useState(false);
-  const [error, setError] = React2.useState(null);
-  const mergeApp = React2.useCallback((prev, next) => {
+  const [app, setApp] = React3.useState(null);
+  const [loading, setLoading] = React3.useState(false);
+  const [error, setError] = React3.useState(null);
+  const foregroundSignal = useForegroundSignal(enabled && Boolean(appId));
+  const mergeApp = React3.useCallback((prev, next) => {
     const merged = {
       ...prev ?? {},
       ...next,
@@ -707,7 +734,7 @@ function useApp(appId, options) {
     };
     return merged;
   }, []);
-  const fetchOnce = React2.useCallback(async () => {
+  const fetchOnce = React3.useCallback(async () => {
     if (!enabled) return;
     if (!appId) return;
     setLoading(true);
@@ -722,34 +749,37 @@ function useApp(appId, options) {
       setLoading(false);
     }
   }, [appId, enabled]);
-  React2.useEffect(() => {
+  React3.useEffect(() => {
     if (!enabled) return;
     void fetchOnce();
   }, [enabled, fetchOnce]);
-  React2.useEffect(() => {
+  React3.useEffect(() => {
     if (!enabled) return;
     if (!appId) return;
     const unsubscribe = appsRepository.subscribeApp(appId, {
       onInsert: (a) => {
-        console.log("[useApp] onInsert", a);
         setApp((prev) => mergeApp(prev, a));
       },
       onUpdate: (a) => {
-        console.log("[useApp] onUpdate", a);
         setApp((prev) => mergeApp(prev, a));
       },
       onDelete: () => {
-        console.log("[useApp] onDelete");
         setApp(null);
       }
     });
     return unsubscribe;
-  }, [appId, enabled, mergeApp]);
+  }, [appId, enabled, mergeApp, foregroundSignal]);
+  React3.useEffect(() => {
+    if (!enabled) return;
+    if (!appId) return;
+    if (foregroundSignal <= 0) return;
+    void fetchOnce();
+  }, [appId, enabled, fetchOnce, foregroundSignal]);
   return { app, loading, error, refetch: fetchOnce };
 }
 
 // src/studio/hooks/useThreadMessages.ts
-var React3 = __toESM(require("react"));
+var React4 = __toESM(require("react"));
 
 // src/data/messages/remote.ts
 var MessagesRemoteDataSourceImpl = class extends BaseRemote {
@@ -850,44 +880,59 @@ function mapMessageToChatMessage(m) {
   };
 }
 function useThreadMessages(threadId) {
-  const [raw, setRaw] = React3.useState([]);
-  const [loading, setLoading] = React3.useState(false);
-  const [error, setError] = React3.useState(null);
-  const refetch = React3.useCallback(async () => {
+  const [raw, setRaw] = React4.useState([]);
+  const [loading, setLoading] = React4.useState(false);
+  const [error, setError] = React4.useState(null);
+  const activeRequestIdRef = React4.useRef(0);
+  const foregroundSignal = useForegroundSignal(Boolean(threadId));
+  const upsertSorted = React4.useCallback((prev, m) => {
+    const next = prev.some((x) => x.id === m.id) ? prev.map((x) => x.id === m.id ? m : x) : [...prev, m];
+    next.sort((a, b) => String(a.createdAt).localeCompare(String(b.createdAt)));
+    return next;
+  }, []);
+  const refetch = React4.useCallback(async () => {
     if (!threadId) {
       setRaw([]);
       return;
     }
+    const requestId = ++activeRequestIdRef.current;
     setLoading(true);
     setError(null);
     try {
       const list = await messagesRepository.list(threadId);
-      setRaw(list);
+      if (activeRequestIdRef.current !== requestId) return;
+      setRaw([...list].sort((a, b) => String(a.createdAt).localeCompare(String(b.createdAt))));
     } catch (e) {
+      if (activeRequestIdRef.current !== requestId) return;
       setError(e instanceof Error ? e : new Error(String(e)));
       setRaw([]);
     } finally {
-      setLoading(false);
+      if (activeRequestIdRef.current === requestId) setLoading(false);
     }
   }, [threadId]);
-  React3.useEffect(() => {
+  React4.useEffect(() => {
     void refetch();
   }, [refetch]);
-  React3.useEffect(() => {
+  React4.useEffect(() => {
     if (!threadId) return;
     const unsubscribe = messagesRepository.subscribeThread(threadId, {
-      onInsert: (m) => setRaw((prev) => [...prev, m]),
-      onUpdate: (m) => setRaw((prev) => prev.map((x) => x.id === m.id ? m : x)),
+      onInsert: (m) => setRaw((prev) => upsertSorted(prev, m)),
+      onUpdate: (m) => setRaw((prev) => upsertSorted(prev, m)),
       onDelete: (m) => setRaw((prev) => prev.filter((x) => x.id !== m.id))
     });
     return unsubscribe;
-  }, [threadId]);
-  const messages = React3.useMemo(() => raw.map(mapMessageToChatMessage), [raw]);
+  }, [threadId, upsertSorted, foregroundSignal]);
+  React4.useEffect(() => {
+    if (!threadId) return;
+    if (foregroundSignal <= 0) return;
+    void refetch();
+  }, [foregroundSignal, refetch, threadId]);
+  const messages = React4.useMemo(() => raw.map(mapMessageToChatMessage), [raw]);
   return { raw, messages, loading, error, refetch };
 }
 
 // src/studio/hooks/useBundleManager.ts
-var React4 = __toESM(require("react"));
+var React5 = __toESM(require("react"));
 var FileSystem = __toESM(require("expo-file-system/legacy"));
 
 // src/data/apps/bundles/remote.ts
@@ -1060,19 +1105,19 @@ function useBundleManager({
   platform,
   canRequestLatest = true
 }) {
-  const [bundlePath, setBundlePath] = React4.useState(null);
-  const [renderToken, setRenderToken] = React4.useState(0);
-  const [loading, setLoading] = React4.useState(false);
-  const [statusLabel, setStatusLabel] = React4.useState(null);
-  const [error, setError] = React4.useState(null);
-  const [isTesting, setIsTesting] = React4.useState(false);
-  const baseRef = React4.useRef(base);
+  const [bundlePath, setBundlePath] = React5.useState(null);
+  const [renderToken, setRenderToken] = React5.useState(0);
+  const [loading, setLoading] = React5.useState(false);
+  const [statusLabel, setStatusLabel] = React5.useState(null);
+  const [error, setError] = React5.useState(null);
+  const [isTesting, setIsTesting] = React5.useState(false);
+  const baseRef = React5.useRef(base);
   baseRef.current = base;
-  const baseOpIdRef = React4.useRef(0);
-  const testOpIdRef = React4.useRef(0);
-  const activeLoadModeRef = React4.useRef(null);
-  const canRequestLatestRef = React4.useRef(canRequestLatest);
-  React4.useEffect(() => {
+  const baseOpIdRef = React5.useRef(0);
+  const testOpIdRef = React5.useRef(0);
+  const activeLoadModeRef = React5.useRef(null);
+  const canRequestLatestRef = React5.useRef(canRequestLatest);
+  React5.useEffect(() => {
     canRequestLatestRef.current = canRequestLatest;
     if (!canRequestLatest) {
       baseOpIdRef.current += 1;
@@ -1083,11 +1128,11 @@ function useBundleManager({
       }
     }
   }, [canRequestLatest]);
-  const lastBaseBundlePathRef = React4.useRef(null);
-  const lastBaseFingerprintRef = React4.useRef(null);
-  const initialHydratedBaseFromDiskRef = React4.useRef(false);
-  const hasCompletedFirstNetworkBaseLoadRef = React4.useRef(false);
-  const hydrateBaseFromDisk = React4.useCallback(
+  const lastBaseBundlePathRef = React5.useRef(null);
+  const lastBaseFingerprintRef = React5.useRef(null);
+  const initialHydratedBaseFromDiskRef = React5.useRef(false);
+  const hasCompletedFirstNetworkBaseLoadRef = React5.useRef(false);
+  const hydrateBaseFromDisk = React5.useCallback(
     async (appId, reason) => {
       try {
         const dir = bundlesCacheDir();
@@ -1112,13 +1157,13 @@ function useBundleManager({
     },
     [platform]
   );
-  React4.useEffect(() => {
+  React5.useEffect(() => {
     if (!base.appId) return;
     initialHydratedBaseFromDiskRef.current = false;
     hasCompletedFirstNetworkBaseLoadRef.current = false;
     void hydrateBaseFromDisk(base.appId, "initial");
   }, [base.appId, platform, hydrateBaseFromDisk]);
-  const activateCachedBase = React4.useCallback(
+  const activateCachedBase = React5.useCallback(
     async (appId) => {
       setIsTesting(false);
       setStatusLabel(null);
@@ -1132,7 +1177,7 @@ function useBundleManager({
     },
     [hydrateBaseFromDisk]
   );
-  const load = React4.useCallback(async (src, mode) => {
+  const load = React5.useCallback(async (src, mode) => {
     if (!src.appId) return;
     const canRequestLatest2 = canRequestLatestRef.current;
     if (mode === "base" && !canRequestLatest2) {
@@ -1187,13 +1232,13 @@ function useBundleManager({
       if (activeLoadModeRef.current === mode) activeLoadModeRef.current = null;
     }
   }, [activateCachedBase, platform]);
-  const loadBase = React4.useCallback(async () => {
+  const loadBase = React5.useCallback(async () => {
     await load(baseRef.current, "base");
   }, [load]);
-  const loadTest = React4.useCallback(async (src) => {
+  const loadTest = React5.useCallback(async (src) => {
     await load(src, "test");
   }, [load]);
-  const restoreBase = React4.useCallback(async () => {
+  const restoreBase = React5.useCallback(async () => {
     const src = baseRef.current;
     if (!src.appId) return;
     await activateCachedBase(src.appId);
@@ -1201,7 +1246,7 @@ function useBundleManager({
       await load(src, "base");
     }
   }, [activateCachedBase, load]);
-  React4.useEffect(() => {
+  React5.useEffect(() => {
     if (!canRequestLatest) return;
     void loadBase();
   }, [base.appId, base.commitId, platform, canRequestLatest, loadBase]);
@@ -1209,7 +1254,7 @@ function useBundleManager({
 }
 
 // src/studio/hooks/useMergeRequests.ts
-var React5 = __toESM(require("react"));
+var React6 = __toESM(require("react"));
 
 // src/data/merge-requests/remote.ts
 var MergeRequestsRemoteDataSourceImpl = class extends BaseRemote {
@@ -1355,12 +1400,12 @@ function toUiStatus(status) {
 }
 function useMergeRequests(params) {
   const { appId } = params;
-  const [incoming, setIncoming] = React5.useState([]);
-  const [outgoing, setOutgoing] = React5.useState([]);
-  const [loading, setLoading] = React5.useState(false);
-  const [error, setError] = React5.useState(null);
-  const [creatorStatsById, setCreatorStatsById] = React5.useState({});
-  const pollUntilMerged = React5.useCallback(async (mrId) => {
+  const [incoming, setIncoming] = React6.useState([]);
+  const [outgoing, setOutgoing] = React6.useState([]);
+  const [loading, setLoading] = React6.useState(false);
+  const [error, setError] = React6.useState(null);
+  const [creatorStatsById, setCreatorStatsById] = React6.useState({});
+  const pollUntilMerged = React6.useCallback(async (mrId) => {
     const startedAt = Date.now();
     const timeoutMs = 2 * 60 * 1e3;
     for (; ; ) {
@@ -1370,7 +1415,7 @@ function useMergeRequests(params) {
       await new Promise((r) => setTimeout(r, 1500));
     }
   }, []);
-  const refresh = React5.useCallback(async () => {
+  const refresh = React6.useCallback(async () => {
     if (!appId) {
       setIncoming([]);
       setOutgoing([]);
@@ -1409,27 +1454,27 @@ function useMergeRequests(params) {
       setLoading(false);
     }
   }, [appId]);
-  React5.useEffect(() => {
+  React6.useEffect(() => {
     void refresh();
   }, [refresh]);
-  const openMergeRequest = React5.useCallback(async (sourceAppId) => {
+  const openMergeRequest = React6.useCallback(async (sourceAppId) => {
     const mr = await mergeRequestsRepository.open({ sourceAppId });
     await refresh();
     return mr;
   }, [refresh]);
-  const approve = React5.useCallback(async (mrId) => {
+  const approve = React6.useCallback(async (mrId) => {
     const mr = await mergeRequestsRepository.update(mrId, { status: "approved" });
     await refresh();
     const merged = await pollUntilMerged(mrId);
     await refresh();
     return merged ?? mr;
   }, [pollUntilMerged, refresh]);
-  const reject = React5.useCallback(async (mrId) => {
+  const reject = React6.useCallback(async (mrId) => {
     const mr = await mergeRequestsRepository.update(mrId, { status: "rejected" });
     await refresh();
     return mr;
   }, [refresh]);
-  const toSummary = React5.useCallback((mr) => {
+  const toSummary = React6.useCallback((mr) => {
     const stats = creatorStatsById[mr.createdBy];
     return {
       id: mr.id,
@@ -1445,7 +1490,7 @@ function useMergeRequests(params) {
       updatedAt: mr.updatedAt
     };
   }, [creatorStatsById]);
-  const byId = React5.useMemo(() => {
+  const byId = React6.useMemo(() => {
     const all = [...incoming, ...outgoing];
     const map = {};
     for (const mr of all) map[mr.id] = mr;
@@ -1463,7 +1508,7 @@ function useMergeRequests(params) {
 }
 
 // src/studio/hooks/useAttachmentUpload.ts
-var React6 = __toESM(require("react"));
+var React7 = __toESM(require("react"));
 
 // src/data/attachment/remote.ts
 var AttachmentRemoteDataSourceImpl = class extends BaseRemote {
@@ -1504,9 +1549,9 @@ var attachmentRepository = new AttachmentRepositoryImpl(
 
 // src/studio/hooks/useAttachmentUpload.ts
 function useAttachmentUpload() {
-  const [uploading, setUploading] = React6.useState(false);
-  const [error, setError] = React6.useState(null);
-  const uploadBase64Images = React6.useCallback(async ({ threadId, appId, dataUrls }) => {
+  const [uploading, setUploading] = React7.useState(false);
+  const [error, setError] = React7.useState(null);
+  const uploadBase64Images = React7.useCallback(async ({ threadId, appId, dataUrls }) => {
     if (!threadId || !appId) return [];
     if (!dataUrls || dataUrls.length === 0) return [];
     setUploading(true);
@@ -1540,7 +1585,7 @@ function useAttachmentUpload() {
 }
 
 // src/studio/hooks/useStudioActions.ts
-var React7 = __toESM(require("react"));
+var React8 = __toESM(require("react"));
 
 // src/data/agent/remote.ts
 var AgentRemoteDataSourceImpl = class extends BaseRemote {
@@ -1579,12 +1624,12 @@ function useStudioActions({
   onForkedApp,
   uploadAttachments
 }) {
-  const [forking, setForking] = React7.useState(false);
-  const [sending, setSending] = React7.useState(false);
-  const [error, setError] = React7.useState(null);
+  const [forking, setForking] = React8.useState(false);
+  const [sending, setSending] = React8.useState(false);
+  const [error, setError] = React8.useState(null);
   const isOwner = Boolean(userId && (app == null ? void 0 : app.createdBy) && userId === app.createdBy);
   const shouldForkOnEdit = Boolean(userId && app && app.createdBy !== userId);
-  const sendEdit = React7.useCallback(
+  const sendEdit = React8.useCallback(
     async ({ prompt, attachments }) => {
       if (!userId || !app) return;
       if (!prompt.trim()) return;
@@ -1647,14 +1692,14 @@ function hasNoOutcomeAfterLastHuman(messages) {
 }
 
 // src/studio/ui/RuntimeRenderer.tsx
-var import_react_native4 = require("react-native");
+var import_react_native5 = 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_native4.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, 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_native4.View, { style: [{ flex: 1 }, style], children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native5.View, { style: [{ flex: 1 }, style], children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
     import_runtime.ComergeRuntimeRenderer,
     {
       appKey,
@@ -1666,17 +1711,17 @@ function RuntimeRenderer({ appKey, bundlePath, renderToken, style }) {
 }
 
 // src/studio/ui/StudioOverlay.tsx
-var React37 = __toESM(require("react"));
-var import_react_native51 = require("react-native");
+var React38 = __toESM(require("react"));
+var import_react_native52 = require("react-native");
 
 // src/components/studio-sheet/StudioBottomSheet.tsx
-var React8 = __toESM(require("react"));
-var import_react_native6 = require("react-native");
+var React9 = __toESM(require("react"));
+var import_react_native7 = 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_native5 = require("react-native");
+var import_react_native6 = require("react-native");
 var import_liquid_glass = require("@callstack/liquid-glass");
 var import_jsx_runtime4 = require("react/jsx-runtime");
 function StudioSheetBackground({
@@ -1684,7 +1729,7 @@ function StudioSheetBackground({
   renderBackground
 }) {
   const theme = useTheme();
-  const radius = import_react_native5.Platform.OS === "ios" ? 39 : 16;
+  const radius = import_react_native6.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 = {
@@ -1705,7 +1750,7 @@ function StudioSheetBackground({
       }
     ),
     import_liquid_glass.isLiquidGlassSupported && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-      import_react_native5.View,
+      import_react_native6.View,
       {
         style: [
           containerStyle,
@@ -1738,19 +1783,43 @@ function StudioBottomSheet({
 }) {
   const theme = useTheme();
   const insets = (0, import_react_native_safe_area_context.useSafeAreaInsets)();
-  const internalSheetRef = React8.useRef(null);
+  const internalSheetRef = React9.useRef(null);
   const resolvedSheetRef = sheetRef ?? internalSheetRef;
-  React8.useEffect(() => {
-    if (import_react_native6.Platform.OS !== "ios") return;
-    const sub = import_react_native6.Keyboard.addListener("keyboardDidHide", () => {
+  const currentIndexRef = React9.useRef(open ? snapPoints.length - 1 : -1);
+  const lastAppStateRef = React9.useRef(import_react_native7.AppState.currentState);
+  React9.useEffect(() => {
+    const sub = import_react_native7.AppState.addEventListener("change", (state) => {
+      const prev = lastAppStateRef.current;
+      lastAppStateRef.current = state;
+      if (state === "background" || state === "inactive") {
+        import_react_native7.Keyboard.dismiss();
+        return;
+      }
+      if (state !== "active") return;
+      const sheet = resolvedSheetRef.current;
+      if (!sheet) return;
+      const idx = currentIndexRef.current;
+      if (open && idx >= 0) {
+        import_react_native7.Keyboard.dismiss();
+        requestAnimationFrame(() => sheet.snapToIndex(idx));
+        setTimeout(() => sheet.snapToIndex(idx), 120);
+      }
+    });
+    return () => sub.remove();
+  }, [open, resolvedSheetRef]);
+  React9.useEffect(() => {
+    if (import_react_native7.Platform.OS !== "ios") return;
+    const sub = import_react_native7.Keyboard.addListener("keyboardDidHide", () => {
       const sheet = resolvedSheetRef.current;
       if (!sheet || !open) return;
       const targetIndex = snapPoints.length - 1;
-      setTimeout(() => sheet.snapToIndex(targetIndex), 10);
+      if (currentIndexRef.current === targetIndex) {
+        setTimeout(() => sheet.snapToIndex(targetIndex), 10);
+      }
     });
     return () => sub.remove();
   }, [open, resolvedSheetRef, snapPoints.length]);
-  React8.useEffect(() => {
+  React9.useEffect(() => {
     const sheet = resolvedSheetRef.current;
     if (!sheet) return;
     if (open) {
@@ -1759,8 +1828,9 @@ function StudioBottomSheet({
       sheet.close();
     }
   }, [open, resolvedSheetRef, snapPoints.length]);
-  const handleChange = React8.useCallback(
+  const handleChange = React9.useCallback(
     (index) => {
+      currentIndexRef.current = index;
       onOpenChange == null ? void 0 : onOpenChange(index >= 0);
     },
     [onOpenChange]
@@ -1772,7 +1842,7 @@ function StudioBottomSheet({
       index: open ? snapPoints.length - 1 : -1,
       snapPoints,
       enablePanDownToClose: true,
-      keyboardBehavior: import_react_native6.Platform.OS === "ios" ? "interactive" : "extend",
+      keyboardBehavior: "interactive",
       keyboardBlurBehavior: "restore",
       android_keyboardInputMode: "adjustResize",
       backgroundComponent: (props) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(StudioSheetBackground, { ...props, renderBackground: background == null ? void 0 : background.renderBackground }),
@@ -1781,19 +1851,19 @@ function StudioBottomSheet({
       handleIndicatorStyle: { backgroundColor: theme.colors.handleIndicator },
       onChange: handleChange,
       ...bottomSheetProps,
-      children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_native6.View, { style: { flex: 1, overflow: "hidden" }, children })
+      children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_native7.View, { style: { flex: 1, overflow: "hidden" }, children })
     }
   );
 }
 
 // src/components/studio-sheet/StudioSheetPager.tsx
-var React9 = __toESM(require("react"));
-var import_react_native7 = require("react-native");
+var React10 = __toESM(require("react"));
+var import_react_native8 = require("react-native");
 var import_jsx_runtime6 = require("react/jsx-runtime");
 function StudioSheetPager({ activePage, width, preview, chat, style }) {
-  const anim = React9.useRef(new import_react_native7.Animated.Value(activePage === "chat" ? 1 : 0)).current;
-  React9.useEffect(() => {
-    import_react_native7.Animated.spring(anim, {
+  const anim = React10.useRef(new import_react_native8.Animated.Value(activePage === "chat" ? 1 : 0)).current;
+  React10.useEffect(() => {
+    import_react_native8.Animated.spring(anim, {
       toValue: activePage === "chat" ? 1 : 0,
       useNativeDriver: true,
       tension: 65,
@@ -1802,9 +1872,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_native7.Animated.View, { style: [{ flex: 1 }, style], children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_react_native8.Animated.View, { style: [{ flex: 1 }, style], children: [
     /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-      import_react_native7.Animated.View,
+      import_react_native8.Animated.View,
       {
         style: [
           {
@@ -1821,7 +1891,7 @@ function StudioSheetPager({ activePage, width, preview, chat, style }) {
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-      import_react_native7.Animated.View,
+      import_react_native8.Animated.View,
       {
         style: [
           {
@@ -1842,7 +1912,7 @@ function StudioSheetPager({ activePage, width, preview, chat, style }) {
 
 // src/components/floating-draggable-button/FloatingDraggableButton.tsx
 var import_react = require("react");
-var import_react_native8 = require("react-native");
+var import_react_native9 = 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");
@@ -1901,7 +1971,7 @@ function FloatingDraggableButton({
   backgroundColor
 }) {
   const theme = useTheme();
-  const { width, height } = (0, import_react_native8.useWindowDimensions)();
+  const { width, height } = (0, import_react_native9.useWindowDimensions)();
   const isDanger = variant === "danger";
   const onPressRef = (0, import_react.useRef)(onPress);
   (0, import_react.useEffect)(() => {
@@ -2004,7 +2074,7 @@ function FloatingDraggableButton({
     }
   }, [forceShowTrigger, visible, animateIn]);
   const panResponder = (0, import_react.useRef)(
-    import_react_native8.PanResponder.create({
+    import_react_native9.PanResponder.create({
       onStartShouldSetPanResponder: () => true,
       onMoveShouldSetPanResponder: () => true,
       onPanResponderGrant: () => {
@@ -2067,24 +2137,24 @@ function FloatingDraggableButton({
             interactive: true,
             effect: "clear",
             children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-              import_react_native8.Pressable,
+              import_react_native9.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_native8.View, {})
+                children: children ?? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native9.View, {})
               }
             )
           }
         ) }),
-        badgeCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native8.View, { style: [styles.badge, { backgroundColor: theme.colors.danger }], children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native8.Text, { style: [styles.badgeText, { color: theme.colors.onDanger }], children: badgeCount > 99 ? "99+" : badgeCount }) })
+        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 }) })
       ]
     }
   );
 }
-var styles = import_react_native8.StyleSheet.create({
+var styles = import_react_native9.StyleSheet.create({
   floatingButton: {
     position: "absolute",
     justifyContent: "center",
@@ -2120,8 +2190,8 @@ var styles = import_react_native8.StyleSheet.create({
 });
 
 // src/components/overlays/EdgeGlowFrame.tsx
-var React10 = __toESM(require("react"));
-var import_react_native9 = require("react-native");
+var React11 = __toESM(require("react"));
+var import_react_native10 = require("react-native");
 var import_expo_linear_gradient = require("expo-linear-gradient");
 
 // src/components/utils/color.ts
@@ -2163,9 +2233,9 @@ function EdgeGlowFrame({
 }) {
   const theme = useTheme();
   const alpha = Math.max(0, Math.min(1, intensity));
-  const anim = React10.useRef(new import_react_native9.Animated.Value(visible ? 1 : 0)).current;
-  React10.useEffect(() => {
-    import_react_native9.Animated.timing(anim, {
+  const anim = React11.useRef(new import_react_native10.Animated.Value(visible ? 1 : 0)).current;
+  React11.useEffect(() => {
+    import_react_native10.Animated.timing(anim, {
       toValue: visible ? 1 : 0,
       duration: 300,
       useNativeDriver: true
@@ -2174,8 +2244,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_native9.Animated.View, { pointerEvents: "none", style: [{ position: "absolute", inset: 0, opacity: anim }, style], children: [
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native9.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_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)(
       import_expo_linear_gradient.LinearGradient,
       {
         colors: [strong, soft, "transparent"],
@@ -2184,7 +2254,7 @@ function EdgeGlowFrame({
         style: { width: "100%", height: "100%" }
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native9.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_native10.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],
@@ -2193,7 +2263,7 @@ function EdgeGlowFrame({
         style: { width: "100%", height: "100%" }
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native9.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_native10.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"],
@@ -2202,7 +2272,7 @@ function EdgeGlowFrame({
         style: { width: "100%", height: "100%" }
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native9.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_native10.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],
@@ -2215,13 +2285,13 @@ function EdgeGlowFrame({
 }
 
 // src/components/draw/DrawModeOverlay.tsx
-var React13 = __toESM(require("react"));
-var import_react_native13 = require("react-native");
+var React14 = __toESM(require("react"));
+var import_react_native14 = require("react-native");
 var import_react_native_view_shot = require("react-native-view-shot");
 
 // src/components/draw/DrawSurface.tsx
-var React11 = __toESM(require("react"));
-var import_react_native10 = require("react-native");
+var React12 = __toESM(require("react"));
+var import_react_native11 = require("react-native");
 var import_react_native_svg = __toESM(require("react-native-svg"));
 
 // src/components/draw/strokes.ts
@@ -2252,25 +2322,25 @@ function DrawSurface({
   style,
   minDistance = 1
 }) {
-  const [renderTick, setRenderTick] = React11.useState(0);
-  const currentPointsRef = React11.useRef([]);
-  const rafRef = React11.useRef(null);
-  const triggerRender = React11.useCallback(() => {
+  const [renderTick, setRenderTick] = React12.useState(0);
+  const currentPointsRef = React12.useRef([]);
+  const rafRef = React12.useRef(null);
+  const triggerRender = React12.useCallback(() => {
     if (rafRef.current !== null) return;
     rafRef.current = requestAnimationFrame(() => {
       rafRef.current = null;
       setRenderTick((n) => n + 1);
     });
   }, []);
-  React11.useEffect(() => () => {
+  React12.useEffect(() => () => {
     if (rafRef.current !== null) cancelAnimationFrame(rafRef.current);
   }, []);
-  const onStart = React11.useCallback((e) => {
+  const onStart = React12.useCallback((e) => {
     const { locationX, locationY } = e.nativeEvent;
     currentPointsRef.current = [{ x: locationX, y: locationY }];
     triggerRender();
   }, [triggerRender]);
-  const onMove = React11.useCallback((e, _g) => {
+  const onMove = React12.useCallback((e, _g) => {
     const { locationX, locationY } = e.nativeEvent;
     const pts = currentPointsRef.current;
     if (pts.length > 0) {
@@ -2283,7 +2353,7 @@ function DrawSurface({
     currentPointsRef.current = [...pts, { x: locationX, y: locationY }];
     triggerRender();
   }, [minDistance, triggerRender]);
-  const onEnd = React11.useCallback(() => {
+  const onEnd = React12.useCallback(() => {
     const points = currentPointsRef.current;
     if (points.length > 0) {
       onAddStroke({ points, color, width: strokeWidth });
@@ -2291,8 +2361,8 @@ function DrawSurface({
     currentPointsRef.current = [];
     triggerRender();
   }, [color, onAddStroke, strokeWidth, triggerRender]);
-  const panResponder = React11.useMemo(
-    () => import_react_native10.PanResponder.create({
+  const panResponder = React12.useMemo(
+    () => import_react_native11.PanResponder.create({
       onStartShouldSetPanResponder: () => true,
       onMoveShouldSetPanResponder: () => true,
       onPanResponderGrant: onStart,
@@ -2304,7 +2374,7 @@ function DrawSurface({
   );
   const currentPath = pointsToSmoothPath(currentPointsRef.current);
   void renderTick;
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native10.View, { style: [import_react_native10.StyleSheet.absoluteFill, styles2.container, style], ...panResponder.panHandlers, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_react_native_svg.default, { style: import_react_native10.StyleSheet.absoluteFill, width: "100%", height: "100%", children: [
+  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: [
     strokes.map((s, idx) => {
       const d = pointsToSmoothPath(s.points);
       if (!d) return null;
@@ -2334,15 +2404,15 @@ function DrawSurface({
     ) : null
   ] }) });
 }
-var styles2 = import_react_native10.StyleSheet.create({
+var styles2 = import_react_native11.StyleSheet.create({
   container: {
     zIndex: 5
   }
 });
 
 // src/components/draw/DrawToolbar.tsx
-var React12 = __toESM(require("react"));
-var import_react_native12 = require("react-native");
+var React13 = __toESM(require("react"));
+var import_react_native13 = 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");
 
@@ -2361,7 +2431,7 @@ async function impact(style) {
 }
 
 // src/components/draw/DrawColorPicker.tsx
-var import_react_native11 = require("react-native");
+var import_react_native12 = require("react-native");
 var import_jsx_runtime10 = require("react/jsx-runtime");
 function DrawColorPicker({
   colors,
@@ -2396,10 +2466,10 @@ function DrawColorPicker({
     return { ...base, ...selectedStyle, ...whiteStyle };
   };
   if (!expanded) {
-    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native11.Pressable, { onPress: onToggle, style: [swatchStyle(selected, true), style] });
+    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_native11.View, { style: [{ flexDirection: "row", alignItems: "center", gap: 8 }, style], children: colors.map((c, idx) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-    import_react_native11.Pressable,
+  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,
     {
       onPress: () => {
         onSelect(c);
@@ -2430,14 +2500,14 @@ function DrawToolbar({
   style
 }) {
   const insets = (0, import_react_native_safe_area_context2.useSafeAreaInsets)();
-  const { width: screenWidth, height: screenHeight } = (0, import_react_native12.useWindowDimensions)();
-  const [expanded, setExpanded] = React12.useState(false);
-  const pos = React12.useRef(new import_react_native12.Animated.ValueXY({ x: screenWidth / 2 - 110, y: -140 })).current;
-  const start = React12.useRef({ x: 0, y: 0 });
-  const currentPos = React12.useRef({ x: 0, y: 0 });
-  React12.useEffect(() => {
+  const { width: screenWidth, height: screenHeight } = (0, import_react_native13.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 start = React13.useRef({ x: 0, y: 0 });
+  const currentPos = React13.useRef({ x: 0, y: 0 });
+  React13.useEffect(() => {
     if (hidden) return;
-    import_react_native12.Animated.spring(pos.y, {
+    import_react_native13.Animated.spring(pos.y, {
       toValue: insets.top + 60,
       useNativeDriver: true,
       damping: 12,
@@ -2445,7 +2515,7 @@ function DrawToolbar({
       mass: 0.8
     }).start();
   }, [hidden, insets.top, pos.y]);
-  React12.useEffect(() => {
+  React13.useEffect(() => {
     const id = pos.addListener((v) => {
       currentPos.current = { x: v.x ?? 0, y: v.y ?? 0 };
     });
@@ -2453,7 +2523,7 @@ function DrawToolbar({
       pos.removeListener(id);
     };
   }, [pos]);
-  const clamp2 = React12.useCallback(
+  const clamp2 = React13.useCallback(
     (x, y) => {
       const minX = 10;
       const maxX = Math.max(10, screenWidth - 230);
@@ -2463,8 +2533,8 @@ function DrawToolbar({
     },
     [insets.top, screenHeight, screenWidth]
   );
-  const panResponder = React12.useMemo(
-    () => import_react_native12.PanResponder.create({
+  const panResponder = React13.useMemo(
+    () => import_react_native13.PanResponder.create({
       onStartShouldSetPanResponder: () => false,
       onMoveShouldSetPanResponder: (_e, g) => Math.abs(g.dx) > 5 || Math.abs(g.dy) > 5,
       onPanResponderGrant: () => {
@@ -2476,7 +2546,7 @@ function DrawToolbar({
       },
       onPanResponderRelease: () => {
         const next = clamp2(currentPos.current.x, currentPos.current.y);
-        import_react_native12.Animated.spring(pos, { toValue: next, useNativeDriver: true }).start();
+        import_react_native13.Animated.spring(pos, { toValue: next, useNativeDriver: true }).start();
       }
     }),
     [clamp2, pos]
@@ -2491,9 +2561,9 @@ function DrawToolbar({
     children
   }) {
     const isDisabled = Boolean(disabled) || Boolean(capturingDisabled);
-    const [pressed, setPressed] = React12.useState(false);
+    const [pressed, setPressed] = React13.useState(false);
     return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-      import_react_native12.View,
+      import_react_native13.View,
       {
         style: {
           width: 28,
@@ -2505,7 +2575,7 @@ function DrawToolbar({
           opacity: isDisabled ? 0.5 : pressed ? 0.85 : 1
         },
         children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-          import_react_native12.Pressable,
+          import_react_native13.Pressable,
           {
             accessibilityRole: "button",
             accessibilityLabel,
@@ -2522,7 +2592,7 @@ function DrawToolbar({
     );
   }
   return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-    import_react_native12.Animated.View,
+    import_react_native13.Animated.View,
     {
       style: [
         {
@@ -2539,7 +2609,7 @@ function DrawToolbar({
       ],
       ...panResponder.panHandlers,
       children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-        import_react_native12.View,
+        import_react_native13.View,
         {
           style: {
             backgroundColor: "#F43F5E",
@@ -2547,7 +2617,7 @@ function DrawToolbar({
             padding: 12,
             minWidth: 220
           },
-          children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_react_native12.View, { style: { flexDirection: "row", alignItems: "center", gap: 8 }, children: [
+          children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_react_native13.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,
@@ -2565,7 +2635,7 @@ function DrawToolbar({
                 }
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_native12.View, { style: { width: 1, height: 20, backgroundColor: "rgba(255, 255, 255, 0.3)", marginHorizontal: 4 } }),
+            /* @__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)(
               CircleActionButton,
               {
@@ -2603,7 +2673,7 @@ function DrawToolbar({
                   void impact("medium");
                   onDone();
                 },
-                children: capturing ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_native12.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_native13.ActivityIndicator, { color: "#FFFFFF", size: "small" }) : renderDoneIcon ? renderDoneIcon() : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_lucide_react_native.Check, { size: 16, color: "#FFFFFF" })
               }
             )
           ] })
@@ -2629,7 +2699,7 @@ function DrawModeOverlay({
   renderDragHandle
 }) {
   const theme = useTheme();
-  const defaultPalette = React13.useMemo(
+  const defaultPalette = React14.useMemo(
     () => [
       "#EF4444",
       // Red
@@ -2647,11 +2717,11 @@ function DrawModeOverlay({
     []
   );
   const colors = palette && palette.length > 0 ? palette : defaultPalette;
-  const [selectedColor, setSelectedColor] = React13.useState(colors[0] ?? "#EF4444");
-  const [strokes, setStrokes] = React13.useState([]);
-  const [capturing, setCapturing] = React13.useState(false);
-  const [hideUi, setHideUi] = React13.useState(false);
-  React13.useEffect(() => {
+  const [selectedColor, setSelectedColor] = React14.useState(colors[0] ?? "#EF4444");
+  const [strokes, setStrokes] = React14.useState([]);
+  const [capturing, setCapturing] = React14.useState(false);
+  const [hideUi, setHideUi] = React14.useState(false);
+  React14.useEffect(() => {
     if (!visible) return;
     setStrokes([]);
     setSelectedColor(colors[0] ?? "#EF4444");
@@ -2659,14 +2729,14 @@ function DrawModeOverlay({
     setHideUi(false);
   }, [colors, visible]);
   const canUndo = strokes.length > 0;
-  const handleUndo = React13.useCallback(() => {
+  const handleUndo = React14.useCallback(() => {
     setStrokes((prev) => prev.slice(0, -1));
   }, []);
-  const handleCancel = React13.useCallback(() => {
+  const handleCancel = React14.useCallback(() => {
     setStrokes([]);
     onCancel();
   }, [onCancel]);
-  const handleDone = React13.useCallback(async () => {
+  const handleDone = React14.useCallback(async () => {
     if (!captureTargetRef.current || capturing) return;
     try {
       setCapturing(true);
@@ -2688,7 +2758,7 @@ function DrawModeOverlay({
     }
   }, [captureTargetRef, capturing, onCapture]);
   if (!visible) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_react_native13.View, { style: [import_react_native13.StyleSheet.absoluteFill, styles3.root, style], pointerEvents: "box-none", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_react_native14.View, { style: [import_react_native14.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,
@@ -2719,32 +2789,32 @@ function DrawModeOverlay({
     )
   ] });
 }
-var styles3 = import_react_native13.StyleSheet.create({
+var styles3 = import_react_native14.StyleSheet.create({
   root: {
     zIndex: 9999
   }
 });
 
 // src/components/comments/AppCommentsSheet.tsx
-var React20 = __toESM(require("react"));
-var import_react_native19 = require("react-native");
+var React21 = __toESM(require("react"));
+var import_react_native20 = 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");
 var import_lucide_react_native4 = require("lucide-react-native");
 
 // src/components/chat/ChatComposer.tsx
-var React15 = __toESM(require("react"));
-var import_react_native15 = require("react-native");
+var React16 = __toESM(require("react"));
+var import_react_native16 = 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 React14 = __toESM(require("react"));
-var import_react_native14 = require("react-native");
+var React15 = __toESM(require("react"));
+var import_react_native15 = require("react-native");
 var import_bottom_sheet2 = require("@gorhom/bottom-sheet");
 var import_jsx_runtime13 = require("react/jsx-runtime");
-var MultilineTextInput = React14.forwardRef(function MultilineTextInput2({ useBottomSheetTextInput = false, placeholder, placeholderTextColor, style, ...props }, ref) {
+var MultilineTextInput = React15.forwardRef(function MultilineTextInput2({ useBottomSheetTextInput = false, placeholder, placeholderTextColor, style, ...props }, ref) {
   const theme = useTheme();
   const baseStyle = {
     minHeight: 44,
@@ -2764,7 +2834,7 @@ var MultilineTextInput = React14.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_native14.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_native15.TextInput, { ref, ...commonProps });
 });
 
 // src/components/icons/StudioIcons.tsx
@@ -2816,10 +2886,10 @@ function AspectRatioThumbnail({
   onRemove,
   renderRemoveIcon
 }) {
-  const [aspectRatio, setAspectRatio] = React15.useState(1);
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_react_native15.View, { style: { height: THUMBNAIL_HEIGHT, aspectRatio, position: "relative" }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react_native15.View, { style: { flex: 1, borderRadius: 8, overflow: "hidden" }, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-      import_react_native15.Image,
+  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,
       {
         source: { uri },
         style: { width: "100%", height: "100%" },
@@ -2832,7 +2902,7 @@ function AspectRatioThumbnail({
       }
     ) }),
     onRemove ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-      import_react_native15.Pressable,
+      import_react_native16.Pressable,
       {
         style: {
           position: "absolute",
@@ -2858,6 +2928,7 @@ function ChatComposer({
   onChangeValue,
   placeholder = "Describe the idea you want to build",
   disabled = false,
+  sendDisabled = false,
   sending = false,
   autoFocus = false,
   onSend,
@@ -2872,19 +2943,19 @@ function ChatComposer({
   style
 }) {
   const theme = useTheme();
-  const [internal, setInternal] = React15.useState("");
+  const [internal, setInternal] = React16.useState("");
   const text = value ?? internal;
   const setText = onChangeValue ?? setInternal;
   const hasAttachments = attachments.length > 0;
   const hasText = text.trim().length > 0;
   const composerMinHeight = hasAttachments ? THUMBNAIL_HEIGHT + 44 + 24 : 44;
-  const isButtonDisabled = sending || disabled;
-  const maxInputHeight = React15.useMemo(() => import_react_native15.Dimensions.get("window").height * 0.5, []);
-  const shakeAnim = React15.useRef(new import_react_native15.Animated.Value(0)).current;
-  const [sendPressed, setSendPressed] = React15.useState(false);
-  const inputRef = React15.useRef(null);
-  const prevAutoFocusRef = React15.useRef(false);
-  React15.useEffect(() => {
+  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 [sendPressed, setSendPressed] = React16.useState(false);
+  const inputRef = React16.useRef(null);
+  const prevAutoFocusRef = React16.useRef(false);
+  React16.useEffect(() => {
     const shouldFocus = autoFocus && !prevAutoFocusRef.current && !disabled && !sending;
     prevAutoFocusRef.current = autoFocus;
     if (!shouldFocus) return;
@@ -2894,17 +2965,17 @@ function ChatComposer({
     }, 75);
     return () => clearTimeout(t);
   }, [autoFocus, disabled, sending]);
-  const triggerShake = React15.useCallback(() => {
+  const triggerShake = React16.useCallback(() => {
     shakeAnim.setValue(0);
-    import_react_native15.Animated.sequence([
-      import_react_native15.Animated.timing(shakeAnim, { toValue: 10, duration: 50, useNativeDriver: true }),
-      import_react_native15.Animated.timing(shakeAnim, { toValue: -10, duration: 50, useNativeDriver: true }),
-      import_react_native15.Animated.timing(shakeAnim, { toValue: 10, duration: 50, useNativeDriver: true }),
-      import_react_native15.Animated.timing(shakeAnim, { toValue: -10, duration: 50, useNativeDriver: true }),
-      import_react_native15.Animated.timing(shakeAnim, { toValue: 0, duration: 50, useNativeDriver: true })
+    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 })
     ]).start();
   }, [shakeAnim]);
-  const handleSend = React15.useCallback(async () => {
+  const handleSend = React16.useCallback(async () => {
     if (isButtonDisabled) return;
     if (!hasText) {
       triggerShake();
@@ -2917,12 +2988,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_native15.View,
+    import_react_native16.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_native15.View, { style: { flexDirection: "row", alignItems: "flex-end", gap: 8 }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react_native15.Animated.View, { style: { flex: 1, transform: [{ translateX: shakeAnim }] }, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+      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)(
           import_liquid_glass3.LiquidGlassView,
           {
             style: [
@@ -2935,7 +3006,7 @@ function ChatComposer({
             effect: "clear",
             children: [
               hasAttachments ? /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
-                import_react_native15.ScrollView,
+                import_react_native16.ScrollView,
                 {
                   horizontal: true,
                   showsHorizontalScrollIndicator: false,
@@ -2952,7 +3023,7 @@ function ChatComposer({
                       `attachment-${index}`
                     )),
                     onAddAttachment ? renderAddAttachment ? renderAddAttachment() : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-                      import_react_native15.Pressable,
+                      import_react_native16.Pressable,
                       {
                         style: {
                           height: THUMBNAIL_HEIGHT,
@@ -3004,7 +3075,7 @@ function ChatComposer({
             interactive: true,
             effect: "clear",
             children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-              import_react_native15.View,
+              import_react_native16.View,
               {
                 style: {
                   width: 44,
@@ -3015,7 +3086,7 @@ function ChatComposer({
                   opacity: isButtonDisabled ? 0.6 : sendPressed ? 0.9 : 1
                 },
                 children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-                  import_react_native15.Pressable,
+                  import_react_native16.Pressable,
                   {
                     accessibilityRole: "button",
                     accessibilityLabel: "Send",
@@ -3024,7 +3095,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_native15.ActivityIndicator, {}) : renderSendIcon ? renderSendIcon() : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(IconChevronRight, { size: 20, colorToken: "onPrimary" })
+                    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" })
                   }
                 )
               }
@@ -3037,11 +3108,11 @@ function ChatComposer({
 }
 
 // src/components/comments/CommentRow.tsx
-var React16 = __toESM(require("react"));
-var import_react_native17 = require("react-native");
+var React17 = __toESM(require("react"));
+var import_react_native18 = require("react-native");
 
 // src/components/primitives/Avatar.tsx
-var import_react_native16 = require("react-native");
+var import_react_native17 = require("react-native");
 var import_jsx_runtime16 = require("react/jsx-runtime");
 function initialsFrom(name) {
   var _a, _b;
@@ -3061,7 +3132,7 @@ function Avatar({
   const radius = size / 2;
   const fallbackBg = fallbackBackgroundColor ?? theme.colors.neutral;
   return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-    import_react_native16.View,
+    import_react_native17.View,
     {
       style: [
         {
@@ -3076,7 +3147,7 @@ function Avatar({
         style
       ],
       children: uri ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-        import_react_native16.Image,
+        import_react_native17.Image,
         {
           source: { uri },
           style: [{ width: size, height: size }, imageStyle],
@@ -3109,9 +3180,9 @@ function formatTimeAgo(iso) {
 var import_jsx_runtime17 = require("react/jsx-runtime");
 function CommentRow({ comment, showDivider }) {
   const theme = useTheme();
-  const [authorName, setAuthorName] = React16.useState(null);
-  const [authorAvatar, setAuthorAvatar] = React16.useState(null);
-  React16.useEffect(() => {
+  const [authorName, setAuthorName] = React17.useState(null);
+  const [authorAvatar, setAuthorAvatar] = React17.useState(null);
+  React17.useEffect(() => {
     let cancelled = false;
     (async () => {
       try {
@@ -3127,7 +3198,7 @@ function CommentRow({ comment, showDivider }) {
     };
   }, [comment.authorId]);
   return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
-    import_react_native17.View,
+    import_react_native18.View,
     {
       style: {
         flexDirection: "row",
@@ -3138,8 +3209,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_native17.View, { style: { flex: 1, minWidth: 0, gap: 4 }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_react_native17.View, { style: { flexDirection: "row", alignItems: "center", gap: theme.spacing.sm }, children: [
+        /* @__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.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) })
           ] }),
@@ -3151,7 +3222,7 @@ function CommentRow({ comment, showDivider }) {
 }
 
 // src/components/comments/useAppComments.ts
-var React17 = __toESM(require("react"));
+var React18 = __toESM(require("react"));
 
 // src/data/comments/remote.ts
 var AppCommentsRemoteDataSourceImpl = class extends BaseRemote {
@@ -3223,18 +3294,18 @@ var appCommentsRepository = new AppCommentsRepositoryImpl(appCommentsRemoteDataS
 
 // src/components/comments/useAppComments.ts
 function useAppComments(appId) {
-  const [comments, setComments] = React17.useState([]);
-  const [loading, setLoading] = React17.useState(false);
-  const [sending, setSending] = React17.useState(false);
-  const [error, setError] = React17.useState(null);
-  const sortByCreatedAtAsc = React17.useCallback((items) => {
+  const [comments, setComments] = React18.useState([]);
+  const [loading, setLoading] = React18.useState(false);
+  const [sending, setSending] = React18.useState(false);
+  const [error, setError] = React18.useState(null);
+  const sortByCreatedAtAsc = React18.useCallback((items) => {
     return [...items].sort((a, b) => {
       const at = a.createdAt ? new Date(a.createdAt).getTime() : 0;
       const bt = b.createdAt ? new Date(b.createdAt).getTime() : 0;
       return at - bt;
     });
   }, []);
-  const refresh = React17.useCallback(async () => {
+  const refresh = React18.useCallback(async () => {
     if (!appId) {
       setComments([]);
       return;
@@ -3251,10 +3322,10 @@ function useAppComments(appId) {
       setLoading(false);
     }
   }, [appId, sortByCreatedAtAsc]);
-  React17.useEffect(() => {
+  React18.useEffect(() => {
     void refresh();
   }, [refresh]);
-  const create = React17.useCallback(
+  const create = React18.useCallback(
     async (text) => {
       if (!appId) return;
       const trimmed = text.trim();
@@ -3277,11 +3348,11 @@ function useAppComments(appId) {
 }
 
 // src/components/comments/useAppDetails.ts
-var React18 = __toESM(require("react"));
+var React19 = __toESM(require("react"));
 function useAppDetails(appId) {
-  const [app, setApp] = React18.useState(null);
-  const [loading, setLoading] = React18.useState(false);
-  React18.useEffect(() => {
+  const [app, setApp] = React19.useState(null);
+  const [loading, setLoading] = React19.useState(false);
+  React19.useEffect(() => {
     if (!appId) {
       setApp(null);
       return;
@@ -3306,25 +3377,30 @@ function useAppDetails(appId) {
 }
 
 // src/components/comments/useIosKeyboardSnapFix.ts
-var React19 = __toESM(require("react"));
-var import_react_native18 = require("react-native");
-function useIosKeyboardSnapFix(sheetRef) {
-  const [keyboardVisible, setKeyboardVisible] = React19.useState(false);
-  React19.useEffect(() => {
-    if (import_react_native18.Platform.OS !== "ios") return;
-    const show = import_react_native18.Keyboard.addListener("keyboardWillShow", () => setKeyboardVisible(true));
-    const hide = import_react_native18.Keyboard.addListener("keyboardWillHide", () => {
+var React20 = __toESM(require("react"));
+var import_react_native19 = 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", () => {
+      var _a;
       setKeyboardVisible(false);
-      setTimeout(() => {
-        var _a, _b;
-        return (_b = (_a = sheetRef.current) == null ? void 0 : _a.snapToIndex) == null ? void 0 : _b.call(_a, 1);
-      }, 10);
+      const target = (options == null ? void 0 : options.targetIndex) ?? 1;
+      const current = ((_a = options == null ? void 0 : options.getCurrentIndex) == null ? void 0 : _a.call(options)) ?? null;
+      if (current === target) {
+        setTimeout(() => {
+          var _a2, _b;
+          return (_b = (_a2 = sheetRef.current) == null ? void 0 : _a2.snapToIndex) == null ? void 0 : _b.call(_a2, target);
+        }, 10);
+      }
     });
     return () => {
       show.remove();
       hide.remove();
     };
-  }, [sheetRef]);
+  }, [options == null ? void 0 : options.getCurrentIndex, options == null ? void 0 : options.targetIndex, sheetRef]);
   return { keyboardVisible };
 }
 
@@ -3333,12 +3409,16 @@ var import_jsx_runtime18 = require("react/jsx-runtime");
 function AppCommentsSheet({ appId, onClose, onCountChange, onPlayApp }) {
   const theme = useTheme();
   const insets = (0, import_react_native_safe_area_context3.useSafeAreaInsets)();
-  const sheetRef = React20.useRef(null);
-  const snapPoints = React20.useMemo(() => ["50%", "90%"], []);
+  const sheetRef = React21.useRef(null);
+  const snapPoints = React21.useMemo(() => ["50%", "90%"], []);
+  const currentIndexRef = React21.useRef(1);
   const { comments, loading, sending, error, create, refresh } = useAppComments(appId);
   const { app, loading: loadingApp } = useAppDetails(appId);
-  const { keyboardVisible } = useIosKeyboardSnapFix(sheetRef);
-  React20.useEffect(() => {
+  const { keyboardVisible } = useIosKeyboardSnapFix(sheetRef, {
+    getCurrentIndex: () => currentIndexRef.current,
+    targetIndex: 1
+  });
+  React21.useEffect(() => {
     var _a, _b;
     if (appId) {
       (_a = sheetRef.current) == null ? void 0 : _a.present();
@@ -3347,21 +3427,22 @@ function AppCommentsSheet({ appId, onClose, onCountChange, onPlayApp }) {
       (_b = sheetRef.current) == null ? void 0 : _b.dismiss();
     }
   }, [appId, refresh]);
-  React20.useEffect(() => {
+  React21.useEffect(() => {
     if (!appId) return;
     onCountChange == null ? void 0 : onCountChange(comments.length);
   }, [appId, comments.length, onCountChange]);
-  const renderBackdrop = React20.useCallback(
+  const renderBackdrop = React21.useCallback(
     (props) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_bottom_sheet3.BottomSheetBackdrop, { ...props, disappearsOnIndex: -1, appearsOnIndex: 0, opacity: 0.5 }),
     []
   );
-  const handleChange = React20.useCallback(
+  const handleChange = React21.useCallback(
     (index) => {
+      currentIndexRef.current = index;
       if (index === -1) onClose();
     },
     [onClose]
   );
-  const handlePlay = React20.useCallback(async () => {
+  const handlePlay = React21.useCallback(async () => {
     var _a;
     if (!appId) return;
     (_a = sheetRef.current) == null ? void 0 : _a.dismiss();
@@ -3379,17 +3460,17 @@ function AppCommentsSheet({ appId, onClose, onCountChange, onPlayApp }) {
       onChange: handleChange,
       backgroundStyle: {
         backgroundColor: theme.scheme === "dark" ? "#0B080F" : "#FFFFFF",
-        borderTopLeftRadius: import_react_native19.Platform.OS === "ios" ? 39 : 16,
-        borderTopRightRadius: import_react_native19.Platform.OS === "ios" ? 39 : 16
+        borderTopLeftRadius: import_react_native20.Platform.OS === "ios" ? 39 : 16,
+        borderTopRightRadius: import_react_native20.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_native19.View, { style: { flex: 1 }, children: [
+      children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_react_native20.View, { style: { flex: 1 }, children: [
         /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
-          import_react_native19.View,
+          import_react_native20.View,
           {
             style: {
               flexDirection: "row",
@@ -3425,7 +3506,7 @@ function AppCommentsSheet({ appId, onClose, onCountChange, onPlayApp }) {
                   interactive: true,
                   effect: "clear",
                   children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
-                    import_react_native19.View,
+                    import_react_native20.View,
                     {
                       style: {
                         width: 32,
@@ -3437,7 +3518,7 @@ function AppCommentsSheet({ appId, onClose, onCountChange, onPlayApp }) {
                         opacity: appId ? 1 : 0.5
                       },
                       children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
-                        import_react_native19.Pressable,
+                        import_react_native20.Pressable,
                         {
                           disabled: !appId,
                           onPress: () => void handlePlay(),
@@ -3472,13 +3553,13 @@ function AppCommentsSheet({ appId, onClose, onCountChange, onPlayApp }) {
             },
             keyboardShouldPersistTaps: "handled",
             children: [
-              loading && comments.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_native19.View, { style: { flex: 1, alignItems: "center", justifyContent: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_native19.ActivityIndicator, {}) }) : comments.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_native19.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_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)),
               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_native19.View,
+          import_react_native20.View,
           {
             style: {
               position: "absolute",
@@ -3487,7 +3568,7 @@ function AppCommentsSheet({ appId, onClose, onCountChange, onPlayApp }) {
               bottom: 0,
               paddingHorizontal: theme.spacing.lg,
               paddingTop: theme.spacing.sm,
-              paddingBottom: import_react_native19.Platform.OS === "ios" ? keyboardVisible ? theme.spacing.lg : insets.bottom : insets.bottom + 10,
+              paddingBottom: import_react_native20.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)
@@ -3501,7 +3582,7 @@ function AppCommentsSheet({ appId, onClose, onCountChange, onPlayApp }) {
                 useBottomSheetTextInput: true,
                 onSend: async (text) => {
                   await create(text);
-                  import_react_native19.Keyboard.dismiss();
+                  import_react_native20.Keyboard.dismiss();
                 }
               }
             )
@@ -3513,16 +3594,16 @@ function AppCommentsSheet({ appId, onClose, onCountChange, onPlayApp }) {
 }
 
 // src/studio/ui/PreviewPanel.tsx
-var import_react_native40 = require("react-native");
+var import_react_native41 = require("react-native");
 
 // src/components/preview/PreviewPage.tsx
-var import_react_native20 = require("react-native");
+var import_react_native21 = 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_native20.View, { style: { flex: 1 }, children: [
-    header ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react_native20.View, { children: header }) : null,
+  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,
     /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
       import_bottom_sheet4.BottomSheetScrollView,
       {
@@ -3542,15 +3623,15 @@ function PreviewPage({ header, children, contentStyle }) {
 }
 
 // src/studio/ui/preview-panel/PreviewPanelHeader.tsx
-var import_react_native23 = require("react-native");
+var import_react_native24 = require("react-native");
 
 // src/components/studio-sheet/StudioSheetHeader.tsx
-var import_react_native21 = require("react-native");
+var import_react_native22 = 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_native21.View,
+    import_react_native22.View,
     {
       style: [
         {
@@ -3563,17 +3644,17 @@ function StudioSheetHeader({ left, center, right, style }) {
         style
       ],
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react_native21.View, { style: { flexDirection: "row", alignItems: "center" }, children: left }),
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react_native21.View, { style: { flex: 1, alignItems: "center" }, children: center }),
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react_native21.View, { style: { flexDirection: "row", alignItems: "center" }, children: right })
+        /* @__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 })
       ]
     }
   );
 }
 
 // src/components/studio-sheet/StudioSheetHeaderIconButton.tsx
-var React21 = __toESM(require("react"));
-var import_react_native22 = require("react-native");
+var React22 = __toESM(require("react"));
+var import_react_native23 = require("react-native");
 var import_liquid_glass5 = require("@callstack/liquid-glass");
 var import_jsx_runtime21 = require("react/jsx-runtime");
 function StudioSheetHeaderIconButton({
@@ -3587,19 +3668,19 @@ function StudioSheetHeaderIconButton({
 }) {
   const theme = useTheme();
   const size = 44;
-  const [pressed, setPressed] = React21.useState(false);
+  const [pressed, setPressed] = React22.useState(false);
   const solidBg = intent === "danger" ? theme.colors.danger : intent === "primary" ? theme.colors.primary : theme.colors.neutral;
   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_native22.View, { style, children: appearance === "glass" ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_react_native23.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_native22.View,
+        import_react_native23.View,
         {
           style: {
             width: size,
@@ -3611,7 +3692,7 @@ function StudioSheetHeaderIconButton({
             opacity: resolvedOpacity
           },
           children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-            import_react_native22.Pressable,
+            import_react_native23.Pressable,
             {
               accessibilityRole: "button",
               accessibilityLabel,
@@ -3630,7 +3711,7 @@ function StudioSheetHeaderIconButton({
       )
     }
   ) : /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-    import_react_native22.View,
+    import_react_native23.View,
     {
       style: {
         width: size,
@@ -3642,7 +3723,7 @@ function StudioSheetHeaderIconButton({
         opacity: resolvedOpacity
       },
       children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-        import_react_native22.Pressable,
+        import_react_native23.Pressable,
         {
           accessibilityRole: "button",
           accessibilityLabel,
@@ -3669,7 +3750,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_native23.View, { style: { flexDirection: "row", alignItems: "center" }, children: [
+      right: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_react_native24.View, { style: { flexDirection: "row", alignItems: "center" }, children: [
         isOwner ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
           StudioSheetHeaderIconButton,
           {
@@ -3688,10 +3769,10 @@ function PreviewPanelHeader({ isOwner, onClose, onNavigateHome, onGoToChat }) {
 }
 
 // src/components/preview/PreviewHeroCard.tsx
-var import_react_native25 = require("react-native");
+var import_react_native26 = require("react-native");
 
 // src/components/primitives/Surface.tsx
-var import_react_native24 = require("react-native");
+var import_react_native25 = require("react-native");
 var import_jsx_runtime23 = require("react/jsx-runtime");
 function backgroundFor(variant, theme) {
   const { colors } = theme;
@@ -3710,7 +3791,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_native24.View,
+    import_react_native25.View,
     {
       ...props,
       style: [
@@ -3766,32 +3847,32 @@ function PreviewHeroCard({
         },
         style
       ],
-      children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_react_native25.View, { style: { flex: 1 }, children: [
-        background ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_react_native25.View, { style: { position: "absolute", inset: 0 }, children: background }) : null,
-        image ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_react_native25.View, { style: { position: "absolute", inset: 0 }, children: image }) : null,
-        overlayTopLeft ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_react_native25.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_native25.View, { style: { flex: 1, justifyContent: "flex-end" }, children: overlayBottom }) : null
+      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
       ] })
     }
   );
 }
 
 // src/components/preview/PreviewPlaceholder.tsx
-var React22 = __toESM(require("react"));
-var import_react_native26 = require("react-native");
+var React23 = __toESM(require("react"));
+var import_react_native27 = 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 = React22.useRef(new import_react_native26.Animated.Value(0)).current;
-  React22.useEffect(() => {
+  const opacityAnim = React23.useRef(new import_react_native27.Animated.Value(0)).current;
+  React23.useEffect(() => {
     if (!visible) return;
-    const animation = import_react_native26.Animated.loop(
-      import_react_native26.Animated.sequence([
-        import_react_native26.Animated.timing(opacityAnim, { toValue: 1, duration: 1500, useNativeDriver: true }),
-        import_react_native26.Animated.timing(opacityAnim, { toValue: 2, duration: 1500, useNativeDriver: true }),
-        import_react_native26.Animated.timing(opacityAnim, { toValue: 3, duration: 1500, useNativeDriver: true }),
-        import_react_native26.Animated.timing(opacityAnim, { toValue: 0, duration: 1500, useNativeDriver: true })
+    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 })
       ])
     );
     animation.start();
@@ -3802,7 +3883,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_native26.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_native27.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)"],
@@ -3811,7 +3892,7 @@ function PreviewPlaceholder({ visible, style }) {
         style: { width: "100%", height: "100%" }
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react_native26.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_native27.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)"],
@@ -3820,7 +3901,7 @@ function PreviewPlaceholder({ visible, style }) {
         style: { width: "100%", height: "100%" }
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react_native26.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_native27.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)"],
@@ -3829,7 +3910,7 @@ function PreviewPlaceholder({ visible, style }) {
         style: { width: "100%", height: "100%" }
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react_native26.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_native27.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)"],
@@ -3842,12 +3923,12 @@ function PreviewPlaceholder({ visible, style }) {
 }
 
 // src/components/preview/PreviewImage.tsx
-var import_react_native27 = require("react-native");
+var import_react_native28 = 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_native27.Image,
+    import_react_native28.Image,
     {
       source: { uri },
       resizeMode: "cover",
@@ -3858,7 +3939,7 @@ function PreviewImage({ uri, onLoad, style }) {
 }
 
 // src/components/preview/StatsBar.tsx
-var import_react_native28 = require("react-native");
+var import_react_native29 = require("react-native");
 var import_liquid_glass6 = require("@callstack/liquid-glass");
 var import_lucide_react_native5 = require("lucide-react-native");
 
@@ -3891,7 +3972,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_native28.View,
+    import_react_native29.View,
     {
       style: [
         { position: "absolute", bottom: 12, width: "100%", paddingHorizontal: 12 },
@@ -3907,15 +3988,15 @@ function StatsBar({
             !import_liquid_glass6.isLiquidGlassSupported && { backgroundColor: statsBgColor }
           ],
           effect: "clear",
-          children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_react_native28.View, { style: { flexDirection: "row", alignItems: "center", justifyContent: "space-between", paddingHorizontal: 16 }, children: [
+          children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_react_native29.View, { style: { flexDirection: "row", alignItems: "center", justifyContent: "space-between", paddingHorizontal: 16 }, children: [
             /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
-              import_react_native28.Pressable,
+              import_react_native29.Pressable,
               {
                 disabled: !onPressLike,
                 onPress: onPressLike,
                 hitSlop: 8,
                 style: { paddingVertical: 8 },
-                children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_react_native28.View, { style: { flexDirection: "row", alignItems: "center" }, children: [
+                children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_react_native29.View, { style: { flexDirection: "row", alignItems: "center" }, children: [
                   /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
                     import_lucide_react_native5.Heart,
                     {
@@ -3925,7 +4006,7 @@ function StatsBar({
                       fill: isLiked ? theme.colors.danger : "transparent"
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_react_native28.View, { style: { width: 4 } }),
+                  /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_react_native29.View, { style: { width: 4 } }),
                   /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
                     Text,
                     {
@@ -3941,22 +4022,22 @@ function StatsBar({
               }
             ),
             /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
-              import_react_native28.Pressable,
+              import_react_native29.Pressable,
               {
                 disabled: !onPressComments,
                 onPress: onPressComments,
                 hitSlop: 8,
                 style: { paddingVertical: 8 },
-                children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_react_native28.View, { style: { flexDirection: "row", alignItems: "center" }, children: [
+                children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_react_native29.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_native28.View, { style: { width: 4 } }),
+                  /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_react_native29.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_native28.View, { style: { flexDirection: "row", alignItems: "center", paddingVertical: 8 }, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_react_native28.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_native28.View, { style: { width: 4 } }),
+            /* @__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.jsx)(Text, { variant: "caption", style: { color: "#FFFFFF", fontWeight: theme.typography.fontWeight.bold }, children: forkCount })
             ] })
           ] })
@@ -3967,7 +4048,7 @@ function StatsBar({
 }
 
 // src/components/preview/PreviewStatusBadge.tsx
-var import_react_native29 = require("react-native");
+var import_react_native30 = require("react-native");
 var import_lucide_react_native6 = require("lucide-react-native");
 
 // src/data/apps/types.ts
@@ -4012,7 +4093,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_native29.View,
+    import_react_native30.View,
     {
       style: {
         flexDirection: "row",
@@ -4065,10 +4146,10 @@ function PreviewHeroSection({
 }
 
 // src/studio/ui/preview-panel/PreviewMetaSection.tsx
-var import_react_native31 = require("react-native");
+var import_react_native32 = require("react-native");
 
 // src/components/preview/PreviewMetaRow.tsx
-var import_react_native30 = require("react-native");
+var import_react_native31 = require("react-native");
 var import_jsx_runtime32 = require("react/jsx-runtime");
 function PreviewMetaRow({
   avatarUri,
@@ -4080,10 +4161,10 @@ function PreviewMetaRow({
   style
 }) {
   const theme = useTheme();
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_react_native30.View, { style: [{ alignSelf: "stretch" }, style], children: [
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_react_native30.View, { style: { flexDirection: "row", alignItems: "center" }, children: [
+  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: [
       /* @__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_native30.View, { style: { flexDirection: "row", alignItems: "center", flex: 1, minWidth: 0, marginRight: theme.spacing.sm }, children: [
+      /* @__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.jsx)(
           Text,
           {
@@ -4098,9 +4179,9 @@ function PreviewMetaRow({
             children: title
           }
         ),
-        tag ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_react_native30.View, { style: { marginLeft: theme.spacing.sm }, children: tag }) : null
+        tag ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_react_native31.View, { style: { marginLeft: theme.spacing.sm }, children: tag }) : null
       ] }),
-      rightMetric ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_react_native30.View, { children: rightMetric }) : null
+      rightMetric ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_react_native31.View, { children: rightMetric }) : null
     ] }),
     subtitle ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
       Text,
@@ -4156,9 +4237,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_native31.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_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,
       rightMetric: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
-        import_react_native31.View,
+        import_react_native32.View,
         {
           style: {
             flexDirection: "row",
@@ -4192,10 +4273,10 @@ function PreviewMetaSection({ app, isOwner, creator, downloadsCount }) {
 }
 
 // src/studio/ui/preview-panel/PreviewCustomizeSection.tsx
-var import_react_native33 = require("react-native");
+var import_react_native34 = require("react-native");
 
 // src/studio/ui/preview-panel/PressableCardRow.tsx
-var import_react_native32 = require("react-native");
+var import_react_native33 = require("react-native");
 var import_jsx_runtime34 = require("react/jsx-runtime");
 function PressableCardRow({
   accessibilityLabel,
@@ -4208,20 +4289,20 @@ function PressableCardRow({
   style
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
-    import_react_native32.Pressable,
+    import_react_native33.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_native32.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_native33.View, { style: { flexDirection: "row", alignItems: "center" }, children: [
         left,
-        /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_react_native32.View, { style: { flex: 1, minWidth: 0 }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_react_native33.View, { style: { flex: 1, minWidth: 0 }, children: [
           title,
           subtitle ? subtitle : null
         ] }),
-        right ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_react_native32.View, { style: { marginLeft: 16 }, children: right }) : null
+        right ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_react_native33.View, { style: { marginLeft: 16 }, children: right }) : null
       ] }) })
     }
   );
@@ -4263,7 +4344,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_native33.View,
+      import_react_native34.View,
       {
         style: {
           flexDirection: "row",
@@ -4277,7 +4358,7 @@ function PreviewCustomizeSection({
         },
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
-            import_react_native33.View,
+            import_react_native34.View,
             {
               style: {
                 width: 40,
@@ -4288,10 +4369,10 @@ function PreviewCustomizeSection({
                 backgroundColor: withAlpha(theme.colors.warning, 0.1),
                 marginRight: theme.spacing.lg
               },
-              children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_react_native33.ActivityIndicator, { color: theme.colors.warning, size: "small" })
+              children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_react_native34.ActivityIndicator, { color: theme.colors.warning, size: "small" })
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_react_native33.View, { style: { flex: 1, minWidth: 0 }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_react_native34.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) })
           ] })
@@ -4312,7 +4393,7 @@ function PreviewCustomizeSection({
           marginBottom: theme.spacing.sm
         },
         left: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
-          import_react_native33.View,
+          import_react_native34.View,
           {
             style: {
               width: 40,
@@ -4345,7 +4426,7 @@ function PreviewCustomizeSection({
           marginBottom: theme.spacing.sm
         },
         left: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
-          import_react_native33.View,
+          import_react_native34.View,
           {
             style: {
               width: 40,
@@ -4368,17 +4449,17 @@ function PreviewCustomizeSection({
 }
 
 // src/studio/ui/preview-panel/PreviewCollaborateSection.tsx
-var React28 = __toESM(require("react"));
-var import_react_native39 = require("react-native");
+var React29 = __toESM(require("react"));
+var import_react_native40 = require("react-native");
 var import_lucide_react_native9 = require("lucide-react-native");
 
 // src/components/merge-requests/MergeRequestStatusCard.tsx
-var React24 = __toESM(require("react"));
-var import_react_native35 = require("react-native");
+var React25 = __toESM(require("react"));
+var import_react_native36 = require("react-native");
 var import_lucide_react_native7 = require("lucide-react-native");
 
 // src/components/primitives/MarkdownText.tsx
-var import_react_native34 = require("react-native");
+var import_react_native35 = 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 }) {
@@ -4391,7 +4472,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_native34.View, { style, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_react_native35.View, { style, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
     import_react_native_markdown_display.default,
     {
       style: {
@@ -4404,7 +4485,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_native34.Platform.OS === "ios" ? "Menlo" : "monospace",
+          fontFamily: import_react_native35.Platform.OS === "ios" ? "Menlo" : "monospace",
           fontSize: 13
         },
         code_block: {
@@ -4455,11 +4536,11 @@ function toIsoString(input) {
 }
 
 // src/components/merge-requests/useControlledExpansion.ts
-var React23 = __toESM(require("react"));
+var React24 = __toESM(require("react"));
 function useControlledExpansion(props) {
-  const [uncontrolled, setUncontrolled] = React23.useState(false);
+  const [uncontrolled, setUncontrolled] = React24.useState(false);
   const expanded = props.expanded ?? uncontrolled;
-  const setExpanded = React23.useCallback(
+  const setExpanded = React24.useCallback(
     (next) => {
       var _a;
       (_a = props.onExpandedChange) == null ? void 0 : _a.call(props, next);
@@ -4484,8 +4565,8 @@ function MergeRequestStatusCard({
   const isDark = theme.scheme === "dark";
   const textColor = isDark ? "#FFFFFF" : "#000000";
   const subTextColor = isDark ? "#A1A1AA" : "#71717A";
-  const status = React24.useMemo(() => getMergeRequestStatusDisplay(String(mergeRequest.status)), [mergeRequest.status]);
-  const { StatusIcon, iconColor, bgColor, statusText } = React24.useMemo(() => {
+  const status = React25.useMemo(() => getMergeRequestStatusDisplay(String(mergeRequest.status)), [mergeRequest.status]);
+  const { StatusIcon, iconColor, bgColor, statusText } = React25.useMemo(() => {
     switch (mergeRequest.status) {
       case "approved":
       case "merged":
@@ -4516,15 +4597,15 @@ function MergeRequestStatusCard({
   const createdIso = toIsoString(mergeRequest.createdAt ?? null);
   const headerTimeAgo = updatedIso ? formatTimeAgo(updatedIso) : "";
   const createdTimeAgo = createdIso ? formatTimeAgo(createdIso) : "";
-  const rotate = React24.useRef(new import_react_native35.Animated.Value(expanded ? 1 : 0)).current;
-  React24.useEffect(() => {
-    import_react_native35.Animated.timing(rotate, {
+  const rotate = React25.useRef(new import_react_native36.Animated.Value(expanded ? 1 : 0)).current;
+  React25.useEffect(() => {
+    import_react_native36.Animated.timing(rotate, {
       toValue: expanded ? 1 : 0,
       duration: 200,
       useNativeDriver: true
     }).start();
   }, [expanded, rotate]);
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_react_native35.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_native36.Pressable, { onPress: () => setExpanded(!expanded), style: ({ pressed }) => [{ opacity: pressed ? 0.95 : 1 }], children: /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
     Card,
     {
       padded: false,
@@ -4537,10 +4618,10 @@ function MergeRequestStatusCard({
         style
       ],
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_react_native35.View, { style: { flexDirection: "row", alignItems: "center", gap: theme.spacing.lg }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_react_native35.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_native35.View, { style: { flex: 1, minWidth: 0 }, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_react_native35.View, { style: { flexDirection: "row", alignItems: "center", justifyContent: "space-between" }, 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.jsx)(
                 Text,
                 {
@@ -4559,8 +4640,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_native35.View, { children: headerRight }) : /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
-            import_react_native35.Animated.View,
+          headerRight ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_react_native36.View, { children: headerRight }) : /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+            import_react_native36.Animated.View,
             {
               style: {
                 transform: [
@@ -4573,7 +4654,7 @@ function MergeRequestStatusCard({
             }
           )
         ] }),
-        expanded ? /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_react_native35.View, { style: { marginTop: 16, marginLeft: 56 }, children: [
+        expanded ? /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_react_native36.View, { style: { marginTop: 16, marginLeft: 56 }, children: [
           /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
             Text,
             {
@@ -4608,17 +4689,17 @@ function MergeRequestStatusCard({
 }
 
 // src/components/merge-requests/ReviewMergeRequestCarousel.tsx
-var React27 = __toESM(require("react"));
-var import_react_native38 = require("react-native");
+var React28 = __toESM(require("react"));
+var import_react_native39 = require("react-native");
 
 // src/components/merge-requests/ReviewMergeRequestCard.tsx
-var React26 = __toESM(require("react"));
-var import_react_native37 = require("react-native");
+var React27 = __toESM(require("react"));
+var import_react_native38 = require("react-native");
 var import_lucide_react_native8 = require("lucide-react-native");
 
 // src/components/merge-requests/ReviewMergeRequestActionButton.tsx
-var React25 = __toESM(require("react"));
-var import_react_native36 = require("react-native");
+var React26 = __toESM(require("react"));
+var import_react_native37 = require("react-native");
 var import_jsx_runtime39 = require("react/jsx-runtime");
 function ReviewMergeRequestActionButton({
   accessibilityLabel,
@@ -4628,14 +4709,14 @@ function ReviewMergeRequestActionButton({
   children,
   iconOnly
 }) {
-  const [pressed, setPressed] = React25.useState(false);
+  const [pressed, setPressed] = React26.useState(false);
   const height = iconOnly ? 36 : 40;
   const width = iconOnly ? 36 : void 0;
   const paddingHorizontal = iconOnly ? 0 : 16;
   const paddingVertical = iconOnly ? 0 : 8;
   const opacity = disabled ? 0.5 : pressed ? 0.9 : 1;
   return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
-    import_react_native36.View,
+    import_react_native37.View,
     {
       style: {
         width,
@@ -4650,7 +4731,7 @@ function ReviewMergeRequestActionButton({
         justifyContent: "center"
       },
       children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
-        import_react_native36.Pressable,
+        import_react_native37.Pressable,
         {
           accessibilityRole: "button",
           accessibilityLabel,
@@ -4690,14 +4771,14 @@ function ReviewMergeRequestCard({
   onTest
 }) {
   const theme = useTheme();
-  const status = React26.useMemo(() => getMergeRequestStatusDisplay(mr.status), [mr.status]);
+  const status = React27.useMemo(() => getMergeRequestStatusDisplay(mr.status), [mr.status]);
   const canAct = mr.status === "open";
-  const rotate = React26.useRef(new import_react_native37.Animated.Value(isExpanded ? 1 : 0)).current;
-  React26.useEffect(() => {
-    import_react_native37.Animated.timing(rotate, { toValue: isExpanded ? 1 : 0, duration: 200, useNativeDriver: true }).start();
+  const rotate = React27.useRef(new import_react_native38.Animated.Value(isExpanded ? 1 : 0)).current;
+  React27.useEffect(() => {
+    import_react_native38.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_native37.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_native38.Pressable, { onPress: onToggle, style: ({ pressed }) => ({ opacity: pressed ? 0.95 : 1 }), children: /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
     Card,
     {
       padded: false,
@@ -4710,9 +4791,9 @@ function ReviewMergeRequestCard({
         }
       ],
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_react_native37.View, { style: { flexDirection: "row", alignItems: "center", gap: 12 }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_react_native38.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_native37.View, { style: { flex: 1, minWidth: 0 }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_react_native38.View, { style: { flex: 1, minWidth: 0 }, children: [
             /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
               Text,
               {
@@ -4728,7 +4809,7 @@ function ReviewMergeRequestCard({
             ] })
           ] }),
           /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
-            import_react_native37.Animated.View,
+            import_react_native38.Animated.View,
             {
               style: {
                 transform: [{ rotate: rotate.interpolate({ inputRange: [0, 1], outputRange: ["0deg", "180deg"] }) }]
@@ -4737,7 +4818,7 @@ function ReviewMergeRequestCard({
             }
           )
         ] }),
-        isExpanded ? /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_react_native37.View, { style: { marginTop: 16 }, children: [
+        isExpanded ? /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_react_native38.View, { style: { marginTop: 16 }, children: [
           /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
             Text,
             {
@@ -4755,9 +4836,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_native37.View, { style: { height: 1, backgroundColor: withAlpha(theme.colors.borderStrong, 0.5), marginTop: 12, marginBottom: 12 } }),
-        /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_react_native37.View, { style: { flexDirection: "row", alignItems: "center", justifyContent: "space-between" }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_react_native37.View, { style: { flexDirection: "row", gap: 8 }, children: [
+        /* @__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)(
               ReviewMergeRequestActionButton,
               {
@@ -4766,7 +4847,7 @@ function ReviewMergeRequestCard({
                 disabled: !canAct || isAnyProcessing,
                 onPress: onReject,
                 iconOnly: !isExpanded,
-                children: /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_react_native37.View, { style: { flexDirection: "row", alignItems: "center", gap: isExpanded ? 4 : 0 }, children: [
+                children: /* @__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_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
                 ] })
@@ -4780,10 +4861,10 @@ function ReviewMergeRequestCard({
                 disabled: !canAct || isAnyProcessing,
                 onPress: onApprove,
                 iconOnly: !isExpanded,
-                children: isProcessing ? /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_react_native37.View, { style: { flexDirection: "row", alignItems: "center", gap: isExpanded ? 4 : 0 }, children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_react_native37.ActivityIndicator, { size: "small", color: "#FFFFFF" }),
+                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" }),
                   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_native37.View, { style: { flexDirection: "row", alignItems: "center", gap: isExpanded ? 4 : 0 }, children: [
+                ] }) : /* @__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_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
                 ] })
@@ -4798,7 +4879,7 @@ function ReviewMergeRequestCard({
               disabled: isBuilding || isTestingThis,
               onPress: onTest,
               iconOnly: !isExpanded,
-              children: isTestingThis ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_react_native37.ActivityIndicator, { size: "small", color: "#888" }) : /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_react_native37.View, { style: { flexDirection: "row", alignItems: "center", gap: isExpanded ? 4 : 0 }, children: [
+              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: [
                 /* @__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
               ] })
@@ -4824,32 +4905,32 @@ function ReviewMergeRequestCarousel({
   style
 }) {
   const theme = useTheme();
-  const { width } = (0, import_react_native38.useWindowDimensions)();
-  const [expanded, setExpanded] = React27.useState({});
-  const carouselScrollX = React27.useRef(new import_react_native38.Animated.Value(0)).current;
+  const { width } = (0, import_react_native39.useWindowDimensions)();
+  const [expanded, setExpanded] = React28.useState({});
+  const carouselScrollX = React28.useRef(new import_react_native39.Animated.Value(0)).current;
   const peekAmount = 24;
   const gap = 16;
-  const cardWidth = React27.useMemo(() => Math.max(1, width - theme.spacing.lg * 2 - peekAmount), [peekAmount, theme.spacing.lg, width]);
+  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_native38.View, { style: [{ marginHorizontal: -theme.spacing.lg }, style], children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_react_native39.View, { style: [{ marginHorizontal: -theme.spacing.lg }, style], children: [
     /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
-      import_react_native38.FlatList,
+      import_react_native39.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_native38.View, { style: { width: gap } }),
+        ItemSeparatorComponent: () => /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_react_native39.View, { style: { width: gap } }),
         snapToAlignment: "start",
         decelerationRate: "fast",
         snapToInterval: snapInterval,
         disableIntervalMomentum: true,
         style: { paddingRight: peekAmount },
-        ListFooterComponent: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_react_native38.View, { style: { width: peekAmount } }),
-        onScroll: import_react_native38.Animated.event([{ nativeEvent: { contentOffset: { x: carouselScrollX } } }], {
+        ListFooterComponent: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_react_native39.View, { style: { width: peekAmount } }),
+        onScroll: import_react_native39.Animated.event([{ nativeEvent: { contentOffset: { x: carouselScrollX } } }], {
           useNativeDriver: false
         }),
         scrollEventThrottle: 16,
@@ -4860,7 +4941,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_native38.View, { style: { width: cardWidth }, children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+          return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_react_native39.View, { style: { width: cardWidth }, children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
             ReviewMergeRequestCard,
             {
               mr: item,
@@ -4881,7 +4962,7 @@ function ReviewMergeRequestCarousel({
         }
       }
     ),
-    mergeRequests.length >= 1 ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_react_native38.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_native39.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,
@@ -4894,7 +4975,7 @@ function ReviewMergeRequestCarousel({
         extrapolate: "clamp"
       });
       return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
-        import_react_native38.Animated.View,
+        import_react_native39.Animated.View,
         {
           style: {
             width: 8,
@@ -4928,7 +5009,7 @@ function PreviewCollaborateSection({
   onTestMr
 }) {
   const theme = useTheme();
-  const [submittingMr, setSubmittingMr] = React28.useState(false);
+  const [submittingMr, setSubmittingMr] = React29.useState(false);
   const hasSection = canSubmitMergeRequest || incomingMergeRequests.length > 0 || outgoingMergeRequests.length > 0;
   if (!hasSection) return null;
   const showActionsSubtitle = canSubmitMergeRequest && onSubmitMergeRequest || onTestMr && incomingMergeRequests.length > 0;
@@ -4955,7 +5036,7 @@ function PreviewCollaborateSection({
         accessibilityLabel: "Submit merge request",
         disabled: submittingMr,
         onPress: () => {
-          import_react_native39.Alert.alert(
+          import_react_native40.Alert.alert(
             "Submit Merge Request",
             "Are you sure you want to submit your changes to the original app?",
             [
@@ -4981,7 +5062,7 @@ function PreviewCollaborateSection({
           marginBottom: theme.spacing.sm
         },
         left: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
-          import_react_native39.View,
+          import_react_native40.View,
           {
             style: {
               width: 40,
@@ -4992,7 +5073,7 @@ function PreviewCollaborateSection({
               backgroundColor: withAlpha("#03DAC6", 0.1),
               marginRight: theme.spacing.lg
             },
-            children: submittingMr ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_react_native39.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_native40.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" }),
@@ -5030,13 +5111,13 @@ function PreviewCollaborateSection({
           children: "History"
         }
       ),
-      outgoingMergeRequests.map((mr) => /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_react_native39.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_native40.View, { style: { marginBottom: theme.spacing.sm }, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(MergeRequestStatusCard, { mergeRequest: toMergeRequestSummary(mr) }) }, mr.id))
     ] }) : null
   ] });
 }
 
 // src/studio/ui/preview-panel/usePreviewPanelData.ts
-var React30 = __toESM(require("react"));
+var React31 = __toESM(require("react"));
 
 // src/data/apps/images/remote.ts
 var AppImagesRemoteDataSourceImpl = class extends BaseRemote {
@@ -5087,7 +5168,7 @@ var AppImagesRepositoryImpl = class extends BaseRepository {
 var appImagesRepository = new AppImagesRepositoryImpl(appImagesRemoteDataSource);
 
 // src/studio/hooks/useAppStats.ts
-var React29 = __toESM(require("react"));
+var React30 = __toESM(require("react"));
 var Haptics2 = __toESM(require("expo-haptics"));
 
 // src/data/likes/remote.ts
@@ -5156,34 +5237,34 @@ function useAppStats({
   initialIsLiked = false,
   onOpenComments
 }) {
-  const [likeCount, setLikeCount] = React29.useState(initialLikes);
-  const [commentCount, setCommentCount] = React29.useState(initialComments);
-  const [forkCount, setForkCount] = React29.useState(initialForks);
-  const [isLiked, setIsLiked] = React29.useState(initialIsLiked);
-  const didMutateRef = React29.useRef(false);
-  const lastAppIdRef = React29.useRef("");
-  React29.useEffect(() => {
+  const [likeCount, setLikeCount] = React30.useState(initialLikes);
+  const [commentCount, setCommentCount] = React30.useState(initialComments);
+  const [forkCount, setForkCount] = React30.useState(initialForks);
+  const [isLiked, setIsLiked] = React30.useState(initialIsLiked);
+  const didMutateRef = React30.useRef(false);
+  const lastAppIdRef = React30.useRef("");
+  React30.useEffect(() => {
     if (lastAppIdRef.current === appId) return;
     lastAppIdRef.current = appId;
     didMutateRef.current = false;
   }, [appId]);
-  React29.useEffect(() => {
+  React30.useEffect(() => {
     if (didMutateRef.current) return;
     setLikeCount(initialLikes);
   }, [appId, initialLikes]);
-  React29.useEffect(() => {
+  React30.useEffect(() => {
     if (didMutateRef.current) return;
     setCommentCount(initialComments);
   }, [appId, initialComments]);
-  React29.useEffect(() => {
+  React30.useEffect(() => {
     if (didMutateRef.current) return;
     setForkCount(initialForks);
   }, [appId, initialForks]);
-  React29.useEffect(() => {
+  React30.useEffect(() => {
     if (didMutateRef.current) return;
     setIsLiked(initialIsLiked);
   }, [appId, initialIsLiked]);
-  const handleLike = React29.useCallback(async () => {
+  const handleLike = React30.useCallback(async () => {
     var _a, _b;
     if (!appId) return;
     didMutateRef.current = true;
@@ -5207,7 +5288,7 @@ function useAppStats({
       setLikeCount((prev) => Math.max(0, prev + (newIsLiked ? -1 : 1)));
     }
   }, [appId, isLiked, likeCount]);
-  const handleOpenComments = React29.useCallback(() => {
+  const handleOpenComments = React30.useCallback(() => {
     if (!appId) return;
     try {
       void Haptics2.impactAsync(Haptics2.ImpactFeedbackStyle.Light);
@@ -5222,11 +5303,11 @@ function useAppStats({
 var LIKE_DEBUG_PREFIX = "[COMERGE_LIKE_DEBUG]";
 function usePreviewPanelData(params) {
   const { app, isOwner, outgoingMergeRequests, onOpenComments, commentCountOverride } = params;
-  const [imageUrl, setImageUrl] = React30.useState(null);
-  const [imageLoaded, setImageLoaded] = React30.useState(false);
-  const [insights, setInsights] = React30.useState({ likes: 0, comments: 0, forks: 0, downloads: 0 });
-  const [creator, setCreator] = React30.useState(null);
-  React30.useEffect(() => {
+  const [imageUrl, setImageUrl] = React31.useState(null);
+  const [imageLoaded, setImageLoaded] = React31.useState(false);
+  const [insights, setInsights] = React31.useState({ likes: 0, comments: 0, forks: 0, downloads: 0 });
+  const [creator, setCreator] = React31.useState(null);
+  React31.useEffect(() => {
     if (!(app == null ? void 0 : app.id)) return;
     let cancelled = false;
     (async () => {
@@ -5241,7 +5322,7 @@ function usePreviewPanelData(params) {
       cancelled = true;
     };
   }, [app == null ? void 0 : app.id]);
-  React30.useEffect(() => {
+  React31.useEffect(() => {
     if (!(app == null ? void 0 : app.createdBy)) return;
     let cancelled = false;
     (async () => {
@@ -5257,10 +5338,10 @@ function usePreviewPanelData(params) {
       cancelled = true;
     };
   }, [app == null ? void 0 : app.createdBy]);
-  React30.useEffect(() => {
+  React31.useEffect(() => {
     setImageLoaded(false);
   }, [app == null ? void 0 : app.id]);
-  React30.useEffect(() => {
+  React31.useEffect(() => {
     if (!(app == null ? void 0 : app.id)) return;
     let cancelled = false;
     (async () => {
@@ -5285,7 +5366,7 @@ function usePreviewPanelData(params) {
       cancelled = true;
     };
   }, [app == null ? void 0 : app.id]);
-  React30.useEffect(() => {
+  React31.useEffect(() => {
     if (!(app == null ? void 0 : app.id)) return;
     log.debug(
       `${LIKE_DEBUG_PREFIX} usePreviewPanelData.appChanged appId=${app.id} app.isLiked=${String(app.isLiked)}`
@@ -5299,7 +5380,7 @@ function usePreviewPanelData(params) {
     initialIsLiked: Boolean(app == null ? void 0 : app.isLiked),
     onOpenComments
   });
-  const canSubmitMergeRequest = React30.useMemo(() => {
+  const canSubmitMergeRequest = React31.useMemo(() => {
     if (!isOwner) return false;
     if (!app) return false;
     if (!app.forkedFromAppId) return false;
@@ -5354,9 +5435,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_native40.View, { style: { flex: 1, justifyContent: "center", alignItems: "center", padding: 24 }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_react_native40.ActivityIndicator, {}),
-      /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_react_native40.View, { style: { height: 12 } }),
+    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 } }),
       /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Text, { variant: "bodyMuted", children: "Loading app\u2026" })
     ] }) });
   }
@@ -5412,22 +5493,22 @@ function PreviewPanel({
 }
 
 // src/studio/ui/ChatPanel.tsx
-var React35 = __toESM(require("react"));
-var import_react_native48 = require("react-native");
+var React36 = __toESM(require("react"));
+var import_react_native49 = require("react-native");
 
 // src/components/chat/ChatPage.tsx
-var React33 = __toESM(require("react"));
-var import_react_native44 = require("react-native");
+var React34 = __toESM(require("react"));
+var import_react_native45 = require("react-native");
 var import_react_native_safe_area_context4 = require("react-native-safe-area-context");
 var import_react_native_reanimated2 = __toESM(require("react-native-reanimated"));
 
 // src/components/chat/ChatMessageList.tsx
-var React32 = __toESM(require("react"));
-var import_react_native43 = require("react-native");
+var React33 = __toESM(require("react"));
+var import_react_native44 = require("react-native");
 var import_bottom_sheet5 = require("@gorhom/bottom-sheet");
 
 // src/components/chat/ChatMessageBubble.tsx
-var import_react_native41 = require("react-native");
+var import_react_native42 = 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 }) {
@@ -5443,7 +5524,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_native41.View, { style: [align, style], children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_react_native42.View, { style: [align, style], children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
     Surface,
     {
       variant: bubbleVariant,
@@ -5458,34 +5539,34 @@ function ChatMessageBubble({ message, renderContent, style }) {
         },
         cornerStyle
       ],
-      children: /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_react_native41.View, { style: { flexDirection: "row", alignItems: "center" }, children: [
+      children: /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_react_native42.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_native41.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_native42.View, { style: { flexShrink: 1, minWidth: 0 }, children: renderContent ? renderContent(message) : /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(MarkdownText, { markdown: message.content, variant: "chat", bodyColor }) })
       ] })
     }
   ) });
 }
 
 // src/components/chat/TypingIndicator.tsx
-var React31 = __toESM(require("react"));
-var import_react_native42 = require("react-native");
+var React32 = __toESM(require("react"));
+var import_react_native43 = require("react-native");
 var import_jsx_runtime45 = require("react/jsx-runtime");
 function TypingIndicator({ style }) {
   const theme = useTheme();
   const dotColor = theme.colors.textSubtle;
-  const anims = React31.useMemo(
-    () => [new import_react_native42.Animated.Value(0.3), new import_react_native42.Animated.Value(0.3), new import_react_native42.Animated.Value(0.3)],
+  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)],
     []
   );
-  React31.useEffect(() => {
+  React32.useEffect(() => {
     const loops = [];
     anims.forEach((a, idx) => {
-      const seq = import_react_native42.Animated.sequence([
-        import_react_native42.Animated.timing(a, { toValue: 1, duration: 420, useNativeDriver: true, delay: idx * 140 }),
-        import_react_native42.Animated.timing(a, { toValue: 0.3, duration: 420, useNativeDriver: true })
+      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 loop = import_react_native42.Animated.loop(seq);
+      const loop = import_react_native43.Animated.loop(seq);
       loops.push(loop);
       loop.start();
     });
@@ -5493,8 +5574,8 @@ function TypingIndicator({ style }) {
       loops.forEach((l) => l.stop());
     };
   }, [anims]);
-  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_react_native42.View, { style: [{ flexDirection: "row", alignItems: "center" }, style], children: anims.map((a, i) => /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
-    import_react_native42.Animated.View,
+  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,
     {
       style: {
         width: 8,
@@ -5503,7 +5584,7 @@ function TypingIndicator({ style }) {
         marginHorizontal: 3,
         backgroundColor: dotColor,
         opacity: a,
-        transform: [{ translateY: import_react_native42.Animated.multiply(import_react_native42.Animated.subtract(a, 0.3), 2) }]
+        transform: [{ translateY: import_react_native43.Animated.multiply(import_react_native43.Animated.subtract(a, 0.3), 2) }]
       }
     },
     i
@@ -5512,39 +5593,43 @@ function TypingIndicator({ style }) {
 
 // src/components/chat/ChatMessageList.tsx
 var import_jsx_runtime46 = require("react/jsx-runtime");
-var ChatMessageList = React32.forwardRef(
+var ChatMessageList = React33.forwardRef(
   ({
     messages,
     showTypingIndicator = false,
     renderMessageContent,
     contentStyle,
+    bottomInset = 0,
     onNearBottomChange,
     nearBottomThreshold = 200
   }, ref) => {
     const theme = useTheme();
-    const listRef = React32.useRef(null);
-    const nearBottomRef = React32.useRef(true);
-    const initialScrollDoneRef = React32.useRef(false);
-    const lastMessageIdRef = React32.useRef(null);
-    const scrollToBottom = React32.useCallback((options) => {
+    const listRef = React33.useRef(null);
+    const nearBottomRef = React33.useRef(true);
+    const initialScrollDoneRef = React33.useRef(false);
+    const lastMessageIdRef = React33.useRef(null);
+    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 });
     }, []);
-    React32.useImperativeHandle(ref, () => ({ scrollToBottom }), [scrollToBottom]);
-    const handleScroll = React32.useCallback(
+    React33.useImperativeHandle(ref, () => ({ scrollToBottom }), [scrollToBottom]);
+    const handleScroll = React33.useCallback(
       (e) => {
         const { contentOffset, contentSize, layoutMeasurement } = e.nativeEvent;
-        const distanceFromBottom = Math.max(contentSize.height - (contentOffset.y + layoutMeasurement.height), 0);
+        const distanceFromBottom = Math.max(
+          contentSize.height - Math.max(bottomInset, 0) - (contentOffset.y + layoutMeasurement.height),
+          0
+        );
         const isNear = distanceFromBottom <= nearBottomThreshold;
         if (nearBottomRef.current !== isNear) {
           nearBottomRef.current = isNear;
           onNearBottomChange == null ? void 0 : onNearBottomChange(isNear);
         }
       },
-      [nearBottomThreshold, onNearBottomChange]
+      [bottomInset, nearBottomThreshold, onNearBottomChange]
     );
-    React32.useEffect(() => {
+    React33.useEffect(() => {
       var _a;
       if (initialScrollDoneRef.current) return;
       if (messages.length === 0) return;
@@ -5553,7 +5638,7 @@ var ChatMessageList = React32.forwardRef(
       const id = requestAnimationFrame(() => scrollToBottom({ animated: false }));
       return () => cancelAnimationFrame(id);
     }, [messages, scrollToBottom]);
-    React32.useEffect(() => {
+    React33.useEffect(() => {
       if (!initialScrollDoneRef.current) return;
       const lastId = messages.length > 0 ? messages[messages.length - 1].id : null;
       const prevLastId = lastMessageIdRef.current;
@@ -5563,13 +5648,19 @@ var ChatMessageList = React32.forwardRef(
       const id = requestAnimationFrame(() => scrollToBottom({ animated: true }));
       return () => cancelAnimationFrame(id);
     }, [messages, scrollToBottom]);
-    React32.useEffect(() => {
+    React33.useEffect(() => {
       if (showTypingIndicator && nearBottomRef.current) {
         const id = requestAnimationFrame(() => scrollToBottom({ animated: true }));
         return () => cancelAnimationFrame(id);
       }
       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,
       {
@@ -5583,13 +5674,15 @@ var ChatMessageList = React32.forwardRef(
           {
             paddingHorizontal: theme.spacing.lg,
             paddingTop: theme.spacing.sm,
-            paddingBottom: theme.spacing.xl
+            paddingBottom: theme.spacing.sm
           },
           contentStyle
         ],
-        renderItem: ({ item, index }) => /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_react_native43.View, { style: { marginTop: index === 0 ? 0 : theme.spacing.sm }, children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(ChatMessageBubble, { message: item, renderContent: renderMessageContent }) }),
-        ListFooterComponent: showTypingIndicator ? /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_react_native43.View, { style: { marginTop: theme.spacing.sm, alignSelf: "flex-start", paddingHorizontal: theme.spacing.lg }, children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(TypingIndicator, {}) }) : null,
-        maintainVisibleContentPosition: { minIndexForVisible: 0, autoscrollToTopThreshold: nearBottomThreshold }
+        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
+        ] })
       }
     );
   }
@@ -5612,37 +5705,38 @@ function ChatPage({
 }) {
   const theme = useTheme();
   const insets = (0, import_react_native_safe_area_context4.useSafeAreaInsets)();
-  const [composerHeight, setComposerHeight] = React33.useState(0);
-  const [keyboardVisible, setKeyboardVisible] = React33.useState(false);
+  const [composerHeight, setComposerHeight] = React34.useState(0);
+  const [keyboardVisible, setKeyboardVisible] = React34.useState(false);
   const animatedKeyboard = (0, import_react_native_reanimated2.useAnimatedKeyboard)();
-  React33.useEffect(() => {
-    if (import_react_native44.Platform.OS !== "ios") return;
-    const show = import_react_native44.Keyboard.addListener("keyboardWillShow", () => setKeyboardVisible(true));
-    const hide = import_react_native44.Keyboard.addListener("keyboardWillHide", () => setKeyboardVisible(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));
     return () => {
       show.remove();
       hide.remove();
     };
   }, []);
-  const footerBottomPadding = import_react_native44.Platform.OS === "ios" ? keyboardVisible ? 0 : insets.bottom : insets.bottom + 10;
+  const footerBottomPadding = import_react_native45.Platform.OS === "ios" ? keyboardVisible ? 0 : insets.bottom : insets.bottom + 10;
   const footerAnimatedStyle = (0, import_react_native_reanimated2.useAnimatedStyle)(() => {
-    if (import_react_native44.Platform.OS !== "ios") return { paddingBottom: insets.bottom + 10 };
+    if (import_react_native45.Platform.OS !== "ios") return { paddingBottom: insets.bottom + 10 };
     return { paddingBottom: animatedKeyboard.height.value > 0 ? 0 : insets.bottom };
   });
   const overlayBottom = composerHeight + footerBottomPadding + theme.spacing.lg;
-  const resolvedOverlay = React33.useMemo(() => {
+  const bottomInset = composerHeight + footerBottomPadding + theme.spacing.xl;
+  const resolvedOverlay = React34.useMemo(() => {
     var _a;
     if (!overlay) return null;
-    if (!React33.isValidElement(overlay)) return overlay;
+    if (!React34.isValidElement(overlay)) return overlay;
     const prevStyle = (_a = overlay.props) == null ? void 0 : _a.style;
-    return React33.cloneElement(overlay, {
+    return React34.cloneElement(overlay, {
       style: [prevStyle, { bottom: overlayBottom }]
     });
   }, [overlay, overlayBottom]);
-  return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(import_react_native44.View, { style: [{ flex: 1 }, style], children: [
-    header ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_react_native44.View, { children: header }) : null,
-    topBanner ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_react_native44.View, { style: { paddingHorizontal: theme.spacing.lg, paddingTop: theme.spacing.sm }, children: topBanner }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(import_react_native44.View, { style: { flex: 1 }, children: [
+  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: [
       /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
         ChatMessageList,
         {
@@ -5651,7 +5745,7 @@ function ChatPage({
           showTypingIndicator,
           renderMessageContent,
           onNearBottomChange,
-          contentStyle: { paddingBottom: theme.spacing.xl + composerHeight + footerBottomPadding }
+          bottomInset
         }
       ),
       resolvedOverlay,
@@ -5684,15 +5778,15 @@ function ChatPage({
 }
 
 // src/components/chat/ScrollToBottomButton.tsx
-var React34 = __toESM(require("react"));
-var import_react_native45 = require("react-native");
+var React35 = __toESM(require("react"));
+var import_react_native46 = require("react-native");
 var import_react_native_reanimated3 = __toESM(require("react-native-reanimated"));
 var import_jsx_runtime48 = require("react/jsx-runtime");
 function ScrollToBottomButton({ visible, onPress, children, style }) {
   const theme = useTheme();
   const progress = (0, import_react_native_reanimated3.useSharedValue)(visible ? 1 : 0);
-  const [pressed, setPressed] = React34.useState(false);
-  React34.useEffect(() => {
+  const [pressed, setPressed] = React35.useState(false);
+  React35.useEffect(() => {
     progress.value = (0, import_react_native_reanimated3.withTiming)(visible ? 1 : 0, { duration: 200, easing: import_react_native_reanimated3.Easing.out(import_react_native_reanimated3.Easing.ease) });
   }, [progress, visible]);
   const animStyle = (0, import_react_native_reanimated3.useAnimatedStyle)(() => ({
@@ -5716,7 +5810,7 @@ function ScrollToBottomButton({ visible, onPress, children, style }) {
         animStyle
       ],
       children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
-        import_react_native45.View,
+        import_react_native46.View,
         {
           style: {
             width: 44,
@@ -5735,7 +5829,7 @@ function ScrollToBottomButton({ visible, onPress, children, style }) {
             opacity: pressed ? 0.85 : 1
           },
           children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
-            import_react_native45.Pressable,
+            import_react_native46.Pressable,
             {
               onPress,
               onPressIn: () => setPressed(true),
@@ -5752,10 +5846,10 @@ function ScrollToBottomButton({ visible, onPress, children, style }) {
 }
 
 // src/components/chat/ChatHeader.tsx
-var import_react_native46 = require("react-native");
+var import_react_native47 = require("react-native");
 var import_jsx_runtime49 = require("react/jsx-runtime");
 function ChatHeader({ left, right, center, style }) {
-  const flattenedStyle = import_react_native46.StyleSheet.flatten([
+  const flattenedStyle = import_react_native47.StyleSheet.flatten([
     {
       paddingTop: 0
     },
@@ -5773,7 +5867,7 @@ function ChatHeader({ left, right, center, style }) {
 }
 
 // src/components/chat/ForkNoticeBanner.tsx
-var import_react_native47 = require("react-native");
+var import_react_native48 = require("react-native");
 var import_jsx_runtime50 = require("react/jsx-runtime");
 function ForkNoticeBanner({ isOwner = true, title, description, style }) {
   const theme = useTheme();
@@ -5794,7 +5888,7 @@ function ForkNoticeBanner({ isOwner = true, title, description, style }) {
         },
         style
       ],
-      children: /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(import_react_native47.View, { style: { minWidth: 0 }, children: [
+      children: /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(import_react_native48.View, { style: { minWidth: 0 }, children: [
         /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
           Text,
           {
@@ -5847,32 +5941,34 @@ function ChatPanel({
   onStartDraw,
   onSend
 }) {
-  const listRef = React35.useRef(null);
-  const [nearBottom, setNearBottom] = React35.useState(true);
-  const handleSend = React35.useCallback(
+  const listRef = React36.useRef(null);
+  const [nearBottom, setNearBottom] = React36.useState(true);
+  const handleSend = React36.useCallback(
     async (text, composerAttachments) => {
       const all = composerAttachments ?? attachments;
       await onSend(text, all.length > 0 ? all : void 0);
       onClearAttachments == null ? void 0 : onClearAttachments();
-      requestAnimationFrame(() => {
-        var _a;
-        return (_a = listRef.current) == null ? void 0 : _a.scrollToBottom({ animated: true });
-      });
+      if (!nearBottom) {
+        requestAnimationFrame(() => {
+          var _a;
+          return (_a = listRef.current) == null ? void 0 : _a.scrollToBottom({ animated: true });
+        });
+      }
     },
-    [attachments, onClearAttachments, onSend]
+    [attachments, nearBottom, onClearAttachments, onSend]
   );
-  const handleScrollToBottom = React35.useCallback(() => {
+  const handleScrollToBottom = React36.useCallback(() => {
     var _a;
     (_a = listRef.current) == null ? void 0 : _a.scrollToBottom({ animated: true });
   }, []);
   const header = /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
     ChatHeader,
     {
-      left: /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(import_react_native48.View, { style: { flexDirection: "row", alignItems: "center" }, children: [
+      left: /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(import_react_native49.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_native48.View, { style: { flexDirection: "row", alignItems: "center" }, children: [
+      right: /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(import_react_native49.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" }) })
       ] }),
@@ -5888,12 +5984,12 @@ function ChatPanel({
   ) : null;
   const showMessagesLoading = Boolean(loading) && messages.length === 0 || forking;
   if (showMessagesLoading) {
-    return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(import_react_native48.View, { style: { flex: 1 }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_react_native48.View, { children: header }),
-      topBanner ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_react_native48.View, { style: { paddingHorizontal: 16, paddingTop: 8 }, children: topBanner }) : null,
-      /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(import_react_native48.View, { style: { flex: 1, alignItems: "center", justifyContent: "center", paddingHorizontal: 24, paddingVertical: 12 }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_react_native48.ActivityIndicator, {}),
-        /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_react_native48.View, { style: { height: 12 } }),
+    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 } }),
         /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Text, { variant: "bodyMuted", children: forking ? "Creating your copy\u2026" : "Loading messages\u2026" })
       ] })
     ] });
@@ -5917,7 +6013,10 @@ function ChatPanel({
         }
       ),
       composer: {
-        disabled: Boolean(loading) || Boolean(sendDisabled) || Boolean(forking),
+        // Keep the input editable even when sending is disallowed (e.g. agent still working),
+        // otherwise iOS will drop focus/keyboard and BottomSheet can get "stuck" with a keyboard-sized gap.
+        disabled: Boolean(loading) || Boolean(forking),
+        sendDisabled: Boolean(sendDisabled) || Boolean(loading) || Boolean(forking),
         sending: Boolean(sending),
         autoFocus: autoFocusComposer,
         onSend: handleSend,
@@ -5931,11 +6030,11 @@ function ChatPanel({
 }
 
 // src/components/dialogs/ConfirmMergeRequestDialog.tsx
-var React36 = __toESM(require("react"));
-var import_react_native50 = require("react-native");
+var React37 = __toESM(require("react"));
+var import_react_native51 = require("react-native");
 
 // src/components/primitives/Modal.tsx
-var import_react_native49 = require("react-native");
+var import_react_native50 = require("react-native");
 var import_jsx_runtime52 = require("react/jsx-runtime");
 function Modal({
   visible,
@@ -5946,15 +6045,15 @@ function Modal({
 }) {
   const theme = useTheme();
   return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
-    import_react_native49.Modal,
+    import_react_native50.Modal,
     {
       visible,
       transparent: true,
       animationType: "fade",
       onRequestClose,
-      children: /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(import_react_native49.View, { style: { flex: 1, backgroundColor: theme.colors.backdrop, justifyContent: "center", padding: theme.spacing.lg }, children: [
+      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: [
         /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
-          import_react_native49.Pressable,
+          import_react_native50.Pressable,
           {
             accessibilityRole: "button",
             onPress: dismissOnBackdropPress ? onRequestClose : void 0,
@@ -5979,14 +6078,14 @@ function ConfirmMergeRequestDialog({
   onTestFirst
 }) {
   const theme = useTheme();
-  const close = React36.useCallback(() => onOpenChange(false), [onOpenChange]);
+  const close = React37.useCallback(() => onOpenChange(false), [onOpenChange]);
   const canConfirm = Boolean(mergeRequest) && !approveDisabled;
-  const handleConfirm = React36.useCallback(() => {
+  const handleConfirm = React37.useCallback(() => {
     if (!mergeRequest) return;
     onOpenChange(false);
     void onConfirm();
   }, [mergeRequest, onConfirm, onOpenChange]);
-  const handleTestFirst = React36.useCallback(() => {
+  const handleTestFirst = React37.useCallback(() => {
     if (!mergeRequest) return;
     onOpenChange(false);
     void onTestFirst(mergeRequest);
@@ -6009,7 +6108,7 @@ function ConfirmMergeRequestDialog({
         backgroundColor: theme.colors.background
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_react_native50.View, { children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_react_native51.View, { children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
           Text,
           {
             style: {
@@ -6021,9 +6120,9 @@ function ConfirmMergeRequestDialog({
             children: "Are you sure you want to approve this merge request?"
           }
         ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(import_react_native50.View, { style: { marginTop: 16 }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(import_react_native51.View, { style: { marginTop: 16 }, children: [
           /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
-            import_react_native50.View,
+            import_react_native51.View,
             {
               style: [
                 fullWidthButtonBase,
@@ -6033,7 +6132,7 @@ function ConfirmMergeRequestDialog({
                 }
               ],
               children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
-                import_react_native50.Pressable,
+                import_react_native51.Pressable,
                 {
                   accessibilityRole: "button",
                   accessibilityLabel: "Approve Merge",
@@ -6045,9 +6144,9 @@ function ConfirmMergeRequestDialog({
               )
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_react_native50.View, { style: { height: 8 } }),
+          /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_react_native51.View, { style: { height: 8 } }),
           /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
-            import_react_native50.View,
+            import_react_native51.View,
             {
               style: [
                 fullWidthButtonBase,
@@ -6059,7 +6158,7 @@ function ConfirmMergeRequestDialog({
                 }
               ],
               children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
-                import_react_native50.Pressable,
+                import_react_native51.Pressable,
                 {
                   accessibilityRole: "button",
                   accessibilityLabel: isBuilding ? "Preparing\u2026" : "Test edits first",
@@ -6071,9 +6170,9 @@ function ConfirmMergeRequestDialog({
               )
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_react_native50.View, { style: { height: 8 } }),
+          /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_react_native51.View, { style: { height: 8 } }),
           /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
-            import_react_native50.View,
+            import_react_native51.View,
             {
               style: [
                 fullWidthButtonBase,
@@ -6084,7 +6183,7 @@ function ConfirmMergeRequestDialog({
                 }
               ],
               children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
-                import_react_native50.Pressable,
+                import_react_native51.Pressable,
                 {
                   accessibilityRole: "button",
                   accessibilityLabel: "Cancel",
@@ -6165,30 +6264,30 @@ function StudioOverlay({
   onNavigateHome
 }) {
   const theme = useTheme();
-  const { width } = (0, import_react_native51.useWindowDimensions)();
-  const [sheetOpen, setSheetOpen] = React37.useState(false);
-  const [activePage, setActivePage] = React37.useState("preview");
-  const [drawing, setDrawing] = React37.useState(false);
-  const [chatAttachments, setChatAttachments] = React37.useState([]);
-  const [commentsAppId, setCommentsAppId] = React37.useState(null);
-  const [commentsCount, setCommentsCount] = React37.useState(null);
-  const [confirmMrId, setConfirmMrId] = React37.useState(null);
-  const confirmMr = React37.useMemo(
+  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(
     () => confirmMrId ? incomingMergeRequests.find((m) => m.id === confirmMrId) ?? null : null,
     [confirmMrId, incomingMergeRequests]
   );
-  const closeSheet = React37.useCallback(() => {
+  const closeSheet = React38.useCallback(() => {
     setSheetOpen(false);
-    import_react_native51.Keyboard.dismiss();
+    import_react_native52.Keyboard.dismiss();
   }, []);
-  const openSheet = React37.useCallback(() => setSheetOpen(true), []);
-  const goToChat = React37.useCallback(() => {
+  const openSheet = React38.useCallback(() => setSheetOpen(true), []);
+  const goToChat = React38.useCallback(() => {
     setActivePage("chat");
     openSheet();
   }, [openSheet]);
-  const backToPreview = React37.useCallback(() => {
-    if (import_react_native51.Platform.OS !== "ios") {
-      import_react_native51.Keyboard.dismiss();
+  const backToPreview = React38.useCallback(() => {
+    if (import_react_native52.Platform.OS !== "ios") {
+      import_react_native52.Keyboard.dismiss();
       setActivePage("preview");
       return;
     }
@@ -6200,15 +6299,15 @@ function StudioOverlay({
       clearTimeout(t);
       setActivePage("preview");
     };
-    const sub = import_react_native51.Keyboard.addListener("keyboardDidHide", finalize);
+    const sub = import_react_native52.Keyboard.addListener("keyboardDidHide", finalize);
     const t = setTimeout(finalize, 350);
-    import_react_native51.Keyboard.dismiss();
+    import_react_native52.Keyboard.dismiss();
   }, []);
-  const startDraw = React37.useCallback(() => {
+  const startDraw = React38.useCallback(() => {
     setDrawing(true);
     closeSheet();
   }, [closeSheet]);
-  const handleDrawCapture = React37.useCallback(
+  const handleDrawCapture = React38.useCallback(
     (dataUrl) => {
       setChatAttachments((prev) => [...prev, dataUrl]);
       setDrawing(false);
@@ -6217,7 +6316,7 @@ function StudioOverlay({
     },
     [openSheet]
   );
-  const toggleSheet = React37.useCallback(async () => {
+  const toggleSheet = React38.useCallback(async () => {
     if (!sheetOpen) {
       const shouldExitTest = Boolean(testingMrId) || isTesting;
       if (shouldExitTest) {
@@ -6229,7 +6328,7 @@ function StudioOverlay({
       closeSheet();
     }
   }, [closeSheet, isTesting, onRestoreBase, sheetOpen, testingMrId]);
-  const handleTestMr = React37.useCallback(
+  const handleTestMr = React38.useCallback(
     async (mr) => {
       if (!onTestMr) return;
       await onTestMr(mr);
@@ -6301,7 +6400,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_native51.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_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 }) })
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
@@ -6347,16 +6446,16 @@ function ComergeStudio({
   onNavigateHome,
   style
 }) {
-  const [activeAppId, setActiveAppId] = React38.useState(appId);
-  const [runtimeAppId, setRuntimeAppId] = React38.useState(appId);
-  const [pendingRuntimeTargetAppId, setPendingRuntimeTargetAppId] = React38.useState(null);
-  const platform = React38.useMemo(() => import_react_native52.Platform.OS === "ios" ? "ios" : "android", []);
-  React38.useEffect(() => {
+  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(() => {
     setActiveAppId(appId);
     setRuntimeAppId(appId);
     setPendingRuntimeTargetAppId(null);
   }, [appId]);
-  const captureTargetRef = React38.useRef(null);
+  const captureTargetRef = React39.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,
     {
@@ -6392,11 +6491,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 = React38.useRef(false);
-  React38.useEffect(() => {
+  const sawEditingOnPendingTargetRef = React39.useRef(false);
+  React39.useEffect(() => {
     sawEditingOnPendingTargetRef.current = false;
   }, [pendingRuntimeTargetAppId]);
-  React38.useEffect(() => {
+  React39.useEffect(() => {
     if (!pendingRuntimeTargetAppId) return;
     if (activeAppId !== pendingRuntimeTargetAppId) return;
     if ((app == null ? void 0 : app.status) === "editing") {
@@ -6416,10 +6515,10 @@ function ComergeStudioInner({
   const threadId = (app == null ? void 0 : app.threadId) ?? "";
   const thread = useThreadMessages(threadId);
   const mergeRequests = useMergeRequests({ appId: activeAppId });
-  const hasOpenOutgoingMr = React38.useMemo(() => {
+  const hasOpenOutgoingMr = React39.useMemo(() => {
     return mergeRequests.lists.outgoing.some((mr) => mr.status === "open");
   }, [mergeRequests.lists.outgoing]);
-  const incomingReviewMrs = React38.useMemo(() => {
+  const incomingReviewMrs = React39.useMemo(() => {
     if (!userId) return mergeRequests.lists.incoming;
     return mergeRequests.lists.incoming.filter((mr) => mr.createdBy !== userId);
   }, [mergeRequests.lists.incoming, userId]);
@@ -6441,16 +6540,16 @@ function ComergeStudioInner({
     uploadAttachments: uploader.uploadBase64Images
   });
   const chatSendDisabled = hasNoOutcomeAfterLastHuman(thread.raw);
-  const [processingMrId, setProcessingMrId] = React38.useState(null);
-  const [testingMrId, setTestingMrId] = React38.useState(null);
-  const chatShowTypingIndicator = React38.useMemo(() => {
+  const [processingMrId, setProcessingMrId] = React39.useState(null);
+  const [testingMrId, setTestingMrId] = React39.useState(null);
+  const chatShowTypingIndicator = React39.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_native52.View, { style: [{ flex: 1 }, style], children: /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(import_react_native52.View, { ref: captureTargetRef, style: { flex: 1 }, collapsable: false, children: [
+  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 }),
     /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
       StudioOverlay,