@comergehq/studio 0.1.9 → 0.1.11

package/dist/index.mjs

@@ -6,7 +6,7 @@ var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require
 });
 
 // src/studio/ComergeStudio.tsx
-import * as React39 from "react";
+import * as React42 from "react";
 import { Platform as RNPlatform, View as View45 } from "react-native";
 import { BottomSheetModalProvider } from "@gorhom/bottom-sheet";
 
@@ -952,6 +952,39 @@ var BundlesRepositoryImpl = class extends BaseRepository {
 var bundlesRepository = new BundlesRepositoryImpl(bundlesRemoteDataSource);
 
 // src/studio/hooks/useBundleManager.ts
+function sleep(ms) {
+  return new Promise((r) => setTimeout(r, ms));
+}
+function isRetryableNetworkError(e) {
+  var _a;
+  const err = e;
+  const code = typeof (err == null ? void 0 : err.code) === "string" ? err.code : "";
+  const message = typeof (err == null ? void 0 : err.message) === "string" ? err.message : "";
+  if (code === "ERR_NETWORK" || code === "ECONNABORTED") return true;
+  if (message.toLowerCase().includes("network error")) return true;
+  if (message.toLowerCase().includes("timeout")) return true;
+  const status = typeof ((_a = err == null ? void 0 : err.response) == null ? void 0 : _a.status) === "number" ? err.response.status : void 0;
+  if (status && (status === 429 || status >= 500)) return true;
+  return false;
+}
+async function withRetry(fn, opts) {
+  let lastErr = null;
+  for (let attempt = 1; attempt <= opts.attempts; attempt += 1) {
+    try {
+      return await fn();
+    } catch (e) {
+      lastErr = e;
+      const retryable = isRetryableNetworkError(e);
+      if (!retryable || attempt >= opts.attempts) {
+        throw e;
+      }
+      const exp = Math.min(opts.maxDelayMs, opts.baseDelayMs * Math.pow(2, attempt - 1));
+      const jitter = Math.floor(Math.random() * 250);
+      await sleep(exp + jitter);
+    }
+  }
+  throw lastErr;
+}
 function safeName(s) {
   return s.replace(/[^a-zA-Z0-9._-]/g, "_");
 }
@@ -1009,8 +1042,16 @@ async function getExistingNonEmptyFileUri(fileUri) {
 async function downloadIfMissing(url, fileUri) {
   const existing = await getExistingNonEmptyFileUri(fileUri);
   if (existing) return existing;
-  const res = await FileSystem.downloadAsync(url, fileUri);
-  return res.uri;
+  return await withRetry(
+    async () => {
+      await deleteFileIfExists(fileUri);
+      const res = await FileSystem.downloadAsync(url, fileUri);
+      const ok = await getExistingNonEmptyFileUri(res.uri);
+      if (!ok) throw new Error("Downloaded bundle is empty.");
+      return res.uri;
+    },
+    { attempts: 3, baseDelayMs: 500, maxDelayMs: 4e3 }
+  );
 }
 async function deleteFileIfExists(fileUri) {
   try {
@@ -1024,11 +1065,15 @@ async function deleteFileIfExists(fileUri) {
 async function safeReplaceFileFromUrl(url, targetUri, tmpKey) {
   const tmpUri = toBundleFileUri(`tmp:${tmpKey}:${Date.now()}`);
   try {
-    await FileSystem.downloadAsync(url, tmpUri);
-    const tmpOk = await getExistingNonEmptyFileUri(tmpUri);
-    if (!tmpOk) {
-      throw new Error("Downloaded bundle is empty.");
-    }
+    await withRetry(
+      async () => {
+        await deleteFileIfExists(tmpUri);
+        await FileSystem.downloadAsync(url, tmpUri);
+        const tmpOk = await getExistingNonEmptyFileUri(tmpUri);
+        if (!tmpOk) throw new Error("Downloaded bundle is empty.");
+      },
+      { attempts: 3, baseDelayMs: 500, maxDelayMs: 4e3 }
+    );
     await deleteFileIfExists(targetUri);
     await FileSystem.moveAsync({ from: tmpUri, to: targetUri });
     const finalOk = await getExistingNonEmptyFileUri(targetUri);
@@ -1041,28 +1086,44 @@ async function safeReplaceFileFromUrl(url, targetUri, tmpKey) {
 async function pollBundle(appId, bundleId, opts) {
   const start = Date.now();
   while (true) {
-    const bundle = await bundlesRepository.getById(appId, bundleId);
-    if (bundle.status === "succeeded" || bundle.status === "failed") return bundle;
+    try {
+      const bundle = await bundlesRepository.getById(appId, bundleId);
+      if (bundle.status === "succeeded" || bundle.status === "failed") return bundle;
+    } catch (e) {
+      if (!isRetryableNetworkError(e)) {
+        throw e;
+      }
+    }
     if (Date.now() - start > opts.timeoutMs) {
       throw new Error("Bundle build timed out.");
     }
-    await new Promise((r) => setTimeout(r, opts.intervalMs));
+    await sleep(opts.intervalMs);
   }
 }
 async function resolveBundlePath(src, platform, mode) {
   const { appId, commitId } = src;
   const dir = bundlesCacheDir();
   await ensureDir(dir);
-  const initiate = await bundlesRepository.initiate(appId, {
-    platform,
-    commitId: commitId ?? void 0,
-    idempotencyKey: `${appId}:${commitId ?? "head"}:${platform}`
-  });
+  const initiate = await withRetry(
+    async () => {
+      return await bundlesRepository.initiate(appId, {
+        platform,
+        commitId: commitId ?? void 0,
+        idempotencyKey: `${appId}:${commitId ?? "head"}:${platform}`
+      });
+    },
+    { attempts: 3, baseDelayMs: 500, maxDelayMs: 4e3 }
+  );
   const finalBundle = initiate.status === "succeeded" || initiate.status === "failed" ? initiate : await pollBundle(appId, initiate.id, { timeoutMs: 3 * 60 * 1e3, intervalMs: 1200 });
   if (finalBundle.status === "failed") {
     throw new Error("Bundle build failed.");
   }
-  const signed = await bundlesRepository.getSignedDownloadUrl(appId, finalBundle.id, { redirect: false });
+  const signed = await withRetry(
+    async () => {
+      return await bundlesRepository.getSignedDownloadUrl(appId, finalBundle.id, { redirect: false });
+    },
+    { attempts: 3, baseDelayMs: 500, maxDelayMs: 4e3 }
+  );
   const bundlePath = mode === "base" ? await safeReplaceFileFromUrl(
     signed.url,
     toBundleFileUri(baseBundleKey(appId, platform)),
@@ -1078,6 +1139,7 @@ function useBundleManager({
   const [bundlePath, setBundlePath] = React5.useState(null);
   const [renderToken, setRenderToken] = React5.useState(0);
   const [loading, setLoading] = React5.useState(false);
+  const [loadingMode, setLoadingMode] = React5.useState(null);
   const [statusLabel, setStatusLabel] = React5.useState(null);
   const [error, setError] = React5.useState(null);
   const [isTesting, setIsTesting] = React5.useState(false);
@@ -1093,6 +1155,7 @@ function useBundleManager({
       baseOpIdRef.current += 1;
       if (activeLoadModeRef.current === "base") {
         setLoading(false);
+        setLoadingMode(null);
         setStatusLabel(null);
         activeLoadModeRef.current = null;
       }
@@ -1157,6 +1220,7 @@ function useBundleManager({
     const opId = mode === "base" ? ++baseOpIdRef.current : ++testOpIdRef.current;
     activeLoadModeRef.current = mode;
     setLoading(true);
+    setLoadingMode(mode);
     setError(null);
     setStatusLabel(mode === "test" ? "Loading test bundle\u2026" : "Loading latest build\u2026");
     if (mode === "base") {
@@ -1199,6 +1263,7 @@ function useBundleManager({
       if (mode === "base" && opId !== baseOpIdRef.current) return;
       if (mode === "test" && opId !== testOpIdRef.current) return;
       setLoading(false);
+      setLoadingMode(null);
       if (activeLoadModeRef.current === mode) activeLoadModeRef.current = null;
     }
   }, [activateCachedBase, platform]);
@@ -1220,7 +1285,7 @@ function useBundleManager({
     if (!canRequestLatest) return;
     void loadBase();
   }, [base.appId, base.commitId, platform, canRequestLatest, loadBase]);
-  return { bundlePath, renderToken, loading, statusLabel, error, isTesting, loadBase, loadTest, restoreBase };
+  return { bundlePath, renderToken, loading, loadingMode, statusLabel, error, isTesting, loadBase, loadTest, restoreBase };
 }
 
 // src/studio/hooks/useMergeRequests.ts
@@ -1479,6 +1544,8 @@ function useMergeRequests(params) {
 
 // src/studio/hooks/useAttachmentUpload.ts
 import * as React7 from "react";
+import { Platform } from "react-native";
+import * as FileSystem2 from "expo-file-system/legacy";
 
 // src/data/attachment/remote.ts
 var AttachmentRemoteDataSourceImpl = class extends BaseRemote {
@@ -1518,6 +1585,40 @@ var attachmentRepository = new AttachmentRepositoryImpl(
 );
 
 // src/studio/hooks/useAttachmentUpload.ts
+async function dataUrlToBlobAndroid(dataUrl) {
+  const normalized = dataUrl.startsWith("data:") ? dataUrl : `data:image/png;base64,${dataUrl}`;
+  const comma = normalized.indexOf(",");
+  if (comma === -1) {
+    throw new Error("Invalid data URL (missing comma separator)");
+  }
+  const header = normalized.slice(0, comma);
+  const base64 = normalized.slice(comma + 1);
+  const mimeMatch = header.match(/data:(.*?);base64/i);
+  const mimeType = (mimeMatch == null ? void 0 : mimeMatch[1]) ?? "application/octet-stream";
+  const cacheDir = FileSystem2.cacheDirectory;
+  if (!cacheDir) {
+    throw new Error("expo-file-system cacheDirectory is unavailable");
+  }
+  const fileUri = `${cacheDir}attachment-${Date.now()}-${Math.random().toString(16).slice(2)}.bin`;
+  await FileSystem2.writeAsStringAsync(fileUri, base64, {
+    encoding: FileSystem2.EncodingType.Base64
+  });
+  try {
+    const resp = await fetch(fileUri);
+    const blob = await resp.blob();
+    return blob.type ? blob : new Blob([blob], { type: mimeType });
+  } finally {
+    void FileSystem2.deleteAsync(fileUri, { idempotent: true }).catch(() => {
+    });
+  }
+}
+function getMimeTypeFromDataUrl(dataUrl) {
+  const normalized = dataUrl.startsWith("data:") ? dataUrl : `data:image/png;base64,${dataUrl}`;
+  const comma = normalized.indexOf(",");
+  const header = comma === -1 ? normalized : normalized.slice(0, comma);
+  const mimeMatch = header.match(/data:(.*?);base64/i);
+  return (mimeMatch == null ? void 0 : mimeMatch[1]) ?? "image/png";
+}
 function useAttachmentUpload() {
   const [uploading, setUploading] = React7.useState(false);
   const [error, setError] = React7.useState(null);
@@ -1530,15 +1631,15 @@ function useAttachmentUpload() {
       const blobs = await Promise.all(
         dataUrls.map(async (dataUrl, idx) => {
           const normalized = dataUrl.startsWith("data:") ? dataUrl : `data:image/png;base64,${dataUrl}`;
-          const resp = await fetch(normalized);
-          const blob = await resp.blob();
-          return { blob, idx };
+          const blob = Platform.OS === "android" ? await dataUrlToBlobAndroid(normalized) : await (await fetch(normalized)).blob();
+          const mimeType = getMimeTypeFromDataUrl(normalized);
+          return { blob, idx, mimeType };
         })
       );
-      const files = blobs.map(({ blob }, idx) => ({
+      const files = blobs.map(({ blob, mimeType }, idx) => ({
         name: `attachment-${Date.now()}-${idx}.png`,
         size: blob.size,
-        mimeType: blob.type || "image/png"
+        mimeType
       }));
       const presign = await attachmentRepository.presign({ threadId, appId, files });
       await Promise.all(presign.uploads.map((u, index) => attachmentRepository.upload(u, blobs[index].blob)));
@@ -1665,8 +1766,8 @@ function hasNoOutcomeAfterLastHuman(messages) {
 import { View as View2 } from "react-native";
 import { ComergeRuntimeRenderer } from "@comergehq/runtime";
 import { jsx as jsx3 } from "react/jsx-runtime";
-function RuntimeRenderer({ appKey, bundlePath, renderToken, style }) {
-  if (!bundlePath) {
+function RuntimeRenderer({ appKey, bundlePath, forcePreparing, renderToken, style }) {
+  if (!bundlePath || forcePreparing) {
     return /* @__PURE__ */ jsx3(View2, { style: [{ flex: 1, justifyContent: "center", alignItems: "center", padding: 24 }, style], children: /* @__PURE__ */ jsx3(Text, { variant: "bodyMuted", children: "Preparing app\u2026" }) });
   }
   return /* @__PURE__ */ jsx3(View2, { style: [{ flex: 1 }, style], children: /* @__PURE__ */ jsx3(
@@ -1681,25 +1782,76 @@ function RuntimeRenderer({ appKey, bundlePath, renderToken, style }) {
 }
 
 // src/studio/ui/StudioOverlay.tsx
-import * as React38 from "react";
-import { Keyboard as Keyboard5, Platform as Platform8, View as View44, useWindowDimensions as useWindowDimensions4 } from "react-native";
+import * as React41 from "react";
+import { Keyboard as Keyboard5, Platform as Platform10, View as View44, useWindowDimensions as useWindowDimensions4 } from "react-native";
 
 // src/components/studio-sheet/StudioBottomSheet.tsx
-import * as React9 from "react";
-import { AppState as AppState2, Keyboard, View as View4 } from "react-native";
+import * as React11 from "react";
+import { AppState as AppState3, Keyboard, View as View4 } from "react-native";
 import BottomSheet from "@gorhom/bottom-sheet";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 
 // src/components/studio-sheet/StudioSheetBackground.tsx
-import { Platform, View as View3 } from "react-native";
-import { LiquidGlassView, isLiquidGlassSupported } from "@callstack/liquid-glass";
-import { Fragment as Fragment2, jsx as jsx4, jsxs } from "react/jsx-runtime";
+import { Platform as Platform3, View as View3 } from "react-native";
+import { isLiquidGlassSupported } from "@callstack/liquid-glass";
+
+// src/components/utils/ResettableLiquidGlassView.tsx
+import * as React10 from "react";
+import { LiquidGlassView } from "@callstack/liquid-glass";
+
+// src/components/utils/liquidGlassReset.tsx
+import * as React9 from "react";
+import { AppState as AppState2, Platform as Platform2 } from "react-native";
+import { jsx as jsx4 } from "react/jsx-runtime";
+var LiquidGlassResetContext = React9.createContext(0);
+function LiquidGlassResetProvider({
+  children,
+  resetTriggers = []
+}) {
+  const [token, setToken] = React9.useState(0);
+  React9.useEffect(() => {
+    if (Platform2.OS !== "ios") return;
+    const onChange = (state) => {
+      if (state === "active") setToken((t) => t + 1);
+    };
+    const sub = AppState2.addEventListener("change", onChange);
+    return () => sub.remove();
+  }, []);
+  React9.useEffect(() => {
+    setToken((t) => t + 1);
+  }, resetTriggers);
+  return /* @__PURE__ */ jsx4(LiquidGlassResetContext.Provider, { value: token, children });
+}
+function useLiquidGlassResetToken() {
+  return React9.useContext(LiquidGlassResetContext);
+}
+
+// src/components/utils/ResettableLiquidGlassView.tsx
+import { jsx as jsx5 } from "react/jsx-runtime";
+function ResettableLiquidGlassView({ children, ...props }) {
+  const token = useLiquidGlassResetToken();
+  const [layoutBootKey, setLayoutBootKey] = React10.useState(0);
+  const sawNonZeroLayoutRef = React10.useRef(false);
+  const onLayout = (e) => {
+    var _a;
+    (_a = props.onLayout) == null ? void 0 : _a.call(props, e);
+    const { width, height } = e.nativeEvent.layout;
+    if (width > 0 && height > 0 && !sawNonZeroLayoutRef.current) {
+      sawNonZeroLayoutRef.current = true;
+      setLayoutBootKey((k) => k + 1);
+    }
+  };
+  return /* @__PURE__ */ jsx5(LiquidGlassView, { ...props, onLayout, children }, `liquid-glass-${token}-${layoutBootKey}`);
+}
+
+// src/components/studio-sheet/StudioSheetBackground.tsx
+import { Fragment as Fragment2, jsx as jsx6, jsxs } from "react/jsx-runtime";
 function StudioSheetBackground({
   style,
   renderBackground
 }) {
   const theme = useTheme();
-  const radius = Platform.OS === "ios" ? 39 : 16;
+  const radius = Platform3.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 = {
@@ -1709,17 +1861,17 @@ function StudioSheetBackground({
     overflow: "hidden"
   };
   if (renderBackground) {
-    return /* @__PURE__ */ jsx4(Fragment2, { children: renderBackground({ style: containerStyle }) });
+    return /* @__PURE__ */ jsx6(Fragment2, { children: renderBackground({ style: containerStyle }) });
   }
   return /* @__PURE__ */ jsxs(Fragment2, { children: [
-    /* @__PURE__ */ jsx4(
-      LiquidGlassView,
+    /* @__PURE__ */ jsx6(
+      ResettableLiquidGlassView,
       {
         style: [containerStyle, !isLiquidGlassSupported && { backgroundColor: fallbackBgColor }],
         effect: "regular"
       }
     ),
-    isLiquidGlassSupported && /* @__PURE__ */ jsx4(
+    isLiquidGlassSupported && /* @__PURE__ */ jsx6(
       View3,
       {
         style: [
@@ -1741,11 +1893,11 @@ function StudioSheetBackground({
 }
 
 // src/components/studio-sheet/StudioBottomSheet.tsx
-import { jsx as jsx5 } from "react/jsx-runtime";
+import { jsx as jsx7 } from "react/jsx-runtime";
 function StudioBottomSheet({
   open,
   onOpenChange,
-  snapPoints = ["80%", "100%"],
+  snapPoints = ["100%"],
   sheetRef,
   background,
   children,
@@ -1753,12 +1905,12 @@ function StudioBottomSheet({
 }) {
   const theme = useTheme();
   const insets = useSafeAreaInsets();
-  const internalSheetRef = React9.useRef(null);
+  const internalSheetRef = React11.useRef(null);
   const resolvedSheetRef = sheetRef ?? internalSheetRef;
-  const currentIndexRef = React9.useRef(open ? snapPoints.length - 1 : -1);
-  const lastAppStateRef = React9.useRef(AppState2.currentState);
-  React9.useEffect(() => {
-    const sub = AppState2.addEventListener("change", (state) => {
+  const currentIndexRef = React11.useRef(open ? snapPoints.length - 1 : -1);
+  const lastAppStateRef = React11.useRef(AppState3.currentState);
+  React11.useEffect(() => {
+    const sub = AppState3.addEventListener("change", (state) => {
       const prev = lastAppStateRef.current;
       lastAppStateRef.current = state;
       if (state === "background" || state === "inactive") {
@@ -1777,7 +1929,7 @@ function StudioBottomSheet({
     });
     return () => sub.remove();
   }, [open, resolvedSheetRef]);
-  React9.useEffect(() => {
+  React11.useEffect(() => {
     const sheet = resolvedSheetRef.current;
     if (!sheet) return;
     if (open) {
@@ -1786,41 +1938,41 @@ function StudioBottomSheet({
       sheet.close();
     }
   }, [open, resolvedSheetRef, snapPoints.length]);
-  const handleChange = React9.useCallback(
+  const handleChange = React11.useCallback(
     (index) => {
       currentIndexRef.current = index;
       onOpenChange == null ? void 0 : onOpenChange(index >= 0);
     },
     [onOpenChange]
   );
-  return /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsx7(
     BottomSheet,
     {
       ref: resolvedSheetRef,
       index: open ? snapPoints.length - 1 : -1,
       snapPoints,
+      enableDynamicSizing: false,
       enablePanDownToClose: true,
-      keyboardBehavior: "interactive",
-      keyboardBlurBehavior: "restore",
+      enableContentPanningGesture: false,
       android_keyboardInputMode: "adjustResize",
-      backgroundComponent: (props) => /* @__PURE__ */ jsx5(StudioSheetBackground, { ...props, renderBackground: background == null ? void 0 : background.renderBackground }),
+      backgroundComponent: (props) => /* @__PURE__ */ jsx7(StudioSheetBackground, { ...props, renderBackground: background == null ? void 0 : background.renderBackground }),
       topInset: insets.top,
       bottomInset: 0,
       handleIndicatorStyle: { backgroundColor: theme.colors.handleIndicator },
       onChange: handleChange,
       ...bottomSheetProps,
-      children: /* @__PURE__ */ jsx5(View4, { style: { flex: 1, overflow: "hidden" }, children })
+      children: /* @__PURE__ */ jsx7(View4, { style: { flex: 1, overflow: "hidden" }, children })
     }
   );
 }
 
 // src/components/studio-sheet/StudioSheetPager.tsx
-import * as React10 from "react";
+import * as React12 from "react";
 import { Animated } from "react-native";
-import { jsx as jsx6, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx8, jsxs as jsxs2 } from "react/jsx-runtime";
 function StudioSheetPager({ activePage, width, preview, chat, style }) {
-  const anim = React10.useRef(new Animated.Value(activePage === "chat" ? 1 : 0)).current;
-  React10.useEffect(() => {
+  const anim = React12.useRef(new Animated.Value(activePage === "chat" ? 1 : 0)).current;
+  React12.useEffect(() => {
     Animated.spring(anim, {
       toValue: activePage === "chat" ? 1 : 0,
       useNativeDriver: true,
@@ -1831,7 +1983,7 @@ function StudioSheetPager({ activePage, width, preview, chat, style }) {
   const previewTranslateX = anim.interpolate({ inputRange: [0, 1], outputRange: [0, -width] });
   const chatTranslateX = anim.interpolate({ inputRange: [0, 1], outputRange: [width, 0] });
   return /* @__PURE__ */ jsxs2(Animated.View, { style: [{ flex: 1 }, style], children: [
-    /* @__PURE__ */ jsx6(
+    /* @__PURE__ */ jsx8(
       Animated.View,
       {
         style: [
@@ -1848,7 +2000,7 @@ function StudioSheetPager({ activePage, width, preview, chat, style }) {
         children: preview
       }
     ),
-    /* @__PURE__ */ jsx6(
+    /* @__PURE__ */ jsx8(
       Animated.View,
       {
         style: [
@@ -1869,7 +2021,7 @@ function StudioSheetPager({ activePage, width, preview, chat, style }) {
 }
 
 // src/components/floating-draggable-button/FloatingDraggableButton.tsx
-import { useCallback as useCallback8, useEffect as useEffect9, useMemo as useMemo3, useRef as useRef6 } from "react";
+import { useCallback as useCallback8, useEffect as useEffect10, useMemo as useMemo3, useRef as useRef7 } from "react";
 import {
   PanResponder,
   Pressable,
@@ -1890,7 +2042,7 @@ import Animated2, {
   withSpring,
   withTiming
 } from "react-native-reanimated";
-import { LiquidGlassView as LiquidGlassView2, isLiquidGlassSupported as isLiquidGlassSupported2 } from "@callstack/liquid-glass";
+import { isLiquidGlassSupported as isLiquidGlassSupported2 } from "@callstack/liquid-glass";
 
 // src/components/floating-draggable-button/constants.ts
 var DEFAULT_SIZE = 48;
@@ -1901,11 +2053,10 @@ var DEFAULT_OFFSET = {
 };
 var ENTER_SCALE_FROM = 0.3;
 var ENTER_ROTATION_FROM_DEG = -180;
-var HIDDEN_OPACITY = 0.3;
 var PULSE_DURATION_MS = 900;
 
 // src/components/floating-draggable-button/FloatingDraggableButton.tsx
-import { jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx9, jsxs as jsxs3 } from "react/jsx-runtime";
 var HIDDEN_OFFSET_X = 20;
 var SPRING_POSITION = { damping: 12, stiffness: 100, mass: 0.8 };
 var SPRING_SCALE_IN = { damping: 10, stiffness: 200 };
@@ -1913,8 +2064,6 @@ var SPRING_SCALE_OUT = { damping: 12, stiffness: 150 };
 var SPRING_ROTATION_IN = { damping: 15, stiffness: 80 };
 var SPRING_ROTATION_GRAB = { damping: 20 };
 var SPRING_SCALE_GRAB = { damping: 15, stiffness: 200 };
-var TIMING_OPACITY_IN = { duration: 300, easing: Easing.out(Easing.ease) };
-var TIMING_OPACITY_OUT = { duration: 250, easing: Easing.in(Easing.ease) };
 function clamp(value, min, max) {
   "worklet";
   return Math.max(min, Math.min(max, value));
@@ -1948,8 +2097,8 @@ function FloatingDraggableButton({
   const theme = useTheme();
   const { width, height } = useWindowDimensions();
   const isDanger = variant === "danger";
-  const onPressRef = useRef6(onPress);
-  useEffect9(() => {
+  const onPressRef = useRef7(onPress);
+  useEffect10(() => {
     onPressRef.current = onPress;
   }, [onPress]);
   const fallbackBgColor = useMemo3(() => {
@@ -1961,30 +2110,20 @@ function FloatingDraggableButton({
   const translateY = useSharedValue(getHiddenTranslateY(height));
   const scale = useSharedValue(ENTER_SCALE_FROM);
   const rotation = useSharedValue(ENTER_ROTATION_FROM_DEG);
-  const opacity = useSharedValue(1);
   const borderPulse = useSharedValue(0);
-  const startPos = useRef6({ x: 0, y: 0 });
-  const isAnimatingOut = useRef6(false);
+  const startPos = useRef7({ x: 0, y: 0 });
+  const isAnimatingOut = useRef7(false);
   const animateToHidden = useCallback8(
     (options) => {
-      translateX.value = withSpring(getHiddenTranslateX(size), SPRING_POSITION);
+      const finish = options == null ? void 0 : options.onFinish;
+      translateX.value = withSpring(getHiddenTranslateX(size), SPRING_POSITION, (finished) => {
+        if (finished && finish) runOnJS(finish)();
+      });
       translateY.value = withSpring(getHiddenTranslateY(height), SPRING_POSITION);
       scale.value = withSpring(ENTER_SCALE_FROM, SPRING_SCALE_IN);
       rotation.value = withSpring(ENTER_ROTATION_FROM_DEG, SPRING_ROTATION_IN);
-      const finish = options == null ? void 0 : options.onFinish;
-      if (!finish) {
-        opacity.value = withTiming(HIDDEN_OPACITY, TIMING_OPACITY_OUT);
-        return;
-      }
-      opacity.value = withTiming(
-        HIDDEN_OPACITY,
-        TIMING_OPACITY_OUT,
-        (finished) => {
-          if (finished) runOnJS(finish)();
-        }
-      );
     },
-    [height, opacity, rotation, scale, size, translateX, translateY]
+    [height, rotation, scale, size, translateX, translateY]
   );
   const animateOut = useCallback8(() => {
     if (isAnimatingOut.current) return;
@@ -2000,7 +2139,7 @@ function FloatingDraggableButton({
       }
     });
   }, [animateToHidden]);
-  useEffect9(() => {
+  useEffect10(() => {
     if (isLoading) {
       borderPulse.value = withRepeat(
         withSequence(
@@ -2024,9 +2163,8 @@ function FloatingDraggableButton({
       withSpring(1, SPRING_SCALE_OUT)
     );
     rotation.value = withSpring(0, SPRING_ROTATION_IN);
-    opacity.value = withTiming(1, TIMING_OPACITY_IN);
-  }, [height, offset.bottom, offset.left, opacity, rotation, scale, size, translateX, translateY]);
-  useEffect9(() => {
+  }, [height, offset.bottom, offset.left, rotation, scale, size, translateX, translateY]);
+  useEffect10(() => {
     const timer = setTimeout(() => {
       if (visible) {
         animateIn();
@@ -2034,7 +2172,7 @@ function FloatingDraggableButton({
     }, 100);
     return () => clearTimeout(timer);
   }, []);
-  useEffect9(() => {
+  useEffect10(() => {
     if (visible && isAnimatingOut.current) {
       animateIn();
     } else if (!visible && !isAnimatingOut.current) {
@@ -2042,13 +2180,13 @@ function FloatingDraggableButton({
       isAnimatingOut.current = true;
     }
   }, [visible, animateIn, animateToHidden]);
-  useEffect9(() => {
+  useEffect10(() => {
     if (forceShowTrigger > 0 && visible) {
       isAnimatingOut.current = false;
       animateIn();
     }
   }, [forceShowTrigger, visible, animateIn]);
-  const panResponder = useRef6(
+  const panResponder = useRef7(
     PanResponder.create({
       onStartShouldSetPanResponder: () => true,
       onMoveShouldSetPanResponder: () => true,
@@ -2081,8 +2219,7 @@ function FloatingDraggableButton({
       { translateY: translateY.value },
       { scale: scale.value },
       { rotate: `${rotation.value}deg` }
-    ],
-    opacity: opacity.value
+    ]
   }));
   const borderAnimatedStyle = useAnimatedStyle(() => {
     const borderColor = interpolateColor(
@@ -2105,13 +2242,13 @@ function FloatingDraggableButton({
       accessibilityRole: "button",
       accessibilityLabel: ariaLabel,
       children: [
-        /* @__PURE__ */ jsx7(Animated2.View, { style: [{ width: size, height: size, borderRadius: size / 2 }, borderAnimatedStyle], children: /* @__PURE__ */ jsx7(
-          LiquidGlassView2,
+        /* @__PURE__ */ jsx9(Animated2.View, { style: [{ width: size, height: size, borderRadius: size / 2 }, borderAnimatedStyle], children: /* @__PURE__ */ jsx9(
+          ResettableLiquidGlassView,
           {
             style: [{ flex: 1, borderRadius: size / 2 }, !isLiquidGlassSupported2 && { backgroundColor: fallbackBgColor }],
             interactive: true,
             effect: "clear",
-            children: /* @__PURE__ */ jsx7(
+            children: /* @__PURE__ */ jsx9(
               Pressable,
               {
                 onPress: () => {
@@ -2119,12 +2256,12 @@ function FloatingDraggableButton({
                 },
                 style: styles.buttonInner,
                 android_ripple: { color: "rgba(255, 255, 255, 0.3)", borderless: true },
-                children: children ?? /* @__PURE__ */ jsx7(View5, {})
+                children: children ?? /* @__PURE__ */ jsx9(View5, {})
               }
             )
           }
         ) }),
-        badgeCount > 0 && /* @__PURE__ */ jsx7(View5, { style: [styles.badge, { backgroundColor: theme.colors.danger }], children: /* @__PURE__ */ jsx7(Text2, { style: [styles.badgeText, { color: theme.colors.onDanger }], children: badgeCount > 99 ? "99+" : badgeCount }) })
+        badgeCount > 0 && /* @__PURE__ */ jsx9(View5, { style: [styles.badge, { backgroundColor: theme.colors.danger }], children: /* @__PURE__ */ jsx9(Text2, { style: [styles.badgeText, { color: theme.colors.onDanger }], children: badgeCount > 99 ? "99+" : badgeCount }) })
       ]
     }
   );
@@ -2165,7 +2302,7 @@ var styles = StyleSheet.create({
 });
 
 // src/components/overlays/EdgeGlowFrame.tsx
-import * as React11 from "react";
+import * as React13 from "react";
 import { Animated as Animated3, View as View6 } from "react-native";
 import { LinearGradient } from "expo-linear-gradient";
 
@@ -2185,7 +2322,7 @@ function withAlpha(color, alpha) {
 }
 
 // src/components/overlays/EdgeGlowFrame.tsx
-import { jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx10, jsxs as jsxs4 } from "react/jsx-runtime";
 function baseColor(role, theme) {
   switch (role) {
     case "danger":
@@ -2208,8 +2345,8 @@ function EdgeGlowFrame({
 }) {
   const theme = useTheme();
   const alpha = Math.max(0, Math.min(1, intensity));
-  const anim = React11.useRef(new Animated3.Value(visible ? 1 : 0)).current;
-  React11.useEffect(() => {
+  const anim = React13.useRef(new Animated3.Value(visible ? 1 : 0)).current;
+  React13.useEffect(() => {
     Animated3.timing(anim, {
       toValue: visible ? 1 : 0,
       duration: 300,
@@ -2220,7 +2357,7 @@ function EdgeGlowFrame({
   const strong = withAlpha(c, 0.6 * alpha);
   const soft = withAlpha(c, 0.22 * alpha);
   return /* @__PURE__ */ jsxs4(Animated3.View, { pointerEvents: "none", style: [{ position: "absolute", inset: 0, opacity: anim }, style], children: [
-    /* @__PURE__ */ jsx8(View6, { style: { position: "absolute", top: 0, left: 0, right: 0, height: thickness }, children: /* @__PURE__ */ jsx8(
+    /* @__PURE__ */ jsx10(View6, { style: { position: "absolute", top: 0, left: 0, right: 0, height: thickness }, children: /* @__PURE__ */ jsx10(
       LinearGradient,
       {
         colors: [strong, soft, "transparent"],
@@ -2229,7 +2366,7 @@ function EdgeGlowFrame({
         style: { width: "100%", height: "100%" }
       }
     ) }),
-    /* @__PURE__ */ jsx8(View6, { style: { position: "absolute", bottom: 0, left: 0, right: 0, height: thickness }, children: /* @__PURE__ */ jsx8(
+    /* @__PURE__ */ jsx10(View6, { style: { position: "absolute", bottom: 0, left: 0, right: 0, height: thickness }, children: /* @__PURE__ */ jsx10(
       LinearGradient,
       {
         colors: ["transparent", soft, strong],
@@ -2238,7 +2375,7 @@ function EdgeGlowFrame({
         style: { width: "100%", height: "100%" }
       }
     ) }),
-    /* @__PURE__ */ jsx8(View6, { style: { position: "absolute", top: 0, bottom: 0, left: 0, width: thickness }, children: /* @__PURE__ */ jsx8(
+    /* @__PURE__ */ jsx10(View6, { style: { position: "absolute", top: 0, bottom: 0, left: 0, width: thickness }, children: /* @__PURE__ */ jsx10(
       LinearGradient,
       {
         colors: [strong, soft, "transparent"],
@@ -2247,7 +2384,7 @@ function EdgeGlowFrame({
         style: { width: "100%", height: "100%" }
       }
     ) }),
-    /* @__PURE__ */ jsx8(View6, { style: { position: "absolute", top: 0, bottom: 0, right: 0, width: thickness }, children: /* @__PURE__ */ jsx8(
+    /* @__PURE__ */ jsx10(View6, { style: { position: "absolute", top: 0, bottom: 0, right: 0, width: thickness }, children: /* @__PURE__ */ jsx10(
       LinearGradient,
       {
         colors: ["transparent", soft, strong],
@@ -2260,12 +2397,12 @@ function EdgeGlowFrame({
 }
 
 // src/components/draw/DrawModeOverlay.tsx
-import * as React14 from "react";
+import * as React16 from "react";
 import { StyleSheet as StyleSheet3, View as View10 } from "react-native";
 import { captureRef } from "react-native-view-shot";
 
 // src/components/draw/DrawSurface.tsx
-import * as React12 from "react";
+import * as React14 from "react";
 import { PanResponder as PanResponder2, StyleSheet as StyleSheet2, View as View7 } from "react-native";
 import Svg, { Path } from "react-native-svg";
 
@@ -2288,7 +2425,7 @@ function pointsToSmoothPath(points) {
 }
 
 // src/components/draw/DrawSurface.tsx
-import { jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx11, jsxs as jsxs5 } from "react/jsx-runtime";
 function DrawSurface({
   color,
   strokeWidth,
@@ -2297,25 +2434,25 @@ function DrawSurface({
   style,
   minDistance = 1
 }) {
-  const [renderTick, setRenderTick] = React12.useState(0);
-  const currentPointsRef = React12.useRef([]);
-  const rafRef = React12.useRef(null);
-  const triggerRender = React12.useCallback(() => {
+  const [renderTick, setRenderTick] = React14.useState(0);
+  const currentPointsRef = React14.useRef([]);
+  const rafRef = React14.useRef(null);
+  const triggerRender = React14.useCallback(() => {
     if (rafRef.current !== null) return;
     rafRef.current = requestAnimationFrame(() => {
       rafRef.current = null;
       setRenderTick((n) => n + 1);
     });
   }, []);
-  React12.useEffect(() => () => {
+  React14.useEffect(() => () => {
     if (rafRef.current !== null) cancelAnimationFrame(rafRef.current);
   }, []);
-  const onStart = React12.useCallback((e) => {
+  const onStart = React14.useCallback((e) => {
     const { locationX, locationY } = e.nativeEvent;
     currentPointsRef.current = [{ x: locationX, y: locationY }];
     triggerRender();
   }, [triggerRender]);
-  const onMove = React12.useCallback((e, _g) => {
+  const onMove = React14.useCallback((e, _g) => {
     const { locationX, locationY } = e.nativeEvent;
     const pts = currentPointsRef.current;
     if (pts.length > 0) {
@@ -2328,7 +2465,7 @@ function DrawSurface({
     currentPointsRef.current = [...pts, { x: locationX, y: locationY }];
     triggerRender();
   }, [minDistance, triggerRender]);
-  const onEnd = React12.useCallback(() => {
+  const onEnd = React14.useCallback(() => {
     const points = currentPointsRef.current;
     if (points.length > 0) {
       onAddStroke({ points, color, width: strokeWidth });
@@ -2336,7 +2473,7 @@ function DrawSurface({
     currentPointsRef.current = [];
     triggerRender();
   }, [color, onAddStroke, strokeWidth, triggerRender]);
-  const panResponder = React12.useMemo(
+  const panResponder = React14.useMemo(
     () => PanResponder2.create({
       onStartShouldSetPanResponder: () => true,
       onMoveShouldSetPanResponder: () => true,
@@ -2349,11 +2486,11 @@ function DrawSurface({
   );
   const currentPath = pointsToSmoothPath(currentPointsRef.current);
   void renderTick;
-  return /* @__PURE__ */ jsx9(View7, { style: [StyleSheet2.absoluteFill, styles2.container, style], ...panResponder.panHandlers, children: /* @__PURE__ */ jsxs5(Svg, { style: StyleSheet2.absoluteFill, width: "100%", height: "100%", children: [
+  return /* @__PURE__ */ jsx11(View7, { style: [StyleSheet2.absoluteFill, styles2.container, style], ...panResponder.panHandlers, children: /* @__PURE__ */ jsxs5(Svg, { style: StyleSheet2.absoluteFill, width: "100%", height: "100%", children: [
     strokes.map((s, idx) => {
       const d = pointsToSmoothPath(s.points);
       if (!d) return null;
-      return /* @__PURE__ */ jsx9(
+      return /* @__PURE__ */ jsx11(
         Path,
         {
           d,
@@ -2366,7 +2503,7 @@ function DrawSurface({
         idx
       );
     }),
-    currentPath ? /* @__PURE__ */ jsx9(
+    currentPath ? /* @__PURE__ */ jsx11(
       Path,
       {
         d: currentPath,
@@ -2386,7 +2523,7 @@ var styles2 = StyleSheet2.create({
 });
 
 // src/components/draw/DrawToolbar.tsx
-import * as React13 from "react";
+import * as React15 from "react";
 import {
   ActivityIndicator,
   Animated as Animated4,
@@ -2414,7 +2551,7 @@ async function impact(style) {
 
 // src/components/draw/DrawColorPicker.tsx
 import { Pressable as Pressable2, View as View8 } from "react-native";
-import { jsx as jsx10 } from "react/jsx-runtime";
+import { jsx as jsx12 } from "react/jsx-runtime";
 function DrawColorPicker({
   colors,
   selected,
@@ -2448,9 +2585,9 @@ function DrawColorPicker({
     return { ...base, ...selectedStyle, ...whiteStyle };
   };
   if (!expanded) {
-    return /* @__PURE__ */ jsx10(Pressable2, { onPress: onToggle, style: [swatchStyle(selected, true), style] });
+    return /* @__PURE__ */ jsx12(Pressable2, { onPress: onToggle, style: [swatchStyle(selected, true), style] });
   }
-  return /* @__PURE__ */ jsx10(View8, { style: [{ flexDirection: "row", alignItems: "center", gap: 8 }, style], children: colors.map((c, idx) => /* @__PURE__ */ jsx10(
+  return /* @__PURE__ */ jsx12(View8, { style: [{ flexDirection: "row", alignItems: "center", gap: 8 }, style], children: colors.map((c, idx) => /* @__PURE__ */ jsx12(
     Pressable2,
     {
       onPress: () => {
@@ -2464,7 +2601,7 @@ function DrawColorPicker({
 }
 
 // src/components/draw/DrawToolbar.tsx
-import { jsx as jsx11, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx13, jsxs as jsxs6 } from "react/jsx-runtime";
 function DrawToolbar({
   colors,
   selectedColor,
@@ -2483,11 +2620,11 @@ function DrawToolbar({
 }) {
   const insets = useSafeAreaInsets2();
   const { width: screenWidth, height: screenHeight } = useWindowDimensions2();
-  const [expanded, setExpanded] = React13.useState(false);
-  const pos = React13.useRef(new Animated4.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(() => {
+  const [expanded, setExpanded] = React15.useState(false);
+  const pos = React15.useRef(new Animated4.ValueXY({ x: screenWidth / 2 - 110, y: -140 })).current;
+  const start = React15.useRef({ x: 0, y: 0 });
+  const currentPos = React15.useRef({ x: 0, y: 0 });
+  React15.useEffect(() => {
     if (hidden) return;
     Animated4.spring(pos.y, {
       toValue: insets.top + 60,
@@ -2497,7 +2634,7 @@ function DrawToolbar({
       mass: 0.8
     }).start();
   }, [hidden, insets.top, pos.y]);
-  React13.useEffect(() => {
+  React15.useEffect(() => {
     const id = pos.addListener((v) => {
       currentPos.current = { x: v.x ?? 0, y: v.y ?? 0 };
     });
@@ -2505,7 +2642,7 @@ function DrawToolbar({
       pos.removeListener(id);
     };
   }, [pos]);
-  const clamp2 = React13.useCallback(
+  const clamp2 = React15.useCallback(
     (x, y) => {
       const minX = 10;
       const maxX = Math.max(10, screenWidth - 230);
@@ -2515,7 +2652,7 @@ function DrawToolbar({
     },
     [insets.top, screenHeight, screenWidth]
   );
-  const panResponder = React13.useMemo(
+  const panResponder = React15.useMemo(
     () => PanResponder3.create({
       onStartShouldSetPanResponder: () => false,
       onMoveShouldSetPanResponder: (_e, g) => Math.abs(g.dx) > 5 || Math.abs(g.dy) > 5,
@@ -2543,8 +2680,8 @@ function DrawToolbar({
     children
   }) {
     const isDisabled = Boolean(disabled) || Boolean(capturingDisabled);
-    const [pressed, setPressed] = React13.useState(false);
-    return /* @__PURE__ */ jsx11(
+    const [pressed, setPressed] = React15.useState(false);
+    return /* @__PURE__ */ jsx13(
       View9,
       {
         style: {
@@ -2556,7 +2693,7 @@ function DrawToolbar({
           backgroundColor,
           opacity: isDisabled ? 0.5 : pressed ? 0.85 : 1
         },
-        children: /* @__PURE__ */ jsx11(
+        children: /* @__PURE__ */ jsx13(
           Pressable3,
           {
             accessibilityRole: "button",
@@ -2573,7 +2710,7 @@ function DrawToolbar({
       }
     );
   }
-  return /* @__PURE__ */ jsx11(
+  return /* @__PURE__ */ jsx13(
     Animated4.View,
     {
       style: [
@@ -2590,7 +2727,7 @@ function DrawToolbar({
         style
       ],
       ...panResponder.panHandlers,
-      children: /* @__PURE__ */ jsx11(
+      children: /* @__PURE__ */ jsx13(
         View9,
         {
           style: {
@@ -2600,8 +2737,8 @@ function DrawToolbar({
             minWidth: 220
           },
           children: /* @__PURE__ */ jsxs6(View9, { style: { flexDirection: "row", alignItems: "center", gap: 8 }, children: [
-            renderDragHandle ? renderDragHandle() : /* @__PURE__ */ jsx11(GripVertical, { size: 20, color: "rgba(255, 255, 255, 0.6)" }),
-            /* @__PURE__ */ jsx11(
+            renderDragHandle ? renderDragHandle() : /* @__PURE__ */ jsx13(GripVertical, { size: 20, color: "rgba(255, 255, 255, 0.6)" }),
+            /* @__PURE__ */ jsx13(
               DrawColorPicker,
               {
                 colors,
@@ -2617,8 +2754,8 @@ function DrawToolbar({
                 }
               }
             ),
-            /* @__PURE__ */ jsx11(View9, { style: { width: 1, height: 20, backgroundColor: "rgba(255, 255, 255, 0.3)", marginHorizontal: 4 } }),
-            /* @__PURE__ */ jsx11(
+            /* @__PURE__ */ jsx13(View9, { style: { width: 1, height: 20, backgroundColor: "rgba(255, 255, 255, 0.3)", marginHorizontal: 4 } }),
+            /* @__PURE__ */ jsx13(
               CircleActionButton,
               {
                 accessibilityLabel: "Undo",
@@ -2629,10 +2766,10 @@ function DrawToolbar({
                   void impact("light");
                   onUndo();
                 },
-                children: renderUndoIcon ? renderUndoIcon() : /* @__PURE__ */ jsx11(Undo2, { size: 16, color: canUndo ? "#FFFFFF" : "rgba(255,255,255,0.4)" })
+                children: renderUndoIcon ? renderUndoIcon() : /* @__PURE__ */ jsx13(Undo2, { size: 16, color: canUndo ? "#FFFFFF" : "rgba(255,255,255,0.4)" })
               }
             ),
-            /* @__PURE__ */ jsx11(
+            /* @__PURE__ */ jsx13(
               CircleActionButton,
               {
                 accessibilityLabel: "Cancel",
@@ -2642,10 +2779,10 @@ function DrawToolbar({
                   void impact("medium");
                   onCancel();
                 },
-                children: renderCancelIcon ? renderCancelIcon() : /* @__PURE__ */ jsx11(X, { size: 16, color: "#FFFFFF" })
+                children: renderCancelIcon ? renderCancelIcon() : /* @__PURE__ */ jsx13(X, { size: 16, color: "#FFFFFF" })
               }
             ),
-            /* @__PURE__ */ jsx11(
+            /* @__PURE__ */ jsx13(
               CircleActionButton,
               {
                 accessibilityLabel: "Done",
@@ -2655,7 +2792,7 @@ function DrawToolbar({
                   void impact("medium");
                   onDone();
                 },
-                children: capturing ? /* @__PURE__ */ jsx11(ActivityIndicator, { color: "#FFFFFF", size: "small" }) : renderDoneIcon ? renderDoneIcon() : /* @__PURE__ */ jsx11(Check, { size: 16, color: "#FFFFFF" })
+                children: capturing ? /* @__PURE__ */ jsx13(ActivityIndicator, { color: "#FFFFFF", size: "small" }) : renderDoneIcon ? renderDoneIcon() : /* @__PURE__ */ jsx13(Check, { size: 16, color: "#FFFFFF" })
               }
             )
           ] })
@@ -2666,7 +2803,7 @@ function DrawToolbar({
 }
 
 // src/components/draw/DrawModeOverlay.tsx
-import { jsx as jsx12, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx14, jsxs as jsxs7 } from "react/jsx-runtime";
 function DrawModeOverlay({
   visible,
   captureTargetRef,
@@ -2681,7 +2818,7 @@ function DrawModeOverlay({
   renderDragHandle
 }) {
   const theme = useTheme();
-  const defaultPalette = React14.useMemo(
+  const defaultPalette = React16.useMemo(
     () => [
       "#EF4444",
       // Red
@@ -2699,11 +2836,11 @@ function DrawModeOverlay({
     []
   );
   const colors = palette && palette.length > 0 ? palette : defaultPalette;
-  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(() => {
+  const [selectedColor, setSelectedColor] = React16.useState(colors[0] ?? "#EF4444");
+  const [strokes, setStrokes] = React16.useState([]);
+  const [capturing, setCapturing] = React16.useState(false);
+  const [hideUi, setHideUi] = React16.useState(false);
+  React16.useEffect(() => {
     if (!visible) return;
     setStrokes([]);
     setSelectedColor(colors[0] ?? "#EF4444");
@@ -2711,14 +2848,14 @@ function DrawModeOverlay({
     setHideUi(false);
   }, [colors, visible]);
   const canUndo = strokes.length > 0;
-  const handleUndo = React14.useCallback(() => {
+  const handleUndo = React16.useCallback(() => {
     setStrokes((prev) => prev.slice(0, -1));
   }, []);
-  const handleCancel = React14.useCallback(() => {
+  const handleCancel = React16.useCallback(() => {
     setStrokes([]);
     onCancel();
   }, [onCancel]);
-  const handleDone = React14.useCallback(async () => {
+  const handleDone = React16.useCallback(async () => {
     if (!captureTargetRef.current || capturing) return;
     try {
       setCapturing(true);
@@ -2741,8 +2878,8 @@ function DrawModeOverlay({
   }, [captureTargetRef, capturing, onCapture]);
   if (!visible) return null;
   return /* @__PURE__ */ jsxs7(View10, { style: [StyleSheet3.absoluteFill, styles3.root, style], pointerEvents: "box-none", children: [
-    /* @__PURE__ */ jsx12(EdgeGlowFrame, { visible: !hideUi, role: "danger", thickness: 50, intensity: 1 }),
-    /* @__PURE__ */ jsx12(
+    /* @__PURE__ */ jsx14(EdgeGlowFrame, { visible: !hideUi, role: "danger", thickness: 50, intensity: 1 }),
+    /* @__PURE__ */ jsx14(
       DrawSurface,
       {
         color: selectedColor,
@@ -2751,7 +2888,7 @@ function DrawModeOverlay({
         onAddStroke: (stroke) => setStrokes((prev) => [...prev, stroke])
       }
     ),
-    /* @__PURE__ */ jsx12(
+    /* @__PURE__ */ jsx14(
       DrawToolbar,
       {
         hidden: hideUi,
@@ -2778,19 +2915,19 @@ var styles3 = StyleSheet3.create({
 });
 
 // src/components/comments/AppCommentsSheet.tsx
-import * as React21 from "react";
-import { ActivityIndicator as ActivityIndicator3, Keyboard as Keyboard3, Platform as Platform4, Pressable as Pressable5, View as View14 } from "react-native";
+import * as React23 from "react";
+import { ActivityIndicator as ActivityIndicator3, Keyboard as Keyboard3, Platform as Platform6, Pressable as Pressable5, View as View14 } from "react-native";
 import {
   BottomSheetBackdrop,
   BottomSheetModal,
   BottomSheetScrollView
 } from "@gorhom/bottom-sheet";
 import { useSafeAreaInsets as useSafeAreaInsets3 } from "react-native-safe-area-context";
-import { LiquidGlassView as LiquidGlassView4, isLiquidGlassSupported as isLiquidGlassSupported4 } from "@callstack/liquid-glass";
+import { isLiquidGlassSupported as isLiquidGlassSupported4 } from "@callstack/liquid-glass";
 import { Play as Play2 } from "lucide-react-native";
 
 // src/components/chat/ChatComposer.tsx
-import * as React16 from "react";
+import * as React18 from "react";
 import {
   ActivityIndicator as ActivityIndicator2,
   Animated as Animated5,
@@ -2800,15 +2937,15 @@ import {
   ScrollView,
   View as View11
 } from "react-native";
-import { LiquidGlassView as LiquidGlassView3, isLiquidGlassSupported as isLiquidGlassSupported3 } from "@callstack/liquid-glass";
+import { isLiquidGlassSupported as isLiquidGlassSupported3 } from "@callstack/liquid-glass";
 import { Plus } from "lucide-react-native";
 
 // src/components/chat/MultilineTextInput.tsx
-import * as React15 from "react";
+import * as React17 from "react";
 import { TextInput } from "react-native";
 import { BottomSheetTextInput } from "@gorhom/bottom-sheet";
-import { jsx as jsx13 } from "react/jsx-runtime";
-var MultilineTextInput = React15.forwardRef(function MultilineTextInput2({ useBottomSheetTextInput = false, placeholder, placeholderTextColor, style, ...props }, ref) {
+import { jsx as jsx15 } from "react/jsx-runtime";
+var MultilineTextInput = React17.forwardRef(function MultilineTextInput2({ useBottomSheetTextInput = false, placeholder, placeholderTextColor, style, ...props }, ref) {
   const theme = useTheme();
   const baseStyle = {
     minHeight: 44,
@@ -2828,7 +2965,7 @@ var MultilineTextInput = React15.forwardRef(function MultilineTextInput2({ useBo
     style: [baseStyle, style],
     textAlignVertical: "top"
   };
-  return useBottomSheetTextInput ? /* @__PURE__ */ jsx13(BottomSheetTextInput, { ref, ...commonProps }) : /* @__PURE__ */ jsx13(TextInput, { ref, ...commonProps });
+  return useBottomSheetTextInput ? /* @__PURE__ */ jsx15(BottomSheetTextInput, { ref, ...commonProps }) : /* @__PURE__ */ jsx15(TextInput, { ref, ...commonProps });
 });
 
 // src/components/icons/StudioIcons.tsx
@@ -2845,7 +2982,7 @@ import {
   X as X2,
   Check as Check2
 } from "lucide-react-native";
-import { jsx as jsx14 } from "react/jsx-runtime";
+import { jsx as jsx16 } from "react/jsx-runtime";
 function useResolvedIconColor(token) {
   const theme = useTheme();
   switch (token) {
@@ -2869,7 +3006,7 @@ function useResolvedIconColor(token) {
 function makeIcon(Comp) {
   return function StudioIcon({ size = 20, strokeWidth = 2, colorToken = "floatingContent", ...rest }) {
     const color = useResolvedIconColor(colorToken);
-    return /* @__PURE__ */ jsx14(Comp, { size, strokeWidth, color, ...rest });
+    return /* @__PURE__ */ jsx16(Comp, { size, strokeWidth, color, ...rest });
   };
 }
 var IconHome = makeIcon(Home);
@@ -2885,16 +3022,16 @@ var IconArrowDown = makeIcon(ArrowDown);
 var IconApprove = makeIcon(Check2);
 
 // src/components/chat/ChatComposer.tsx
-import { jsx as jsx15, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx17, jsxs as jsxs8 } from "react/jsx-runtime";
 var THUMBNAIL_HEIGHT = 90;
 function AspectRatioThumbnail({
   uri,
   onRemove,
   renderRemoveIcon
 }) {
-  const [aspectRatio, setAspectRatio] = React16.useState(1);
+  const [aspectRatio, setAspectRatio] = React18.useState(1);
   return /* @__PURE__ */ jsxs8(View11, { style: { height: THUMBNAIL_HEIGHT, aspectRatio, position: "relative" }, children: [
-    /* @__PURE__ */ jsx15(View11, { style: { flex: 1, borderRadius: 8, overflow: "hidden" }, children: /* @__PURE__ */ jsx15(
+    /* @__PURE__ */ jsx17(View11, { style: { flex: 1, borderRadius: 8, overflow: "hidden" }, children: /* @__PURE__ */ jsx17(
       Image,
       {
         source: { uri },
@@ -2907,7 +3044,7 @@ function AspectRatioThumbnail({
         }
       }
     ) }),
-    onRemove ? /* @__PURE__ */ jsx15(
+    onRemove ? /* @__PURE__ */ jsx17(
       Pressable4,
       {
         style: {
@@ -2924,7 +3061,7 @@ function AspectRatioThumbnail({
         },
         onPress: onRemove,
         hitSlop: 10,
-        children: renderRemoveIcon ? renderRemoveIcon() : /* @__PURE__ */ jsx15(IconClose, { size: 12, colorToken: "onPrimary" })
+        children: renderRemoveIcon ? renderRemoveIcon() : /* @__PURE__ */ jsx17(IconClose, { size: 12, colorToken: "onPrimary" })
       }
     ) : null
   ] });
@@ -2949,19 +3086,19 @@ function ChatComposer({
   style
 }) {
   const theme = useTheme();
-  const [internal, setInternal] = React16.useState("");
+  const [internal, setInternal] = React18.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 || sendDisabled;
-  const maxInputHeight = React16.useMemo(() => Dimensions.get("window").height * 0.5, []);
-  const shakeAnim = React16.useRef(new Animated5.Value(0)).current;
-  const [sendPressed, setSendPressed] = React16.useState(false);
-  const inputRef = React16.useRef(null);
-  const prevAutoFocusRef = React16.useRef(false);
-  React16.useEffect(() => {
+  const maxInputHeight = React18.useMemo(() => Dimensions.get("window").height * 0.5, []);
+  const shakeAnim = React18.useRef(new Animated5.Value(0)).current;
+  const [sendPressed, setSendPressed] = React18.useState(false);
+  const inputRef = React18.useRef(null);
+  const prevAutoFocusRef = React18.useRef(false);
+  React18.useEffect(() => {
     const shouldFocus = autoFocus && !prevAutoFocusRef.current && !disabled && !sending;
     prevAutoFocusRef.current = autoFocus;
     if (!shouldFocus) return;
@@ -2971,7 +3108,7 @@ function ChatComposer({
     }, 75);
     return () => clearTimeout(t);
   }, [autoFocus, disabled, sending]);
-  const triggerShake = React16.useCallback(() => {
+  const triggerShake = React18.useCallback(() => {
     shakeAnim.setValue(0);
     Animated5.sequence([
       Animated5.timing(shakeAnim, { toValue: 10, duration: 50, useNativeDriver: true }),
@@ -2981,7 +3118,7 @@ function ChatComposer({
       Animated5.timing(shakeAnim, { toValue: 0, duration: 50, useNativeDriver: true })
     ]).start();
   }, [shakeAnim]);
-  const handleSend = React16.useCallback(async () => {
+  const handleSend = React18.useCallback(async () => {
     if (isButtonDisabled) return;
     if (!hasText) {
       triggerShake();
@@ -2993,14 +3130,15 @@ function ChatComposer({
   }, [attachments, hasText, isButtonDisabled, onSend, setText, text, triggerShake]);
   const textareaBgColor = theme.scheme === "dark" ? "#18181B" : "#F6F6F6";
   const placeholderTextColor = theme.scheme === "dark" ? "#A1A1AA" : "#71717A";
-  return /* @__PURE__ */ jsx15(
+  const sendBg = withAlpha(theme.colors.primary, isButtonDisabled ? 0.6 : sendPressed ? 0.9 : 1);
+  return /* @__PURE__ */ jsx17(
     View11,
     {
       style: [{ paddingHorizontal: 16, paddingBottom: 12, paddingTop: 8 }, style],
       onLayout: (e) => onLayout == null ? void 0 : onLayout({ height: e.nativeEvent.layout.height }),
       children: /* @__PURE__ */ jsxs8(View11, { style: { flexDirection: "row", alignItems: "flex-end", gap: 8 }, children: [
-        /* @__PURE__ */ jsx15(Animated5.View, { style: { flex: 1, transform: [{ translateX: shakeAnim }] }, children: /* @__PURE__ */ jsxs8(
-          LiquidGlassView3,
+        /* @__PURE__ */ jsx17(Animated5.View, { style: { flex: 1, transform: [{ translateX: shakeAnim }] }, children: /* @__PURE__ */ jsxs8(
+          ResettableLiquidGlassView,
           {
             style: [
               // LiquidGlassView doesn't reliably auto-size to children; ensure enough height for the
@@ -3019,7 +3157,7 @@ function ChatComposer({
                   keyboardShouldPersistTaps: "handled",
                   contentContainerStyle: { gap: 8, paddingHorizontal: 12, paddingTop: 12 },
                   children: [
-                    attachments.map((uri, index) => /* @__PURE__ */ jsx15(
+                    attachments.map((uri, index) => /* @__PURE__ */ jsx17(
                       AspectRatioThumbnail,
                       {
                         uri,
@@ -3028,7 +3166,7 @@ function ChatComposer({
                       },
                       `attachment-${index}`
                     )),
-                    onAddAttachment ? renderAddAttachment ? renderAddAttachment() : /* @__PURE__ */ jsx15(
+                    onAddAttachment ? renderAddAttachment ? renderAddAttachment() : /* @__PURE__ */ jsx17(
                       Pressable4,
                       {
                         style: {
@@ -3043,13 +3181,13 @@ function ChatComposer({
                           backgroundColor: "rgba(255, 255, 255, 0.05)"
                         },
                         onPress: onAddAttachment,
-                        children: /* @__PURE__ */ jsx15(Plus, { size: 24, color: "rgba(255, 255, 255, 0.5)" })
+                        children: /* @__PURE__ */ jsx17(Plus, { size: 24, color: "rgba(255, 255, 255, 0.5)" })
                       }
                     ) : null
                   ]
                 }
               ) : null,
-              /* @__PURE__ */ jsx15(
+              /* @__PURE__ */ jsx17(
                 MultilineTextInput,
                 {
                   ref: inputRef,
@@ -3074,13 +3212,13 @@ function ChatComposer({
             ]
           }
         ) }),
-        /* @__PURE__ */ jsx15(
-          LiquidGlassView3,
+        /* @__PURE__ */ jsx17(
+          ResettableLiquidGlassView,
           {
             style: [{ borderRadius: 100 }, !isLiquidGlassSupported3 && { backgroundColor: textareaBgColor }],
             interactive: true,
             effect: "clear",
-            children: /* @__PURE__ */ jsx15(
+            children: /* @__PURE__ */ jsx17(
               View11,
               {
                 style: {
@@ -3088,10 +3226,9 @@ function ChatComposer({
                   height: 44,
                   borderRadius: 22,
                   overflow: "hidden",
-                  backgroundColor: theme.colors.primary,
-                  opacity: isButtonDisabled ? 0.6 : sendPressed ? 0.9 : 1
+                  backgroundColor: sendBg
                 },
-                children: /* @__PURE__ */ jsx15(
+                children: /* @__PURE__ */ jsx17(
                   Pressable4,
                   {
                     accessibilityRole: "button",
@@ -3101,7 +3238,7 @@ function ChatComposer({
                     onPressIn: () => setSendPressed(true),
                     onPressOut: () => setSendPressed(false),
                     style: { flex: 1, alignItems: "center", justifyContent: "center" },
-                    children: sending ? /* @__PURE__ */ jsx15(ActivityIndicator2, {}) : renderSendIcon ? renderSendIcon() : /* @__PURE__ */ jsx15(IconChevronRight, { size: 20, colorToken: "onPrimary" })
+                    children: sending ? /* @__PURE__ */ jsx17(ActivityIndicator2, {}) : renderSendIcon ? renderSendIcon() : /* @__PURE__ */ jsx17(IconChevronRight, { size: 20, colorToken: "onPrimary" })
                   }
                 )
               }
@@ -3114,12 +3251,12 @@ function ChatComposer({
 }
 
 // src/components/comments/CommentRow.tsx
-import * as React17 from "react";
+import * as React19 from "react";
 import { View as View13 } from "react-native";
 
 // src/components/primitives/Avatar.tsx
 import { Image as Image2, View as View12 } from "react-native";
-import { jsx as jsx16 } from "react/jsx-runtime";
+import { jsx as jsx18 } from "react/jsx-runtime";
 function initialsFrom(name) {
   var _a, _b;
   const trimmed = (name ?? "").trim();
@@ -3137,7 +3274,7 @@ function Avatar({
   const theme = useTheme();
   const radius = size / 2;
   const fallbackBg = fallbackBackgroundColor ?? theme.colors.neutral;
-  return /* @__PURE__ */ jsx16(
+  return /* @__PURE__ */ jsx18(
     View12,
     {
       style: [
@@ -3152,14 +3289,14 @@ function Avatar({
         },
         style
       ],
-      children: uri ? /* @__PURE__ */ jsx16(
+      children: uri ? /* @__PURE__ */ jsx18(
         Image2,
         {
           source: { uri },
           style: [{ width: size, height: size }, imageStyle],
           resizeMode: "cover"
         }
-      ) : /* @__PURE__ */ jsx16(Text, { variant: "caption", style: { color: theme.colors.onNeutral }, children: initialsFrom(name) })
+      ) : /* @__PURE__ */ jsx18(Text, { variant: "caption", style: { color: theme.colors.onNeutral }, children: initialsFrom(name) })
     }
   );
 }
@@ -3183,12 +3320,12 @@ function formatTimeAgo(iso) {
 }
 
 // src/components/comments/CommentRow.tsx
-import { jsx as jsx17, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx19, jsxs as jsxs9 } from "react/jsx-runtime";
 function CommentRow({ comment, showDivider }) {
   const theme = useTheme();
-  const [authorName, setAuthorName] = React17.useState(null);
-  const [authorAvatar, setAuthorAvatar] = React17.useState(null);
-  React17.useEffect(() => {
+  const [authorName, setAuthorName] = React19.useState(null);
+  const [authorAvatar, setAuthorAvatar] = React19.useState(null);
+  React19.useEffect(() => {
     let cancelled = false;
     (async () => {
       try {
@@ -3214,13 +3351,13 @@ function CommentRow({ comment, showDivider }) {
         borderBottomColor: withAlpha(theme.colors.border, 0.5)
       },
       children: [
-        /* @__PURE__ */ jsx17(Avatar, { size: 32, uri: authorAvatar, name: authorName ?? comment.authorId, style: { marginTop: 6 } }),
+        /* @__PURE__ */ jsx19(Avatar, { size: 32, uri: authorAvatar, name: authorName ?? comment.authorId, style: { marginTop: 6 } }),
         /* @__PURE__ */ jsxs9(View13, { style: { flex: 1, minWidth: 0, gap: 4 }, children: [
           /* @__PURE__ */ jsxs9(View13, { style: { flexDirection: "row", alignItems: "center", gap: theme.spacing.sm }, children: [
-            /* @__PURE__ */ jsx17(Text, { style: { fontSize: 14, lineHeight: 18, fontWeight: theme.typography.fontWeight.bold, color: theme.colors.text }, children: authorName ?? "Unknown User" }),
-            /* @__PURE__ */ jsx17(Text, { style: { fontSize: 12, lineHeight: 16, color: theme.colors.textMuted }, children: formatTimeAgo(comment.createdAt) })
+            /* @__PURE__ */ jsx19(Text, { style: { fontSize: 14, lineHeight: 18, fontWeight: theme.typography.fontWeight.bold, color: theme.colors.text }, children: authorName ?? "Unknown User" }),
+            /* @__PURE__ */ jsx19(Text, { style: { fontSize: 12, lineHeight: 16, color: theme.colors.textMuted }, children: formatTimeAgo(comment.createdAt) })
           ] }),
-          /* @__PURE__ */ jsx17(Text, { style: { fontSize: 14, lineHeight: 20, color: theme.colors.text }, children: comment.body ?? comment.description ?? "" })
+          /* @__PURE__ */ jsx19(Text, { style: { fontSize: 14, lineHeight: 20, color: theme.colors.text }, children: comment.body ?? comment.description ?? "" })
         ] })
       ]
     }
@@ -3228,7 +3365,7 @@ function CommentRow({ comment, showDivider }) {
 }
 
 // src/components/comments/useAppComments.ts
-import * as React18 from "react";
+import * as React20 from "react";
 
 // src/data/comments/remote.ts
 var AppCommentsRemoteDataSourceImpl = class extends BaseRemote {
@@ -3300,18 +3437,18 @@ var appCommentsRepository = new AppCommentsRepositoryImpl(appCommentsRemoteDataS
 
 // src/components/comments/useAppComments.ts
 function useAppComments(appId) {
-  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) => {
+  const [comments, setComments] = React20.useState([]);
+  const [loading, setLoading] = React20.useState(false);
+  const [sending, setSending] = React20.useState(false);
+  const [error, setError] = React20.useState(null);
+  const sortByCreatedAtAsc = React20.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 = React18.useCallback(async () => {
+  const refresh = React20.useCallback(async () => {
     if (!appId) {
       setComments([]);
       return;
@@ -3328,10 +3465,10 @@ function useAppComments(appId) {
       setLoading(false);
     }
   }, [appId, sortByCreatedAtAsc]);
-  React18.useEffect(() => {
+  React20.useEffect(() => {
     void refresh();
   }, [refresh]);
-  const create = React18.useCallback(
+  const create = React20.useCallback(
     async (text) => {
       if (!appId) return;
       const trimmed = text.trim();
@@ -3354,11 +3491,11 @@ function useAppComments(appId) {
 }
 
 // src/components/comments/useAppDetails.ts
-import * as React19 from "react";
+import * as React21 from "react";
 function useAppDetails(appId) {
-  const [app, setApp] = React19.useState(null);
-  const [loading, setLoading] = React19.useState(false);
-  React19.useEffect(() => {
+  const [app, setApp] = React21.useState(null);
+  const [loading, setLoading] = React21.useState(false);
+  React21.useEffect(() => {
     if (!appId) {
       setApp(null);
       return;
@@ -3383,12 +3520,12 @@ function useAppDetails(appId) {
 }
 
 // src/components/comments/useIosKeyboardSnapFix.ts
-import * as React20 from "react";
-import { Keyboard as Keyboard2, Platform as Platform3 } from "react-native";
+import * as React22 from "react";
+import { Keyboard as Keyboard2, Platform as Platform5 } from "react-native";
 function useIosKeyboardSnapFix(sheetRef, options) {
-  const [keyboardVisible, setKeyboardVisible] = React20.useState(false);
-  React20.useEffect(() => {
-    if (Platform3.OS !== "ios") return;
+  const [keyboardVisible, setKeyboardVisible] = React22.useState(false);
+  React22.useEffect(() => {
+    if (Platform5.OS !== "ios") return;
     const show = Keyboard2.addListener("keyboardWillShow", () => setKeyboardVisible(true));
     const hide = Keyboard2.addListener("keyboardWillHide", () => {
       var _a;
@@ -3411,20 +3548,20 @@ function useIosKeyboardSnapFix(sheetRef, options) {
 }
 
 // src/components/comments/AppCommentsSheet.tsx
-import { jsx as jsx18, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx20, jsxs as jsxs10 } from "react/jsx-runtime";
 function AppCommentsSheet({ appId, onClose, onCountChange, onPlayApp }) {
   const theme = useTheme();
   const insets = useSafeAreaInsets3();
-  const sheetRef = React21.useRef(null);
-  const snapPoints = React21.useMemo(() => ["50%", "90%"], []);
-  const currentIndexRef = React21.useRef(1);
+  const sheetRef = React23.useRef(null);
+  const snapPoints = React23.useMemo(() => ["50%", "90%"], []);
+  const currentIndexRef = React23.useRef(1);
   const { comments, loading, sending, error, create, refresh } = useAppComments(appId);
   const { app, loading: loadingApp } = useAppDetails(appId);
   const { keyboardVisible } = useIosKeyboardSnapFix(sheetRef, {
     getCurrentIndex: () => currentIndexRef.current,
     targetIndex: 1
   });
-  React21.useEffect(() => {
+  React23.useEffect(() => {
     var _a, _b;
     if (appId) {
       (_a = sheetRef.current) == null ? void 0 : _a.present();
@@ -3433,29 +3570,29 @@ function AppCommentsSheet({ appId, onClose, onCountChange, onPlayApp }) {
       (_b = sheetRef.current) == null ? void 0 : _b.dismiss();
     }
   }, [appId, refresh]);
-  React21.useEffect(() => {
+  React23.useEffect(() => {
     if (!appId) return;
     onCountChange == null ? void 0 : onCountChange(comments.length);
   }, [appId, comments.length, onCountChange]);
-  const renderBackdrop = React21.useCallback(
-    (props) => /* @__PURE__ */ jsx18(BottomSheetBackdrop, { ...props, disappearsOnIndex: -1, appearsOnIndex: 0, opacity: 0.5 }),
+  const renderBackdrop = React23.useCallback(
+    (props) => /* @__PURE__ */ jsx20(BottomSheetBackdrop, { ...props, disappearsOnIndex: -1, appearsOnIndex: 0, opacity: 0.5 }),
     []
   );
-  const handleChange = React21.useCallback(
+  const handleChange = React23.useCallback(
     (index) => {
       currentIndexRef.current = index;
       if (index === -1) onClose();
     },
     [onClose]
   );
-  const handlePlay = React21.useCallback(async () => {
+  const handlePlay = React23.useCallback(async () => {
     var _a;
     if (!appId) return;
     (_a = sheetRef.current) == null ? void 0 : _a.dismiss();
     await (onPlayApp == null ? void 0 : onPlayApp(appId));
     onClose();
   }, [appId, onClose, onPlayApp]);
-  return /* @__PURE__ */ jsx18(
+  return /* @__PURE__ */ jsx20(
     BottomSheetModal,
     {
       ref: sheetRef,
@@ -3466,8 +3603,8 @@ function AppCommentsSheet({ appId, onClose, onCountChange, onPlayApp }) {
       onChange: handleChange,
       backgroundStyle: {
         backgroundColor: theme.scheme === "dark" ? "#0B080F" : "#FFFFFF",
-        borderTopLeftRadius: Platform4.OS === "ios" ? 39 : 16,
-        borderTopRightRadius: Platform4.OS === "ios" ? 39 : 16
+        borderTopLeftRadius: Platform6.OS === "ios" ? 39 : 16,
+        borderTopRightRadius: Platform6.OS === "ios" ? 39 : 16
       },
       handleIndicatorStyle: { backgroundColor: theme.colors.handleIndicator },
       keyboardBehavior: "interactive",
@@ -3488,7 +3625,7 @@ function AppCommentsSheet({ appId, onClose, onCountChange, onPlayApp }) {
               borderBottomColor: withAlpha(theme.colors.border, 0.1)
             },
             children: [
-              /* @__PURE__ */ jsx18(
+              /* @__PURE__ */ jsx20(
                 Text,
                 {
                   numberOfLines: 1,
@@ -3502,8 +3639,8 @@ function AppCommentsSheet({ appId, onClose, onCountChange, onPlayApp }) {
                   children: loadingApp ? "Loading..." : (app == null ? void 0 : app.name) || "Comments"
                 }
               ),
-              /* @__PURE__ */ jsx18(
-                LiquidGlassView4,
+              /* @__PURE__ */ jsx20(
+                ResettableLiquidGlassView,
                 {
                   style: [
                     { borderRadius: 24 },
@@ -3511,19 +3648,18 @@ function AppCommentsSheet({ appId, onClose, onCountChange, onPlayApp }) {
                   ],
                   interactive: true,
                   effect: "clear",
-                  children: /* @__PURE__ */ jsx18(
+                  children: /* @__PURE__ */ jsx20(
                     View14,
                     {
                       style: {
                         width: 32,
                         height: 32,
                         borderRadius: 999,
-                        backgroundColor: theme.colors.primary,
+                        backgroundColor: withAlpha(theme.colors.primary, appId ? 1 : 0.5),
                         alignItems: "center",
-                        justifyContent: "center",
-                        opacity: appId ? 1 : 0.5
+                        justifyContent: "center"
                       },
-                      children: /* @__PURE__ */ jsx18(
+                      children: /* @__PURE__ */ jsx20(
                         Pressable5,
                         {
                           disabled: !appId,
@@ -3536,9 +3672,9 @@ function AppCommentsSheet({ appId, onClose, onCountChange, onPlayApp }) {
                               alignItems: "center",
                               justifyContent: "center"
                             },
-                            pressed ? { opacity: 0.85 } : null
+                            pressed ? { transform: [{ scale: 0.96 }] } : null
                           ],
-                          children: /* @__PURE__ */ jsx18(Play2, { size: 16, color: theme.colors.onPrimary })
+                          children: /* @__PURE__ */ jsx20(Play2, { size: 16, color: theme.colors.onPrimary })
                         }
                       )
                     }
@@ -3559,12 +3695,12 @@ function AppCommentsSheet({ appId, onClose, onCountChange, onPlayApp }) {
             },
             keyboardShouldPersistTaps: "handled",
             children: [
-              loading && comments.length === 0 ? /* @__PURE__ */ jsx18(View14, { style: { flex: 1, alignItems: "center", justifyContent: "center" }, children: /* @__PURE__ */ jsx18(ActivityIndicator3, {}) }) : comments.length === 0 ? /* @__PURE__ */ jsx18(View14, { style: { flex: 1, alignItems: "center", justifyContent: "center" }, children: /* @__PURE__ */ jsx18(Text, { variant: "bodyMuted", style: { textAlign: "center" }, children: "No comments yet" }) }) : comments.map((c, idx) => /* @__PURE__ */ jsx18(CommentRow, { comment: c, showDivider: idx < comments.length - 1 }, c.id)),
-              error ? /* @__PURE__ */ jsx18(Text, { variant: "captionMuted", style: { marginTop: theme.spacing.lg }, children: "Failed to load comments." }) : null
+              loading && comments.length === 0 ? /* @__PURE__ */ jsx20(View14, { style: { flex: 1, alignItems: "center", justifyContent: "center" }, children: /* @__PURE__ */ jsx20(ActivityIndicator3, {}) }) : comments.length === 0 ? /* @__PURE__ */ jsx20(View14, { style: { flex: 1, alignItems: "center", justifyContent: "center" }, children: /* @__PURE__ */ jsx20(Text, { variant: "bodyMuted", style: { textAlign: "center" }, children: "No comments yet" }) }) : comments.map((c, idx) => /* @__PURE__ */ jsx20(CommentRow, { comment: c, showDivider: idx < comments.length - 1 }, c.id)),
+              error ? /* @__PURE__ */ jsx20(Text, { variant: "captionMuted", style: { marginTop: theme.spacing.lg }, children: "Failed to load comments." }) : null
             ]
           }
         ),
-        /* @__PURE__ */ jsx18(
+        /* @__PURE__ */ jsx20(
           View14,
           {
             style: {
@@ -3574,12 +3710,12 @@ function AppCommentsSheet({ appId, onClose, onCountChange, onPlayApp }) {
               bottom: 0,
               paddingHorizontal: theme.spacing.lg,
               paddingTop: theme.spacing.sm,
-              paddingBottom: Platform4.OS === "ios" ? keyboardVisible ? theme.spacing.lg : insets.bottom : insets.bottom + 10,
+              paddingBottom: Platform6.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)
             },
-            children: /* @__PURE__ */ jsx18(
+            children: /* @__PURE__ */ jsx20(
               ChatComposer,
               {
                 placeholder: "Write a comment...",
@@ -3605,12 +3741,12 @@ import { ActivityIndicator as ActivityIndicator7, View as View33 } from "react-n
 // src/components/preview/PreviewPage.tsx
 import { View as View15 } from "react-native";
 import { BottomSheetScrollView as BottomSheetScrollView2 } from "@gorhom/bottom-sheet";
-import { jsx as jsx19, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx21, jsxs as jsxs11 } from "react/jsx-runtime";
 function PreviewPage({ header, children, contentStyle }) {
   const theme = useTheme();
   return /* @__PURE__ */ jsxs11(View15, { style: { flex: 1 }, children: [
-    header ? /* @__PURE__ */ jsx19(View15, { children: header }) : null,
-    /* @__PURE__ */ jsx19(
+    header ? /* @__PURE__ */ jsx21(View15, { children: header }) : null,
+    /* @__PURE__ */ jsx21(
       BottomSheetScrollView2,
       {
         style: { flex: 1 },
@@ -3633,7 +3769,7 @@ import { View as View18 } from "react-native";
 
 // src/components/studio-sheet/StudioSheetHeader.tsx
 import { View as View16 } from "react-native";
-import { jsx as jsx20, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx22, jsxs as jsxs12 } from "react/jsx-runtime";
 function StudioSheetHeader({ left, center, right, style }) {
   const theme = useTheme();
   return /* @__PURE__ */ jsxs12(
@@ -3650,19 +3786,19 @@ function StudioSheetHeader({ left, center, right, style }) {
         style
       ],
       children: [
-        /* @__PURE__ */ jsx20(View16, { style: { flexDirection: "row", alignItems: "center" }, children: left }),
-        /* @__PURE__ */ jsx20(View16, { style: { flex: 1, alignItems: "center" }, children: center }),
-        /* @__PURE__ */ jsx20(View16, { style: { flexDirection: "row", alignItems: "center" }, children: right })
+        /* @__PURE__ */ jsx22(View16, { style: { flexDirection: "row", alignItems: "center" }, children: left }),
+        /* @__PURE__ */ jsx22(View16, { style: { flex: 1, alignItems: "center" }, children: center }),
+        /* @__PURE__ */ jsx22(View16, { style: { flexDirection: "row", alignItems: "center" }, children: right })
       ]
     }
   );
 }
 
 // src/components/studio-sheet/StudioSheetHeaderIconButton.tsx
-import * as React22 from "react";
+import * as React24 from "react";
 import { Pressable as Pressable6, View as View17 } from "react-native";
-import { LiquidGlassView as LiquidGlassView5, isLiquidGlassSupported as isLiquidGlassSupported5 } from "@callstack/liquid-glass";
-import { jsx as jsx21 } from "react/jsx-runtime";
+import { isLiquidGlassSupported as isLiquidGlassSupported5 } from "@callstack/liquid-glass";
+import { jsx as jsx23 } from "react/jsx-runtime";
 function StudioSheetHeaderIconButton({
   onPress,
   disabled,
@@ -3674,18 +3810,19 @@ function StudioSheetHeaderIconButton({
 }) {
   const theme = useTheme();
   const size = 44;
-  const [pressed, setPressed] = React22.useState(false);
+  const [pressed, setPressed] = React24.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__ */ jsx21(View17, { style, children: appearance === "glass" ? /* @__PURE__ */ jsx21(
-    LiquidGlassView5,
+  const glassBg = withAlpha(glassInnerBg, resolvedOpacity);
+  return /* @__PURE__ */ jsx23(View17, { style, children: appearance === "glass" ? /* @__PURE__ */ jsx23(
+    ResettableLiquidGlassView,
     {
       style: [{ borderRadius: 100 }, !isLiquidGlassSupported5 && { backgroundColor: glassFallbackBg }],
       interactive: true,
       effect: "clear",
-      children: /* @__PURE__ */ jsx21(
+      children: /* @__PURE__ */ jsx23(
         View17,
         {
           style: {
@@ -3694,10 +3831,9 @@ function StudioSheetHeaderIconButton({
             borderRadius: 100,
             alignItems: "center",
             justifyContent: "center",
-            backgroundColor: glassInnerBg,
-            opacity: resolvedOpacity
+            backgroundColor: glassBg
           },
-          children: /* @__PURE__ */ jsx21(
+          children: /* @__PURE__ */ jsx23(
             Pressable6,
             {
               accessibilityRole: "button",
@@ -3716,7 +3852,7 @@ function StudioSheetHeaderIconButton({
         }
       )
     }
-  ) : /* @__PURE__ */ jsx21(
+  ) : /* @__PURE__ */ jsx23(
     View17,
     {
       style: {
@@ -3728,7 +3864,7 @@ function StudioSheetHeaderIconButton({
         backgroundColor: solidBg,
         opacity: resolvedOpacity
       },
-      children: /* @__PURE__ */ jsx21(
+      children: /* @__PURE__ */ jsx23(
         Pressable6,
         {
           accessibilityRole: "button",
@@ -3749,15 +3885,15 @@ function StudioSheetHeaderIconButton({
 }
 
 // src/studio/ui/preview-panel/PreviewPanelHeader.tsx
-import { jsx as jsx22, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx24, jsxs as jsxs13 } from "react/jsx-runtime";
 function PreviewPanelHeader({ isOwner, onClose, onNavigateHome, onGoToChat }) {
-  return /* @__PURE__ */ jsx22(
+  return /* @__PURE__ */ jsx24(
     StudioSheetHeader,
     {
-      left: onNavigateHome ? /* @__PURE__ */ jsx22(StudioSheetHeaderIconButton, { onPress: onNavigateHome, accessibilityLabel: "Home", appearance: "glass", intent: "primary", children: /* @__PURE__ */ jsx22(IconHome, { size: 20, colorToken: "onPrimary" }) }) : null,
+      left: onNavigateHome ? /* @__PURE__ */ jsx24(StudioSheetHeaderIconButton, { onPress: onNavigateHome, accessibilityLabel: "Home", appearance: "glass", intent: "primary", children: /* @__PURE__ */ jsx24(IconHome, { size: 20, colorToken: "onPrimary" }) }) : null,
       center: null,
       right: /* @__PURE__ */ jsxs13(View18, { style: { flexDirection: "row", alignItems: "center" }, children: [
-        isOwner ? /* @__PURE__ */ jsx22(
+        isOwner ? /* @__PURE__ */ jsx24(
           StudioSheetHeaderIconButton,
           {
             onPress: onGoToChat,
@@ -3765,10 +3901,10 @@ function PreviewPanelHeader({ isOwner, onClose, onNavigateHome, onGoToChat }) {
             intent: "primary",
             appearance: "glass",
             style: { marginRight: 8 },
-            children: /* @__PURE__ */ jsx22(IconChat, { size: 20, colorToken: "onPrimary" })
+            children: /* @__PURE__ */ jsx24(IconChat, { size: 20, colorToken: "onPrimary" })
           }
         ) : null,
-        /* @__PURE__ */ jsx22(StudioSheetHeaderIconButton, { onPress: onClose, accessibilityLabel: "Close", appearance: "glass", intent: "primary", children: /* @__PURE__ */ jsx22(IconClose, { size: 20, colorToken: "onPrimary" }) })
+        /* @__PURE__ */ jsx24(StudioSheetHeaderIconButton, { onPress: onClose, accessibilityLabel: "Close", appearance: "glass", intent: "primary", children: /* @__PURE__ */ jsx24(IconClose, { size: 20, colorToken: "onPrimary" }) })
       ] })
     }
   );
@@ -3779,7 +3915,7 @@ import { View as View20 } from "react-native";
 
 // src/components/primitives/Surface.tsx
 import { View as View19 } from "react-native";
-import { jsx as jsx23 } from "react/jsx-runtime";
+import { jsx as jsx25 } from "react/jsx-runtime";
 function backgroundFor(variant, theme) {
   const { colors } = theme;
   switch (variant) {
@@ -3796,7 +3932,7 @@ function backgroundFor(variant, theme) {
 }
 function Surface({ variant = "surface", border = false, style, ...props }) {
   const theme = useTheme();
-  return /* @__PURE__ */ jsx23(
+  return /* @__PURE__ */ jsx25(
     View19,
     {
       ...props,
@@ -3810,12 +3946,12 @@ function Surface({ variant = "surface", border = false, style, ...props }) {
 }
 
 // src/components/primitives/Card.tsx
-import { jsx as jsx24 } from "react/jsx-runtime";
+import { jsx as jsx26 } from "react/jsx-runtime";
 function Card({ variant = "surface", padded = true, border = true, style, ...props }) {
   const theme = useTheme();
   const radius = theme.radii.lg;
   const padding = padded ? theme.spacing.lg : 0;
-  return /* @__PURE__ */ jsx24(
+  return /* @__PURE__ */ jsx26(
     Surface,
     {
       ...props,
@@ -3827,7 +3963,7 @@ function Card({ variant = "surface", padded = true, border = true, style, ...pro
 }
 
 // src/components/preview/PreviewHeroCard.tsx
-import { jsx as jsx25, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx27, jsxs as jsxs14 } from "react/jsx-runtime";
 function PreviewHeroCard({
   aspectRatio = 4 / 3,
   overlayTopLeft,
@@ -3838,7 +3974,7 @@ function PreviewHeroCard({
 }) {
   const theme = useTheme();
   const radius = 16;
-  return /* @__PURE__ */ jsx25(
+  return /* @__PURE__ */ jsx27(
     Card,
     {
       variant: "surfaceRaised",
@@ -3854,24 +3990,24 @@ function PreviewHeroCard({
         style
       ],
       children: /* @__PURE__ */ jsxs14(View20, { style: { flex: 1 }, children: [
-        background ? /* @__PURE__ */ jsx25(View20, { style: { position: "absolute", inset: 0 }, children: background }) : null,
-        image ? /* @__PURE__ */ jsx25(View20, { style: { position: "absolute", inset: 0 }, children: image }) : null,
-        overlayTopLeft ? /* @__PURE__ */ jsx25(View20, { style: { position: "absolute", top: theme.spacing.sm, left: theme.spacing.sm, zIndex: 2 }, children: overlayTopLeft }) : null,
-        overlayBottom ? /* @__PURE__ */ jsx25(View20, { style: { flex: 1, justifyContent: "flex-end" }, children: overlayBottom }) : null
+        background ? /* @__PURE__ */ jsx27(View20, { style: { position: "absolute", inset: 0 }, children: background }) : null,
+        image ? /* @__PURE__ */ jsx27(View20, { style: { position: "absolute", inset: 0 }, children: image }) : null,
+        overlayTopLeft ? /* @__PURE__ */ jsx27(View20, { style: { position: "absolute", top: theme.spacing.sm, left: theme.spacing.sm, zIndex: 2 }, children: overlayTopLeft }) : null,
+        overlayBottom ? /* @__PURE__ */ jsx27(View20, { style: { flex: 1, justifyContent: "flex-end" }, children: overlayBottom }) : null
       ] })
     }
   );
 }
 
 // src/components/preview/PreviewPlaceholder.tsx
-import * as React23 from "react";
+import * as React25 from "react";
 import { Animated as Animated6 } from "react-native";
 import { LinearGradient as LinearGradient2 } from "expo-linear-gradient";
-import { Fragment as Fragment3, jsx as jsx26, jsxs as jsxs15 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx28, jsxs as jsxs15 } from "react/jsx-runtime";
 function PreviewPlaceholder({ visible, style }) {
   if (!visible) return null;
-  const opacityAnim = React23.useRef(new Animated6.Value(0)).current;
-  React23.useEffect(() => {
+  const opacityAnim = React25.useRef(new Animated6.Value(0)).current;
+  React25.useEffect(() => {
     if (!visible) return;
     const animation = Animated6.loop(
       Animated6.sequence([
@@ -3889,7 +4025,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__ */ jsxs15(Fragment3, { children: [
-    /* @__PURE__ */ jsx26(Animated6.View, { style: [{ position: "absolute", inset: 0, opacity: opacity1 }, style], children: /* @__PURE__ */ jsx26(
+    /* @__PURE__ */ jsx28(Animated6.View, { style: [{ position: "absolute", inset: 0, opacity: opacity1 }, style], children: /* @__PURE__ */ jsx28(
       LinearGradient2,
       {
         colors: ["rgba(98, 0, 238, 0.45)", "rgba(168, 85, 247, 0.35)"],
@@ -3898,7 +4034,7 @@ function PreviewPlaceholder({ visible, style }) {
         style: { width: "100%", height: "100%" }
       }
     ) }),
-    /* @__PURE__ */ jsx26(Animated6.View, { style: [{ position: "absolute", inset: 0, opacity: opacity2 }, style], children: /* @__PURE__ */ jsx26(
+    /* @__PURE__ */ jsx28(Animated6.View, { style: [{ position: "absolute", inset: 0, opacity: opacity2 }, style], children: /* @__PURE__ */ jsx28(
       LinearGradient2,
       {
         colors: ["rgba(168, 85, 247, 0.45)", "rgba(139, 92, 246, 0.35)"],
@@ -3907,7 +4043,7 @@ function PreviewPlaceholder({ visible, style }) {
         style: { width: "100%", height: "100%" }
       }
     ) }),
-    /* @__PURE__ */ jsx26(Animated6.View, { style: [{ position: "absolute", inset: 0, opacity: opacity3 }, style], children: /* @__PURE__ */ jsx26(
+    /* @__PURE__ */ jsx28(Animated6.View, { style: [{ position: "absolute", inset: 0, opacity: opacity3 }, style], children: /* @__PURE__ */ jsx28(
       LinearGradient2,
       {
         colors: ["rgba(139, 92, 246, 0.45)", "rgba(126, 34, 206, 0.35)"],
@@ -3916,7 +4052,7 @@ function PreviewPlaceholder({ visible, style }) {
         style: { width: "100%", height: "100%" }
       }
     ) }),
-    /* @__PURE__ */ jsx26(Animated6.View, { style: [{ position: "absolute", inset: 0, opacity: opacity4 }, style], children: /* @__PURE__ */ jsx26(
+    /* @__PURE__ */ jsx28(Animated6.View, { style: [{ position: "absolute", inset: 0, opacity: opacity4 }, style], children: /* @__PURE__ */ jsx28(
       LinearGradient2,
       {
         colors: ["rgba(126, 34, 206, 0.45)", "rgba(98, 0, 238, 0.35)"],
@@ -3930,10 +4066,10 @@ function PreviewPlaceholder({ visible, style }) {
 
 // src/components/preview/PreviewImage.tsx
 import { Image as Image3 } from "react-native";
-import { jsx as jsx27 } from "react/jsx-runtime";
+import { jsx as jsx29 } from "react/jsx-runtime";
 function PreviewImage({ uri, onLoad, style }) {
   if (!uri) return null;
-  return /* @__PURE__ */ jsx27(
+  return /* @__PURE__ */ jsx29(
     Image3,
     {
       source: { uri },
@@ -3946,14 +4082,14 @@ function PreviewImage({ uri, onLoad, style }) {
 
 // src/components/preview/StatsBar.tsx
 import { Pressable as Pressable7, View as View21 } from "react-native";
-import { LiquidGlassView as LiquidGlassView6, isLiquidGlassSupported as isLiquidGlassSupported6 } from "@callstack/liquid-glass";
+import { isLiquidGlassSupported as isLiquidGlassSupported6 } from "@callstack/liquid-glass";
 import { Heart, MessageCircle } from "lucide-react-native";
 
 // src/components/icons/MergeIcon.tsx
 import Svg2, { Path as Path2 } from "react-native-svg";
-import { jsx as jsx28 } from "react/jsx-runtime";
+import { jsx as jsx30 } from "react/jsx-runtime";
 function MergeIcon({ color = "currentColor", width = 24, height = 24, ...props }) {
-  return /* @__PURE__ */ jsx28(Svg2, { viewBox: "0 0 486 486", width, height, ...props, children: /* @__PURE__ */ jsx28(
+  return /* @__PURE__ */ jsx30(Svg2, { viewBox: "0 0 486 486", width, height, ...props, children: /* @__PURE__ */ jsx30(
     Path2,
     {
       d: "M237.025 0H243.664C254.876 95.0361 275.236 175.597 304.743 241.684C334.249 307.478 367.002 357.774 403 392.572L389.722 486C361.691 458.22 338.233 429.417 319.349 399.59C300.464 369.764 284.531 335.843 271.548 297.829C258.565 259.522 246.615 214.343 235.697 162.292L237.91 161.415C228.468 214.928 217.993 261.569 206.485 301.338C194.978 341.107 179.634 375.904 160.455 405.731C141.571 435.265 115.752 462.022 83 486L96.278 392.572C124.014 369.179 147.62 336.72 167.094 295.197C186.864 253.381 202.65 206.886 214.452 155.713C226.255 104.247 233.779 52.343 237.025 0Z",
@@ -3963,7 +4099,7 @@ function MergeIcon({ color = "currentColor", width = 24, height = 24, ...props }
 }
 
 // src/components/preview/StatsBar.tsx
-import { jsx as jsx29, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx31, jsxs as jsxs16 } from "react/jsx-runtime";
 function StatsBar({
   likeCount,
   commentCount,
@@ -3977,7 +4113,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__ */ jsx29(
+  return /* @__PURE__ */ jsx31(
     View21,
     {
       style: [
@@ -3985,8 +4121,8 @@ function StatsBar({
         centered && { alignItems: "center" },
         style
       ],
-      children: /* @__PURE__ */ jsx29(
-        LiquidGlassView6,
+      children: /* @__PURE__ */ jsx31(
+        ResettableLiquidGlassView,
         {
           style: [
             { borderRadius: 100, overflow: "hidden" },
@@ -3995,7 +4131,7 @@ function StatsBar({
           ],
           effect: "clear",
           children: /* @__PURE__ */ jsxs16(View21, { style: { flexDirection: "row", alignItems: "center", justifyContent: "space-between", paddingHorizontal: 16 }, children: [
-            /* @__PURE__ */ jsx29(
+            /* @__PURE__ */ jsx31(
               Pressable7,
               {
                 disabled: !onPressLike,
@@ -4003,7 +4139,7 @@ function StatsBar({
                 hitSlop: 8,
                 style: { paddingVertical: 8 },
                 children: /* @__PURE__ */ jsxs16(View21, { style: { flexDirection: "row", alignItems: "center" }, children: [
-                  /* @__PURE__ */ jsx29(
+                  /* @__PURE__ */ jsx31(
                     Heart,
                     {
                       size: 16,
@@ -4012,8 +4148,8 @@ function StatsBar({
                       fill: isLiked ? theme.colors.danger : "transparent"
                     }
                   ),
-                  /* @__PURE__ */ jsx29(View21, { style: { width: 4 } }),
-                  /* @__PURE__ */ jsx29(
+                  /* @__PURE__ */ jsx31(View21, { style: { width: 4 } }),
+                  /* @__PURE__ */ jsx31(
                     Text,
                     {
                       variant: "caption",
@@ -4027,7 +4163,7 @@ function StatsBar({
                 ] })
               }
             ),
-            /* @__PURE__ */ jsx29(
+            /* @__PURE__ */ jsx31(
               Pressable7,
               {
                 disabled: !onPressComments,
@@ -4035,16 +4171,16 @@ function StatsBar({
                 hitSlop: 8,
                 style: { paddingVertical: 8 },
                 children: /* @__PURE__ */ jsxs16(View21, { style: { flexDirection: "row", alignItems: "center" }, children: [
-                  /* @__PURE__ */ jsx29(MessageCircle, { size: 16, strokeWidth: 2.5, color: "#FFFFFF" }),
-                  /* @__PURE__ */ jsx29(View21, { style: { width: 4 } }),
-                  /* @__PURE__ */ jsx29(Text, { variant: "caption", style: { color: "#FFFFFF", fontWeight: theme.typography.fontWeight.bold }, children: commentCount })
+                  /* @__PURE__ */ jsx31(MessageCircle, { size: 16, strokeWidth: 2.5, color: "#FFFFFF" }),
+                  /* @__PURE__ */ jsx31(View21, { style: { width: 4 } }),
+                  /* @__PURE__ */ jsx31(Text, { variant: "caption", style: { color: "#FFFFFF", fontWeight: theme.typography.fontWeight.bold }, children: commentCount })
                 ] })
               }
             ),
             /* @__PURE__ */ jsxs16(View21, { style: { flexDirection: "row", alignItems: "center", paddingVertical: 8 }, children: [
-              /* @__PURE__ */ jsx29(View21, { style: { transform: [{ scaleY: -1 }] }, children: /* @__PURE__ */ jsx29(MergeIcon, { width: 14, height: 14, color: "#FFFFFF" }) }),
-              /* @__PURE__ */ jsx29(View21, { style: { width: 4 } }),
-              /* @__PURE__ */ jsx29(Text, { variant: "caption", style: { color: "#FFFFFF", fontWeight: theme.typography.fontWeight.bold }, children: forkCount })
+              /* @__PURE__ */ jsx31(View21, { style: { transform: [{ scaleY: -1 }] }, children: /* @__PURE__ */ jsx31(MergeIcon, { width: 14, height: 14, color: "#FFFFFF" }) }),
+              /* @__PURE__ */ jsx31(View21, { style: { width: 4 } }),
+              /* @__PURE__ */ jsx31(Text, { variant: "caption", style: { color: "#FFFFFF", fontWeight: theme.typography.fontWeight.bold }, children: forkCount })
             ] })
           ] })
         }
@@ -4077,7 +4213,7 @@ var APP_STATUS_LABEL = {
 };
 
 // src/components/preview/PreviewStatusBadge.tsx
-import { jsx as jsx30, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx32, jsxs as jsxs17 } from "react/jsx-runtime";
 var STATUS_BG = {
   ready: "#10B981",
   // emerald-500
@@ -4118,15 +4254,15 @@ function PreviewStatusBadge({ status }) {
         backgroundColor: STATUS_BG[status]
       },
       children: [
-        /* @__PURE__ */ jsx30(IconComp, { size: 12, color: "#FFFFFF", style: { marginRight: 4 } }),
-        /* @__PURE__ */ jsx30(Text, { style: { color: "#FFFFFF", fontSize: 11, lineHeight: 14 }, children: label })
+        /* @__PURE__ */ jsx32(IconComp, { size: 12, color: "#FFFFFF", style: { marginRight: 4 } }),
+        /* @__PURE__ */ jsx32(Text, { style: { color: "#FFFFFF", fontSize: 11, lineHeight: 14 }, children: label })
       ]
     }
   );
 }
 
 // src/studio/ui/preview-panel/PreviewHeroSection.tsx
-import { jsx as jsx31 } from "react/jsx-runtime";
+import { jsx as jsx33 } from "react/jsx-runtime";
 function PreviewHeroSection({
   appStatus,
   showProcessing,
@@ -4135,13 +4271,13 @@ function PreviewHeroSection({
   onImageLoad,
   stats
 }) {
-  return /* @__PURE__ */ jsx31(
+  return /* @__PURE__ */ jsx33(
     PreviewHeroCard,
     {
-      overlayTopLeft: showProcessing ? /* @__PURE__ */ jsx31(PreviewStatusBadge, { status: appStatus }) : null,
-      background: /* @__PURE__ */ jsx31(PreviewPlaceholder, { visible: !imageLoaded }),
-      image: /* @__PURE__ */ jsx31(PreviewImage, { uri: imageUrl, onLoad: onImageLoad }),
-      overlayBottom: /* @__PURE__ */ jsx31(
+      overlayTopLeft: showProcessing ? /* @__PURE__ */ jsx33(PreviewStatusBadge, { status: appStatus }) : null,
+      background: /* @__PURE__ */ jsx33(PreviewPlaceholder, { visible: !imageLoaded }),
+      image: /* @__PURE__ */ jsx33(PreviewImage, { uri: imageUrl, onLoad: onImageLoad }),
+      overlayBottom: /* @__PURE__ */ jsx33(
         StatsBar,
         {
           likeCount: stats.likeCount,
@@ -4164,7 +4300,7 @@ import { View as View24 } from "react-native";
 
 // src/components/preview/PreviewMetaRow.tsx
 import { View as View23 } from "react-native";
-import { jsx as jsx32, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx34, jsxs as jsxs18 } from "react/jsx-runtime";
 function PreviewMetaRow({
   avatarUri,
   creatorName,
@@ -4177,9 +4313,9 @@ function PreviewMetaRow({
   const theme = useTheme();
   return /* @__PURE__ */ jsxs18(View23, { style: [{ alignSelf: "stretch" }, style], children: [
     /* @__PURE__ */ jsxs18(View23, { style: { flexDirection: "row", alignItems: "center" }, children: [
-      /* @__PURE__ */ jsx32(Avatar, { uri: avatarUri, name: creatorName, size: 24, style: { marginRight: theme.spacing.sm } }),
+      /* @__PURE__ */ jsx34(Avatar, { uri: avatarUri, name: creatorName, size: 24, style: { marginRight: theme.spacing.sm } }),
       /* @__PURE__ */ jsxs18(View23, { style: { flexDirection: "row", alignItems: "center", flex: 1, minWidth: 0, marginRight: theme.spacing.sm }, children: [
-        /* @__PURE__ */ jsx32(
+        /* @__PURE__ */ jsx34(
           Text,
           {
             numberOfLines: 1,
@@ -4193,11 +4329,11 @@ function PreviewMetaRow({
             children: title
           }
         ),
-        tag ? /* @__PURE__ */ jsx32(View23, { style: { marginLeft: theme.spacing.sm }, children: tag }) : null
+        tag ? /* @__PURE__ */ jsx34(View23, { style: { marginLeft: theme.spacing.sm }, children: tag }) : null
       ] }),
-      rightMetric ? /* @__PURE__ */ jsx32(View23, { children: rightMetric }) : null
+      rightMetric ? /* @__PURE__ */ jsx34(View23, { children: rightMetric }) : null
     ] }),
-    subtitle ? /* @__PURE__ */ jsx32(
+    subtitle ? /* @__PURE__ */ jsx34(
       Text,
       {
         numberOfLines: 2,
@@ -4240,18 +4376,18 @@ function statusDescription(status, statusError) {
 }
 
 // src/studio/ui/preview-panel/PreviewMetaSection.tsx
-import { jsx as jsx33, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx35, jsxs as jsxs19 } from "react/jsx-runtime";
 function PreviewMetaSection({ app, isOwner, creator, downloadsCount }) {
   var _a;
   const theme = useTheme();
-  return /* @__PURE__ */ jsx33(
+  return /* @__PURE__ */ jsx35(
     PreviewMetaRow,
     {
       title: app.name,
       subtitle: app.description,
       avatarUri: (creator == null ? void 0 : creator.avatar) ?? null,
       creatorName: (creator == null ? void 0 : creator.name) ?? null,
-      tag: isOwner || app.forkedFromAppId ? /* @__PURE__ */ jsx33(View24, { style: { paddingHorizontal: 8, paddingVertical: 2, borderRadius: 999, backgroundColor: "#3700B3" }, children: /* @__PURE__ */ jsx33(Text, { variant: "caption", style: { color: "#fff", fontWeight: theme.typography.fontWeight.semibold }, children: app.forkedFromAppId ? "Remix" : "Owner" }) }) : null,
+      tag: isOwner || app.forkedFromAppId ? /* @__PURE__ */ jsx35(View24, { style: { paddingHorizontal: 8, paddingVertical: 2, borderRadius: 999, backgroundColor: "#3700B3" }, children: /* @__PURE__ */ jsx35(Text, { variant: "caption", style: { color: "#fff", fontWeight: theme.typography.fontWeight.semibold }, children: app.forkedFromAppId ? "Remix" : "Owner" }) }) : null,
       rightMetric: /* @__PURE__ */ jsxs19(
         View24,
         {
@@ -4264,7 +4400,7 @@ function PreviewMetaSection({ app, isOwner, creator, downloadsCount }) {
             backgroundColor: withAlpha(theme.colors.neutral, 0.3)
           },
           children: [
-            /* @__PURE__ */ jsx33(
+            /* @__PURE__ */ jsx35(
               Text,
               {
                 style: {
@@ -4277,7 +4413,7 @@ function PreviewMetaSection({ app, isOwner, creator, downloadsCount }) {
                 children: formatCount(downloadsCount ?? ((_a = app.insights) == null ? void 0 : _a.totalDownloads) ?? 0)
               }
             ),
-            /* @__PURE__ */ jsx33(IconPlay, { size: 14, colorToken: "textMuted", fill: theme.colors.textMuted })
+            /* @__PURE__ */ jsx35(IconPlay, { size: 14, colorToken: "textMuted", fill: theme.colors.textMuted })
           ]
         }
       ),
@@ -4291,7 +4427,7 @@ import { ActivityIndicator as ActivityIndicator4, View as View26 } from "react-n
 
 // src/studio/ui/preview-panel/PressableCardRow.tsx
 import { Pressable as Pressable8, View as View25 } from "react-native";
-import { jsx as jsx34, jsxs as jsxs20 } from "react/jsx-runtime";
+import { jsx as jsx36, jsxs as jsxs20 } from "react/jsx-runtime";
 function PressableCardRow({
   accessibilityLabel,
   onPress,
@@ -4302,7 +4438,7 @@ function PressableCardRow({
   right,
   style
 }) {
-  return /* @__PURE__ */ jsx34(
+  return /* @__PURE__ */ jsx36(
     Pressable8,
     {
       accessibilityRole: "button",
@@ -4310,23 +4446,23 @@ function PressableCardRow({
       disabled,
       onPress,
       style: ({ pressed }) => ({ opacity: disabled ? 0.6 : pressed ? 0.85 : 1 }),
-      children: /* @__PURE__ */ jsx34(Card, { padded: false, border: false, style, children: /* @__PURE__ */ jsxs20(View25, { style: { flexDirection: "row", alignItems: "center" }, children: [
+      children: /* @__PURE__ */ jsx36(Card, { padded: false, border: false, style, children: /* @__PURE__ */ jsxs20(View25, { style: { flexDirection: "row", alignItems: "center" }, children: [
         left,
         /* @__PURE__ */ jsxs20(View25, { style: { flex: 1, minWidth: 0 }, children: [
           title,
           subtitle ? subtitle : null
         ] }),
-        right ? /* @__PURE__ */ jsx34(View25, { style: { marginLeft: 16 }, children: right }) : null
+        right ? /* @__PURE__ */ jsx36(View25, { style: { marginLeft: 16 }, children: right }) : null
       ] }) })
     }
   );
 }
 
 // src/studio/ui/preview-panel/SectionTitle.tsx
-import { jsx as jsx35 } from "react/jsx-runtime";
+import { jsx as jsx37 } from "react/jsx-runtime";
 function SectionTitle({ children, marginTop }) {
   const theme = useTheme();
-  return /* @__PURE__ */ jsx35(
+  return /* @__PURE__ */ jsx37(
     Text,
     {
       style: {
@@ -4345,7 +4481,7 @@ function SectionTitle({ children, marginTop }) {
 }
 
 // src/studio/ui/preview-panel/PreviewCustomizeSection.tsx
-import { Fragment as Fragment4, jsx as jsx36, jsxs as jsxs21 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx38, jsxs as jsxs21 } from "react/jsx-runtime";
 function PreviewCustomizeSection({
   app,
   isOwner,
@@ -4356,7 +4492,7 @@ function PreviewCustomizeSection({
 }) {
   const theme = useTheme();
   return /* @__PURE__ */ jsxs21(Fragment4, { children: [
-    /* @__PURE__ */ jsx36(SectionTitle, { children: "Customize" }),
+    /* @__PURE__ */ jsx38(SectionTitle, { children: "Customize" }),
     showProcessing ? /* @__PURE__ */ jsxs21(
       View26,
       {
@@ -4371,7 +4507,7 @@ function PreviewCustomizeSection({
           marginBottom: theme.spacing.sm
         },
         children: [
-          /* @__PURE__ */ jsx36(
+          /* @__PURE__ */ jsx38(
             View26,
             {
               style: {
@@ -4383,17 +4519,17 @@ function PreviewCustomizeSection({
                 backgroundColor: withAlpha(theme.colors.warning, 0.1),
                 marginRight: theme.spacing.lg
               },
-              children: /* @__PURE__ */ jsx36(ActivityIndicator4, { color: theme.colors.warning, size: "small" })
+              children: /* @__PURE__ */ jsx38(ActivityIndicator4, { color: theme.colors.warning, size: "small" })
             }
           ),
           /* @__PURE__ */ jsxs21(View26, { style: { flex: 1, minWidth: 0 }, children: [
-            /* @__PURE__ */ jsx36(Text, { style: { color: theme.colors.text, fontSize: 16, lineHeight: 20, fontWeight: theme.typography.fontWeight.semibold }, children: app.status === "error" ? "Error" : "Processing" }),
-            /* @__PURE__ */ jsx36(Text, { style: { color: theme.colors.textMuted, fontSize: 12, lineHeight: 16, marginTop: 2 }, children: statusDescription(app.status, app.statusError) })
+            /* @__PURE__ */ jsx38(Text, { style: { color: theme.colors.text, fontSize: 16, lineHeight: 20, fontWeight: theme.typography.fontWeight.semibold }, children: app.status === "error" ? "Error" : "Processing" }),
+            /* @__PURE__ */ jsx38(Text, { style: { color: theme.colors.textMuted, fontSize: 12, lineHeight: 16, marginTop: 2 }, children: statusDescription(app.status, app.statusError) })
           ] })
         ]
       }
     ) : null,
-    /* @__PURE__ */ jsx36(
+    /* @__PURE__ */ jsx38(
       PressableCardRow,
       {
         accessibilityLabel: isOwner ? "Edit app" : "Remix app",
@@ -4406,7 +4542,7 @@ function PreviewCustomizeSection({
           borderColor: withAlpha(theme.colors.primary, 0.1),
           marginBottom: theme.spacing.sm
         },
-        left: /* @__PURE__ */ jsx36(
+        left: /* @__PURE__ */ jsx38(
           View26,
           {
             style: {
@@ -4418,15 +4554,15 @@ function PreviewCustomizeSection({
               backgroundColor: withAlpha(theme.colors.primary, 0.1),
               marginRight: theme.spacing.lg
             },
-            children: /* @__PURE__ */ jsx36(IconChat, { size: 20, colorToken: "primary" })
+            children: /* @__PURE__ */ jsx38(IconChat, { size: 20, colorToken: "primary" })
           }
         ),
-        title: /* @__PURE__ */ jsx36(Text, { style: { color: theme.colors.text, fontSize: 16, lineHeight: 20, fontWeight: theme.typography.fontWeight.semibold }, children: isOwner ? app.forkedFromAppId ? "Edit your Remix" : "Edit Your App" : "Remix App" }),
-        subtitle: /* @__PURE__ */ jsx36(Text, { style: { color: theme.colors.textMuted, fontSize: 12, lineHeight: 16, marginTop: 2 }, children: isOwner && app.forkedFromAppId ? "Make changes to your remix with chat" : shouldForkOnEdit ? "Chat to create your own copy and edit it" : "Chat to apply changes" }),
-        right: /* @__PURE__ */ jsx36(IconChevronRight, { size: 20, colorToken: "textMuted" })
+        title: /* @__PURE__ */ jsx38(Text, { style: { color: theme.colors.text, fontSize: 16, lineHeight: 20, fontWeight: theme.typography.fontWeight.semibold }, children: isOwner ? app.forkedFromAppId ? "Edit your Remix" : "Edit Your App" : "Remix App" }),
+        subtitle: /* @__PURE__ */ jsx38(Text, { style: { color: theme.colors.textMuted, fontSize: 12, lineHeight: 16, marginTop: 2 }, children: isOwner && app.forkedFromAppId ? "Make changes to your remix with chat" : shouldForkOnEdit ? "Chat to create your own copy and edit it" : "Chat to apply changes" }),
+        right: /* @__PURE__ */ jsx38(IconChevronRight, { size: 20, colorToken: "textMuted" })
       }
     ),
-    isOwner && onStartDraw ? /* @__PURE__ */ jsx36(
+    isOwner && onStartDraw ? /* @__PURE__ */ jsx38(
       PressableCardRow,
       {
         accessibilityLabel: "Draw changes",
@@ -4439,7 +4575,7 @@ function PreviewCustomizeSection({
           borderColor: withAlpha(theme.colors.danger, 0.1),
           marginBottom: theme.spacing.sm
         },
-        left: /* @__PURE__ */ jsx36(
+        left: /* @__PURE__ */ jsx38(
           View26,
           {
             style: {
@@ -4451,31 +4587,31 @@ function PreviewCustomizeSection({
               backgroundColor: withAlpha(theme.colors.danger, 0.1),
               marginRight: theme.spacing.lg
             },
-            children: /* @__PURE__ */ jsx36(IconDraw, { size: 20, colorToken: "danger" })
+            children: /* @__PURE__ */ jsx38(IconDraw, { size: 20, colorToken: "danger" })
           }
         ),
-        title: /* @__PURE__ */ jsx36(Text, { style: { color: theme.colors.text, fontSize: 16, lineHeight: 20, fontWeight: theme.typography.fontWeight.semibold }, children: "Draw Changes" }),
-        subtitle: /* @__PURE__ */ jsx36(Text, { style: { color: theme.colors.textMuted, fontSize: 12, lineHeight: 16, marginTop: 2 }, children: "Annotate the app with drawings" }),
-        right: /* @__PURE__ */ jsx36(IconChevronRight, { size: 20, colorToken: "textMuted" })
+        title: /* @__PURE__ */ jsx38(Text, { style: { color: theme.colors.text, fontSize: 16, lineHeight: 20, fontWeight: theme.typography.fontWeight.semibold }, children: "Draw Changes" }),
+        subtitle: /* @__PURE__ */ jsx38(Text, { style: { color: theme.colors.textMuted, fontSize: 12, lineHeight: 16, marginTop: 2 }, children: "Annotate the app with drawings" }),
+        right: /* @__PURE__ */ jsx38(IconChevronRight, { size: 20, colorToken: "textMuted" })
       }
     ) : null
   ] });
 }
 
 // src/studio/ui/preview-panel/PreviewCollaborateSection.tsx
-import * as React29 from "react";
+import * as React31 from "react";
 import { ActivityIndicator as ActivityIndicator6, Alert, View as View32 } from "react-native";
 import { Send as Send2 } from "lucide-react-native";
 
 // src/components/merge-requests/MergeRequestStatusCard.tsx
-import * as React25 from "react";
+import * as React27 from "react";
 import { Animated as Animated7, Pressable as Pressable9, View as View28 } from "react-native";
 import { Ban, Check as Check3, CheckCheck, ChevronDown as ChevronDown2 } from "lucide-react-native";
 
 // src/components/primitives/MarkdownText.tsx
-import { Platform as Platform5, View as View27 } from "react-native";
+import { Platform as Platform7, View as View27 } from "react-native";
 import Markdown from "react-native-markdown-display";
-import { jsx as jsx37 } from "react/jsx-runtime";
+import { jsx as jsx39 } from "react/jsx-runtime";
 function MarkdownText({ markdown, variant = "chat", bodyColor, style }) {
   const theme = useTheme();
   const isDark = theme.scheme === "dark";
@@ -4486,7 +4622,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__ */ jsx37(View27, { style, children: /* @__PURE__ */ jsx37(
+  return /* @__PURE__ */ jsx39(View27, { style, children: /* @__PURE__ */ jsx39(
     Markdown,
     {
       style: {
@@ -4499,7 +4635,7 @@ function MarkdownText({ markdown, variant = "chat", bodyColor, style }) {
           paddingHorizontal: variant === "mergeRequest" ? 6 : 4,
           paddingVertical: variant === "mergeRequest" ? 2 : 0,
           borderRadius: variant === "mergeRequest" ? 6 : 4,
-          fontFamily: Platform5.OS === "ios" ? "Menlo" : "monospace",
+          fontFamily: Platform7.OS === "ios" ? "Menlo" : "monospace",
           fontSize: 13
         },
         code_block: {
@@ -4550,11 +4686,11 @@ function toIsoString(input) {
 }
 
 // src/components/merge-requests/useControlledExpansion.ts
-import * as React24 from "react";
+import * as React26 from "react";
 function useControlledExpansion(props) {
-  const [uncontrolled, setUncontrolled] = React24.useState(false);
+  const [uncontrolled, setUncontrolled] = React26.useState(false);
   const expanded = props.expanded ?? uncontrolled;
-  const setExpanded = React24.useCallback(
+  const setExpanded = React26.useCallback(
     (next) => {
       var _a;
       (_a = props.onExpandedChange) == null ? void 0 : _a.call(props, next);
@@ -4566,7 +4702,7 @@ function useControlledExpansion(props) {
 }
 
 // src/components/merge-requests/MergeRequestStatusCard.tsx
-import { jsx as jsx38, jsxs as jsxs22 } from "react/jsx-runtime";
+import { jsx as jsx40, jsxs as jsxs22 } from "react/jsx-runtime";
 function MergeRequestStatusCard({
   mergeRequest,
   expanded: expandedProp,
@@ -4579,8 +4715,8 @@ function MergeRequestStatusCard({
   const isDark = theme.scheme === "dark";
   const textColor = isDark ? "#FFFFFF" : "#000000";
   const subTextColor = isDark ? "#A1A1AA" : "#71717A";
-  const status = React25.useMemo(() => getMergeRequestStatusDisplay(String(mergeRequest.status)), [mergeRequest.status]);
-  const { StatusIcon, iconColor, bgColor, statusText } = React25.useMemo(() => {
+  const status = React27.useMemo(() => getMergeRequestStatusDisplay(String(mergeRequest.status)), [mergeRequest.status]);
+  const { StatusIcon, iconColor, bgColor, statusText } = React27.useMemo(() => {
     switch (mergeRequest.status) {
       case "approved":
       case "merged":
@@ -4611,15 +4747,15 @@ function MergeRequestStatusCard({
   const createdIso = toIsoString(mergeRequest.createdAt ?? null);
   const headerTimeAgo = updatedIso ? formatTimeAgo(updatedIso) : "";
   const createdTimeAgo = createdIso ? formatTimeAgo(createdIso) : "";
-  const rotate = React25.useRef(new Animated7.Value(expanded ? 1 : 0)).current;
-  React25.useEffect(() => {
+  const rotate = React27.useRef(new Animated7.Value(expanded ? 1 : 0)).current;
+  React27.useEffect(() => {
     Animated7.timing(rotate, {
       toValue: expanded ? 1 : 0,
       duration: 200,
       useNativeDriver: true
     }).start();
   }, [expanded, rotate]);
-  return /* @__PURE__ */ jsx38(Pressable9, { onPress: () => setExpanded(!expanded), style: ({ pressed }) => [{ opacity: pressed ? 0.95 : 1 }], children: /* @__PURE__ */ jsxs22(
+  return /* @__PURE__ */ jsx40(Pressable9, { onPress: () => setExpanded(!expanded), style: ({ pressed }) => [{ opacity: pressed ? 0.95 : 1 }], children: /* @__PURE__ */ jsxs22(
     Card,
     {
       padded: false,
@@ -4633,10 +4769,10 @@ function MergeRequestStatusCard({
       ],
       children: [
         /* @__PURE__ */ jsxs22(View28, { style: { flexDirection: "row", alignItems: "center", gap: theme.spacing.lg }, children: [
-          /* @__PURE__ */ jsx38(View28, { style: { width: 40, height: 40, borderRadius: 999, alignItems: "center", justifyContent: "center", backgroundColor: bgColor }, children: /* @__PURE__ */ jsx38(StatusIcon, { size: 20, color: iconColor }) }),
+          /* @__PURE__ */ jsx40(View28, { style: { width: 40, height: 40, borderRadius: 999, alignItems: "center", justifyContent: "center", backgroundColor: bgColor }, children: /* @__PURE__ */ jsx40(StatusIcon, { size: 20, color: iconColor }) }),
           /* @__PURE__ */ jsxs22(View28, { style: { flex: 1, minWidth: 0 }, children: [
             /* @__PURE__ */ jsxs22(View28, { style: { flexDirection: "row", alignItems: "center", justifyContent: "space-between" }, children: [
-              /* @__PURE__ */ jsx38(
+              /* @__PURE__ */ jsx40(
                 Text,
                 {
                   style: {
@@ -4650,11 +4786,11 @@ function MergeRequestStatusCard({
                   children: statusText
                 }
               ),
-              headerTimeAgo ? /* @__PURE__ */ jsx38(Text, { style: { fontSize: 10, lineHeight: 14, marginLeft: theme.spacing.sm, color: withAlpha(theme.colors.textMuted, 0.6) }, children: headerTimeAgo }) : null
+              headerTimeAgo ? /* @__PURE__ */ jsx40(Text, { style: { fontSize: 10, lineHeight: 14, marginLeft: theme.spacing.sm, color: withAlpha(theme.colors.textMuted, 0.6) }, children: headerTimeAgo }) : null
             ] }),
-            /* @__PURE__ */ jsx38(Text, { style: { fontSize: 12, lineHeight: 16, color: theme.colors.textMuted }, numberOfLines: 1, children: mergeRequest.title ?? "Untitled merge request" })
+            /* @__PURE__ */ jsx40(Text, { style: { fontSize: 12, lineHeight: 16, color: theme.colors.textMuted }, numberOfLines: 1, children: mergeRequest.title ?? "Untitled merge request" })
           ] }),
-          headerRight ? /* @__PURE__ */ jsx38(View28, { children: headerRight }) : /* @__PURE__ */ jsx38(
+          headerRight ? /* @__PURE__ */ jsx40(View28, { children: headerRight }) : /* @__PURE__ */ jsx40(
             Animated7.View,
             {
               style: {
@@ -4664,12 +4800,12 @@ function MergeRequestStatusCard({
                   }
                 ]
               },
-              children: /* @__PURE__ */ jsx38(ChevronDown2, { size: 20, color: withAlpha(theme.colors.textMuted, 0.4) })
+              children: /* @__PURE__ */ jsx40(ChevronDown2, { size: 20, color: withAlpha(theme.colors.textMuted, 0.4) })
             }
           )
         ] }),
         expanded ? /* @__PURE__ */ jsxs22(View28, { style: { marginTop: 16, marginLeft: 56 }, children: [
-          /* @__PURE__ */ jsx38(
+          /* @__PURE__ */ jsx40(
             Text,
             {
               style: {
@@ -4683,7 +4819,7 @@ function MergeRequestStatusCard({
               children: status.text
             }
           ),
-          createdTimeAgo ? /* @__PURE__ */ jsx38(
+          createdTimeAgo ? /* @__PURE__ */ jsx40(
             Text,
             {
               style: {
@@ -4694,8 +4830,8 @@ function MergeRequestStatusCard({
               children: createdTimeAgo
             }
           ) : null,
-          /* @__PURE__ */ jsx38(Text, { style: { fontSize: 16, fontWeight: "600", color: textColor, marginBottom: 8 }, children: mergeRequest.title ?? "Untitled merge request" }),
-          mergeRequest.description ? /* @__PURE__ */ jsx38(MarkdownText, { markdown: mergeRequest.description, variant: "mergeRequest" }) : null
+          /* @__PURE__ */ jsx40(Text, { style: { fontSize: 16, fontWeight: "600", color: textColor, marginBottom: 8 }, children: mergeRequest.title ?? "Untitled merge request" }),
+          mergeRequest.description ? /* @__PURE__ */ jsx40(MarkdownText, { markdown: mergeRequest.description, variant: "mergeRequest" }) : null
         ] }) : null
       ]
     }
@@ -4703,18 +4839,18 @@ function MergeRequestStatusCard({
 }
 
 // src/components/merge-requests/ReviewMergeRequestCarousel.tsx
-import * as React28 from "react";
+import * as React30 from "react";
 import { Animated as Animated9, FlatList, View as View31, useWindowDimensions as useWindowDimensions3 } from "react-native";
 
 // src/components/merge-requests/ReviewMergeRequestCard.tsx
-import * as React27 from "react";
+import * as React29 from "react";
 import { ActivityIndicator as ActivityIndicator5, Animated as Animated8, Pressable as Pressable11, View as View30 } from "react-native";
 import { Check as Check4, ChevronDown as ChevronDown3, Play as Play3, X as X3 } from "lucide-react-native";
 
 // src/components/merge-requests/ReviewMergeRequestActionButton.tsx
-import * as React26 from "react";
+import * as React28 from "react";
 import { Pressable as Pressable10, View as View29 } from "react-native";
-import { jsx as jsx39 } from "react/jsx-runtime";
+import { jsx as jsx41 } from "react/jsx-runtime";
 function ReviewMergeRequestActionButton({
   accessibilityLabel,
   backgroundColor,
@@ -4723,13 +4859,13 @@ function ReviewMergeRequestActionButton({
   children,
   iconOnly
 }) {
-  const [pressed, setPressed] = React26.useState(false);
+  const [pressed, setPressed] = React28.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__ */ jsx39(
+  return /* @__PURE__ */ jsx41(
     View29,
     {
       style: {
@@ -4744,7 +4880,7 @@ function ReviewMergeRequestActionButton({
         paddingVertical,
         justifyContent: "center"
       },
-      children: /* @__PURE__ */ jsx39(
+      children: /* @__PURE__ */ jsx41(
         Pressable10,
         {
           accessibilityRole: "button",
@@ -4768,7 +4904,7 @@ function ReviewMergeRequestActionButton({
 }
 
 // src/components/merge-requests/ReviewMergeRequestCard.tsx
-import { jsx as jsx40, jsxs as jsxs23 } from "react/jsx-runtime";
+import { jsx as jsx42, jsxs as jsxs23 } from "react/jsx-runtime";
 function ReviewMergeRequestCard({
   mr,
   index,
@@ -4785,14 +4921,14 @@ function ReviewMergeRequestCard({
   onTest
 }) {
   const theme = useTheme();
-  const status = React27.useMemo(() => getMergeRequestStatusDisplay(mr.status), [mr.status]);
+  const status = React29.useMemo(() => getMergeRequestStatusDisplay(mr.status), [mr.status]);
   const canAct = mr.status === "open";
-  const rotate = React27.useRef(new Animated8.Value(isExpanded ? 1 : 0)).current;
-  React27.useEffect(() => {
+  const rotate = React29.useRef(new Animated8.Value(isExpanded ? 1 : 0)).current;
+  React29.useEffect(() => {
     Animated8.timing(rotate, { toValue: isExpanded ? 1 : 0, duration: 200, useNativeDriver: true }).start();
   }, [isExpanded, rotate]);
   const position = total > 1 ? `${index + 1}/${total}` : "Merge request";
-  return /* @__PURE__ */ jsx40(Pressable11, { onPress: onToggle, style: ({ pressed }) => ({ opacity: pressed ? 0.95 : 1 }), children: /* @__PURE__ */ jsxs23(
+  return /* @__PURE__ */ jsx42(Pressable11, { onPress: onToggle, style: ({ pressed }) => ({ opacity: pressed ? 0.95 : 1 }), children: /* @__PURE__ */ jsxs23(
     Card,
     {
       padded: false,
@@ -4806,9 +4942,9 @@ function ReviewMergeRequestCard({
       ],
       children: [
         /* @__PURE__ */ jsxs23(View30, { style: { flexDirection: "row", alignItems: "center", gap: 12 }, children: [
-          /* @__PURE__ */ jsx40(Avatar, { size: 40, uri: (creator == null ? void 0 : creator.avatar) ?? null, name: (creator == null ? void 0 : creator.name) ?? void 0 }),
+          /* @__PURE__ */ jsx42(Avatar, { size: 40, uri: (creator == null ? void 0 : creator.avatar) ?? null, name: (creator == null ? void 0 : creator.name) ?? void 0 }),
           /* @__PURE__ */ jsxs23(View30, { style: { flex: 1, minWidth: 0 }, children: [
-            /* @__PURE__ */ jsx40(
+            /* @__PURE__ */ jsx42(
               Text,
               {
                 style: { fontWeight: theme.typography.fontWeight.semibold, color: theme.colors.text, fontSize: 16, lineHeight: 20 },
@@ -4822,18 +4958,18 @@ function ReviewMergeRequestCard({
               position
             ] })
           ] }),
-          /* @__PURE__ */ jsx40(
+          /* @__PURE__ */ jsx42(
             Animated8.View,
             {
               style: {
                 transform: [{ rotate: rotate.interpolate({ inputRange: [0, 1], outputRange: ["0deg", "180deg"] }) }]
               },
-              children: /* @__PURE__ */ jsx40(ChevronDown3, { size: 20, color: withAlpha(theme.colors.textMuted, 0.4) })
+              children: /* @__PURE__ */ jsx42(ChevronDown3, { size: 20, color: withAlpha(theme.colors.textMuted, 0.4) })
             }
           )
         ] }),
         isExpanded ? /* @__PURE__ */ jsxs23(View30, { style: { marginTop: 16 }, children: [
-          /* @__PURE__ */ jsx40(
+          /* @__PURE__ */ jsx42(
             Text,
             {
               style: {
@@ -4847,13 +4983,13 @@ function ReviewMergeRequestCard({
               children: status.text
             }
           ),
-          /* @__PURE__ */ jsx40(Text, { style: { color: theme.colors.textMuted, fontSize: 12, lineHeight: 16, marginBottom: 12 }, children: creator ? `${creator.approvedOpenedMergeRequests} approved merge${creator.approvedOpenedMergeRequests !== 1 ? "s" : ""}` : "Loading stats..." }),
-          mr.description ? /* @__PURE__ */ jsx40(MarkdownText, { markdown: mr.description, variant: "mergeRequest" }) : null
+          /* @__PURE__ */ jsx42(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__ */ jsx42(MarkdownText, { markdown: mr.description, variant: "mergeRequest" }) : null
         ] }) : null,
-        /* @__PURE__ */ jsx40(View30, { style: { height: 1, backgroundColor: withAlpha(theme.colors.borderStrong, 0.5), marginTop: 12, marginBottom: 12 } }),
+        /* @__PURE__ */ jsx42(View30, { style: { height: 1, backgroundColor: withAlpha(theme.colors.borderStrong, 0.5), marginTop: 12, marginBottom: 12 } }),
         /* @__PURE__ */ jsxs23(View30, { style: { flexDirection: "row", alignItems: "center", justifyContent: "space-between" }, children: [
           /* @__PURE__ */ jsxs23(View30, { style: { flexDirection: "row", gap: 8 }, children: [
-            /* @__PURE__ */ jsx40(
+            /* @__PURE__ */ jsx42(
               ReviewMergeRequestActionButton,
               {
                 accessibilityLabel: "Reject",
@@ -4862,12 +4998,12 @@ function ReviewMergeRequestCard({
                 onPress: onReject,
                 iconOnly: !isExpanded,
                 children: /* @__PURE__ */ jsxs23(View30, { style: { flexDirection: "row", alignItems: "center", gap: isExpanded ? 4 : 0 }, children: [
-                  /* @__PURE__ */ jsx40(X3, { size: 18, color: "#FFFFFF" }),
-                  isExpanded ? /* @__PURE__ */ jsx40(Text, { style: { fontSize: 13, color: "#FFFFFF", fontWeight: theme.typography.fontWeight.semibold }, children: "Reject" }) : null
+                  /* @__PURE__ */ jsx42(X3, { size: 18, color: "#FFFFFF" }),
+                  isExpanded ? /* @__PURE__ */ jsx42(Text, { style: { fontSize: 13, color: "#FFFFFF", fontWeight: theme.typography.fontWeight.semibold }, children: "Reject" }) : null
                 ] })
               }
             ),
-            /* @__PURE__ */ jsx40(
+            /* @__PURE__ */ jsx42(
               ReviewMergeRequestActionButton,
               {
                 accessibilityLabel: !canAct ? "Not actionable" : isProcessing ? "Processing" : "Approve",
@@ -4876,16 +5012,16 @@ function ReviewMergeRequestCard({
                 onPress: onApprove,
                 iconOnly: !isExpanded,
                 children: isProcessing ? /* @__PURE__ */ jsxs23(View30, { style: { flexDirection: "row", alignItems: "center", gap: isExpanded ? 4 : 0 }, children: [
-                  /* @__PURE__ */ jsx40(ActivityIndicator5, { size: "small", color: "#FFFFFF" }),
-                  isExpanded ? /* @__PURE__ */ jsx40(Text, { style: { fontSize: 13, color: "#FFFFFF", fontWeight: theme.typography.fontWeight.semibold }, children: "Processing" }) : null
+                  /* @__PURE__ */ jsx42(ActivityIndicator5, { size: "small", color: "#FFFFFF" }),
+                  isExpanded ? /* @__PURE__ */ jsx42(Text, { style: { fontSize: 13, color: "#FFFFFF", fontWeight: theme.typography.fontWeight.semibold }, children: "Processing" }) : null
                 ] }) : /* @__PURE__ */ jsxs23(View30, { style: { flexDirection: "row", alignItems: "center", gap: isExpanded ? 4 : 0 }, children: [
-                  /* @__PURE__ */ jsx40(Check4, { size: 18, color: "#FFFFFF" }),
-                  isExpanded ? /* @__PURE__ */ jsx40(Text, { style: { fontSize: 13, color: "#FFFFFF", fontWeight: theme.typography.fontWeight.semibold }, children: "Approve" }) : null
+                  /* @__PURE__ */ jsx42(Check4, { size: 18, color: "#FFFFFF" }),
+                  isExpanded ? /* @__PURE__ */ jsx42(Text, { style: { fontSize: 13, color: "#FFFFFF", fontWeight: theme.typography.fontWeight.semibold }, children: "Approve" }) : null
                 ] })
               }
             )
           ] }),
-          /* @__PURE__ */ jsx40(
+          /* @__PURE__ */ jsx42(
             ReviewMergeRequestActionButton,
             {
               accessibilityLabel: "Test",
@@ -4893,9 +5029,9 @@ function ReviewMergeRequestCard({
               disabled: isBuilding || isTestingThis,
               onPress: onTest,
               iconOnly: !isExpanded,
-              children: isTestingThis ? /* @__PURE__ */ jsx40(ActivityIndicator5, { size: "small", color: "#888" }) : /* @__PURE__ */ jsxs23(View30, { style: { flexDirection: "row", alignItems: "center", gap: isExpanded ? 4 : 0 }, children: [
-                /* @__PURE__ */ jsx40(Play3, { size: 14, color: theme.colors.text }),
-                isExpanded ? /* @__PURE__ */ jsx40(Text, { style: { fontSize: 13, color: theme.colors.text, fontWeight: theme.typography.fontWeight.semibold }, children: "Test" }) : null
+              children: isTestingThis ? /* @__PURE__ */ jsx42(ActivityIndicator5, { size: "small", color: "#888" }) : /* @__PURE__ */ jsxs23(View30, { style: { flexDirection: "row", alignItems: "center", gap: isExpanded ? 4 : 0 }, children: [
+                /* @__PURE__ */ jsx42(Play3, { size: 14, color: theme.colors.text }),
+                isExpanded ? /* @__PURE__ */ jsx42(Text, { style: { fontSize: 13, color: theme.colors.text, fontWeight: theme.typography.fontWeight.semibold }, children: "Test" }) : null
               ] })
             }
           )
@@ -4906,7 +5042,7 @@ function ReviewMergeRequestCard({
 }
 
 // src/components/merge-requests/ReviewMergeRequestCarousel.tsx
-import { jsx as jsx41, jsxs as jsxs24 } from "react/jsx-runtime";
+import { jsx as jsx43, jsxs as jsxs24 } from "react/jsx-runtime";
 function ReviewMergeRequestCarousel({
   mergeRequests,
   creatorStatsById,
@@ -4920,16 +5056,16 @@ function ReviewMergeRequestCarousel({
 }) {
   const theme = useTheme();
   const { width } = useWindowDimensions3();
-  const [expanded, setExpanded] = React28.useState({});
-  const carouselScrollX = React28.useRef(new Animated9.Value(0)).current;
+  const [expanded, setExpanded] = React30.useState({});
+  const carouselScrollX = React30.useRef(new Animated9.Value(0)).current;
   const peekAmount = 24;
   const gap = 16;
-  const cardWidth = React28.useMemo(() => Math.max(1, width - theme.spacing.lg * 2 - peekAmount), [peekAmount, theme.spacing.lg, width]);
+  const cardWidth = React30.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__ */ jsxs24(View31, { style: [{ marginHorizontal: -theme.spacing.lg }, style], children: [
-    /* @__PURE__ */ jsx41(
+    /* @__PURE__ */ jsx43(
       FlatList,
       {
         horizontal: true,
@@ -4937,13 +5073,13 @@ function ReviewMergeRequestCarousel({
         keyExtractor: (mr) => mr.id,
         showsHorizontalScrollIndicator: false,
         contentContainerStyle: { paddingHorizontal: theme.spacing.lg, paddingVertical: theme.spacing.sm },
-        ItemSeparatorComponent: () => /* @__PURE__ */ jsx41(View31, { style: { width: gap } }),
+        ItemSeparatorComponent: () => /* @__PURE__ */ jsx43(View31, { style: { width: gap } }),
         snapToAlignment: "start",
         decelerationRate: "fast",
         snapToInterval: snapInterval,
         disableIntervalMomentum: true,
         style: { paddingRight: peekAmount },
-        ListFooterComponent: /* @__PURE__ */ jsx41(View31, { style: { width: peekAmount } }),
+        ListFooterComponent: /* @__PURE__ */ jsx43(View31, { style: { width: peekAmount } }),
         onScroll: Animated9.event([{ nativeEvent: { contentOffset: { x: carouselScrollX } } }], {
           useNativeDriver: false
         }),
@@ -4955,7 +5091,7 @@ function ReviewMergeRequestCarousel({
           const isProcessing = Boolean(processingMrId && processingMrId === item.id);
           const isAnyProcessing = Boolean(processingMrId);
           const isTestingThis = Boolean(testingMrId && testingMrId === item.id);
-          return /* @__PURE__ */ jsx41(View31, { style: { width: cardWidth }, children: /* @__PURE__ */ jsx41(
+          return /* @__PURE__ */ jsx43(View31, { style: { width: cardWidth }, children: /* @__PURE__ */ jsx43(
             ReviewMergeRequestCard,
             {
               mr: item,
@@ -4976,7 +5112,7 @@ function ReviewMergeRequestCarousel({
         }
       }
     ),
-    mergeRequests.length >= 1 ? /* @__PURE__ */ jsx41(View31, { style: { flexDirection: "row", justifyContent: "center", columnGap: 8, marginTop: theme.spacing.md }, children: mergeRequests.map((mr, index) => {
+    mergeRequests.length >= 1 ? /* @__PURE__ */ jsx43(View31, { style: { flexDirection: "row", justifyContent: "center", columnGap: 8, marginTop: theme.spacing.md }, children: mergeRequests.map((mr, index) => {
       const inputRange = [(index - 1) * snapInterval, index * snapInterval, (index + 1) * snapInterval];
       const scale = carouselScrollX.interpolate({
         inputRange,
@@ -4988,7 +5124,7 @@ function ReviewMergeRequestCarousel({
         outputRange: [0.4, 1, 0.4],
         extrapolate: "clamp"
       });
-      return /* @__PURE__ */ jsx41(
+      return /* @__PURE__ */ jsx43(
         Animated9.View,
         {
           style: {
@@ -5007,7 +5143,7 @@ function ReviewMergeRequestCarousel({
 }
 
 // src/studio/ui/preview-panel/PreviewCollaborateSection.tsx
-import { Fragment as Fragment5, jsx as jsx42, jsxs as jsxs25 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx44, jsxs as jsxs25 } from "react/jsx-runtime";
 function PreviewCollaborateSection({
   canSubmitMergeRequest,
   incomingMergeRequests,
@@ -5023,13 +5159,13 @@ function PreviewCollaborateSection({
   onTestMr
 }) {
   const theme = useTheme();
-  const [submittingMr, setSubmittingMr] = React29.useState(false);
+  const [submittingMr, setSubmittingMr] = React31.useState(false);
   const hasSection = canSubmitMergeRequest || incomingMergeRequests.length > 0 || outgoingMergeRequests.length > 0;
   if (!hasSection) return null;
   const showActionsSubtitle = canSubmitMergeRequest && onSubmitMergeRequest || onTestMr && incomingMergeRequests.length > 0;
   return /* @__PURE__ */ jsxs25(Fragment5, { children: [
-    /* @__PURE__ */ jsx42(SectionTitle, { marginTop: theme.spacing.xl, children: "Collaborate" }),
-    showActionsSubtitle ? /* @__PURE__ */ jsx42(
+    /* @__PURE__ */ jsx44(SectionTitle, { marginTop: theme.spacing.xl, children: "Collaborate" }),
+    showActionsSubtitle ? /* @__PURE__ */ jsx44(
       Text,
       {
         style: {
@@ -5044,7 +5180,7 @@ function PreviewCollaborateSection({
         children: "Actions"
       }
     ) : null,
-    canSubmitMergeRequest && onSubmitMergeRequest ? /* @__PURE__ */ jsx42(
+    canSubmitMergeRequest && onSubmitMergeRequest ? /* @__PURE__ */ jsx44(
       PressableCardRow,
       {
         accessibilityLabel: "Submit merge request",
@@ -5075,7 +5211,7 @@ function PreviewCollaborateSection({
           borderColor: withAlpha("#03DAC6", 0.2),
           marginBottom: theme.spacing.sm
         },
-        left: /* @__PURE__ */ jsx42(
+        left: /* @__PURE__ */ jsx44(
           View32,
           {
             style: {
@@ -5087,15 +5223,15 @@ function PreviewCollaborateSection({
               backgroundColor: withAlpha("#03DAC6", 0.1),
               marginRight: theme.spacing.lg
             },
-            children: submittingMr ? /* @__PURE__ */ jsx42(ActivityIndicator6, { color: "#03DAC6", size: "small" }) : /* @__PURE__ */ jsx42(MergeIcon, { width: 20, height: 20, color: "#03DAC6" })
+            children: submittingMr ? /* @__PURE__ */ jsx44(ActivityIndicator6, { color: "#03DAC6", size: "small" }) : /* @__PURE__ */ jsx44(MergeIcon, { width: 20, height: 20, color: "#03DAC6" })
           }
         ),
-        title: /* @__PURE__ */ jsx42(Text, { style: { color: theme.colors.text, fontSize: 16, lineHeight: 20, fontWeight: theme.typography.fontWeight.semibold }, children: "Submit your new changes" }),
-        subtitle: /* @__PURE__ */ jsx42(Text, { style: { color: theme.colors.textMuted, fontSize: 12, lineHeight: 16, marginTop: 2 }, children: "Ask to merge this remix to the original app" }),
-        right: /* @__PURE__ */ jsx42(Send2, { size: 16, color: "#03DAC6" })
+        title: /* @__PURE__ */ jsx44(Text, { style: { color: theme.colors.text, fontSize: 16, lineHeight: 20, fontWeight: theme.typography.fontWeight.semibold }, children: "Submit your new changes" }),
+        subtitle: /* @__PURE__ */ jsx44(Text, { style: { color: theme.colors.textMuted, fontSize: 12, lineHeight: 16, marginTop: 2 }, children: "Ask to merge this remix to the original app" }),
+        right: /* @__PURE__ */ jsx44(Send2, { size: 16, color: "#03DAC6" })
       }
     ) : null,
-    onTestMr && incomingMergeRequests.length > 0 ? /* @__PURE__ */ jsx42(
+    onTestMr && incomingMergeRequests.length > 0 ? /* @__PURE__ */ jsx44(
       ReviewMergeRequestCarousel,
       {
         mergeRequests: incomingMergeRequests,
@@ -5109,7 +5245,7 @@ function PreviewCollaborateSection({
       }
     ) : null,
     outgoingMergeRequests.length > 0 ? /* @__PURE__ */ jsxs25(Fragment5, { children: [
-      /* @__PURE__ */ jsx42(
+      /* @__PURE__ */ jsx44(
         Text,
         {
           style: {
@@ -5125,13 +5261,13 @@ function PreviewCollaborateSection({
           children: "History"
         }
       ),
-      outgoingMergeRequests.map((mr) => /* @__PURE__ */ jsx42(View32, { style: { marginBottom: theme.spacing.sm }, children: /* @__PURE__ */ jsx42(MergeRequestStatusCard, { mergeRequest: toMergeRequestSummary(mr) }) }, mr.id))
+      outgoingMergeRequests.map((mr) => /* @__PURE__ */ jsx44(View32, { style: { marginBottom: theme.spacing.sm }, children: /* @__PURE__ */ jsx44(MergeRequestStatusCard, { mergeRequest: toMergeRequestSummary(mr) }) }, mr.id))
     ] }) : null
   ] });
 }
 
 // src/studio/ui/preview-panel/usePreviewPanelData.ts
-import * as React31 from "react";
+import * as React33 from "react";
 
 // src/data/apps/images/remote.ts
 var AppImagesRemoteDataSourceImpl = class extends BaseRemote {
@@ -5182,7 +5318,7 @@ var AppImagesRepositoryImpl = class extends BaseRepository {
 var appImagesRepository = new AppImagesRepositoryImpl(appImagesRemoteDataSource);
 
 // src/studio/hooks/useAppStats.ts
-import * as React30 from "react";
+import * as React32 from "react";
 import * as Haptics2 from "expo-haptics";
 
 // src/data/likes/remote.ts
@@ -5251,34 +5387,34 @@ function useAppStats({
   initialIsLiked = false,
   onOpenComments
 }) {
-  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(() => {
+  const [likeCount, setLikeCount] = React32.useState(initialLikes);
+  const [commentCount, setCommentCount] = React32.useState(initialComments);
+  const [forkCount, setForkCount] = React32.useState(initialForks);
+  const [isLiked, setIsLiked] = React32.useState(initialIsLiked);
+  const didMutateRef = React32.useRef(false);
+  const lastAppIdRef = React32.useRef("");
+  React32.useEffect(() => {
     if (lastAppIdRef.current === appId) return;
     lastAppIdRef.current = appId;
     didMutateRef.current = false;
   }, [appId]);
-  React30.useEffect(() => {
+  React32.useEffect(() => {
     if (didMutateRef.current) return;
     setLikeCount(initialLikes);
   }, [appId, initialLikes]);
-  React30.useEffect(() => {
+  React32.useEffect(() => {
     if (didMutateRef.current) return;
     setCommentCount(initialComments);
   }, [appId, initialComments]);
-  React30.useEffect(() => {
+  React32.useEffect(() => {
     if (didMutateRef.current) return;
     setForkCount(initialForks);
   }, [appId, initialForks]);
-  React30.useEffect(() => {
+  React32.useEffect(() => {
     if (didMutateRef.current) return;
     setIsLiked(initialIsLiked);
   }, [appId, initialIsLiked]);
-  const handleLike = React30.useCallback(async () => {
+  const handleLike = React32.useCallback(async () => {
     var _a, _b;
     if (!appId) return;
     didMutateRef.current = true;
@@ -5302,7 +5438,7 @@ function useAppStats({
       setLikeCount((prev) => Math.max(0, prev + (newIsLiked ? -1 : 1)));
     }
   }, [appId, isLiked, likeCount]);
-  const handleOpenComments = React30.useCallback(() => {
+  const handleOpenComments = React32.useCallback(() => {
     if (!appId) return;
     try {
       void Haptics2.impactAsync(Haptics2.ImpactFeedbackStyle.Light);
@@ -5317,11 +5453,11 @@ function useAppStats({
 var LIKE_DEBUG_PREFIX = "[COMERGE_LIKE_DEBUG]";
 function usePreviewPanelData(params) {
   const { app, isOwner, outgoingMergeRequests, onOpenComments, commentCountOverride } = params;
-  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(() => {
+  const [imageUrl, setImageUrl] = React33.useState(null);
+  const [imageLoaded, setImageLoaded] = React33.useState(false);
+  const [insights, setInsights] = React33.useState({ likes: 0, comments: 0, forks: 0, downloads: 0 });
+  const [creator, setCreator] = React33.useState(null);
+  React33.useEffect(() => {
     if (!(app == null ? void 0 : app.id)) return;
     let cancelled = false;
     (async () => {
@@ -5336,7 +5472,7 @@ function usePreviewPanelData(params) {
       cancelled = true;
     };
   }, [app == null ? void 0 : app.id]);
-  React31.useEffect(() => {
+  React33.useEffect(() => {
     if (!(app == null ? void 0 : app.createdBy)) return;
     let cancelled = false;
     (async () => {
@@ -5352,10 +5488,10 @@ function usePreviewPanelData(params) {
       cancelled = true;
     };
   }, [app == null ? void 0 : app.createdBy]);
-  React31.useEffect(() => {
+  React33.useEffect(() => {
     setImageLoaded(false);
   }, [app == null ? void 0 : app.id]);
-  React31.useEffect(() => {
+  React33.useEffect(() => {
     if (!(app == null ? void 0 : app.id)) return;
     let cancelled = false;
     (async () => {
@@ -5380,7 +5516,7 @@ function usePreviewPanelData(params) {
       cancelled = true;
     };
   }, [app == null ? void 0 : app.id]);
-  React31.useEffect(() => {
+  React33.useEffect(() => {
     if (!(app == null ? void 0 : app.id)) return;
     log.debug(
       `${LIKE_DEBUG_PREFIX} usePreviewPanelData.appChanged appId=${app.id} app.isLiked=${String(app.isLiked)}`
@@ -5394,7 +5530,7 @@ function usePreviewPanelData(params) {
     initialIsLiked: Boolean(app == null ? void 0 : app.isLiked),
     onOpenComments
   });
-  const canSubmitMergeRequest = React31.useMemo(() => {
+  const canSubmitMergeRequest = React33.useMemo(() => {
     if (!isOwner) return false;
     if (!app) return false;
     if (!app.forkedFromAppId) return false;
@@ -5416,7 +5552,7 @@ function usePreviewPanelData(params) {
 }
 
 // src/studio/ui/PreviewPanel.tsx
-import { jsx as jsx43, jsxs as jsxs26 } from "react/jsx-runtime";
+import { jsx as jsx45, jsxs as jsxs26 } from "react/jsx-runtime";
 function PreviewPanel({
   app,
   loading,
@@ -5447,16 +5583,16 @@ function PreviewPanel({
     onOpenComments,
     commentCountOverride
   });
-  const header = /* @__PURE__ */ jsx43(PreviewPanelHeader, { isOwner, onClose, onNavigateHome, onGoToChat });
+  const header = /* @__PURE__ */ jsx45(PreviewPanelHeader, { isOwner, onClose, onNavigateHome, onGoToChat });
   if (loading || !app) {
-    return /* @__PURE__ */ jsx43(PreviewPage, { header, children: /* @__PURE__ */ jsxs26(View33, { style: { flex: 1, justifyContent: "center", alignItems: "center", padding: 24 }, children: [
-      /* @__PURE__ */ jsx43(ActivityIndicator7, {}),
-      /* @__PURE__ */ jsx43(View33, { style: { height: 12 } }),
-      /* @__PURE__ */ jsx43(Text, { variant: "bodyMuted", children: "Loading app\u2026" })
+    return /* @__PURE__ */ jsx45(PreviewPage, { header, children: /* @__PURE__ */ jsxs26(View33, { style: { flex: 1, justifyContent: "center", alignItems: "center", padding: 24 }, children: [
+      /* @__PURE__ */ jsx45(ActivityIndicator7, {}),
+      /* @__PURE__ */ jsx45(View33, { style: { height: 12 } }),
+      /* @__PURE__ */ jsx45(Text, { variant: "bodyMuted", children: "Loading app\u2026" })
     ] }) });
   }
   return /* @__PURE__ */ jsxs26(PreviewPage, { header, children: [
-    /* @__PURE__ */ jsx43(
+    /* @__PURE__ */ jsx45(
       PreviewHeroSection,
       {
         appStatus: app.status,
@@ -5474,8 +5610,8 @@ function PreviewPanel({
         }
       }
     ),
-    /* @__PURE__ */ jsx43(PreviewMetaSection, { app, isOwner, creator, downloadsCount: insights.downloads }),
-    /* @__PURE__ */ jsx43(
+    /* @__PURE__ */ jsx45(PreviewMetaSection, { app, isOwner, creator, downloadsCount: insights.downloads }),
+    /* @__PURE__ */ jsx45(
       PreviewCustomizeSection,
       {
         app,
@@ -5486,7 +5622,7 @@ function PreviewPanel({
         onStartDraw
       }
     ),
-    /* @__PURE__ */ jsx43(
+    /* @__PURE__ */ jsx45(
       PreviewCollaborateSection,
       {
         canSubmitMergeRequest,
@@ -5507,23 +5643,23 @@ function PreviewPanel({
 }
 
 // src/studio/ui/ChatPanel.tsx
-import * as React36 from "react";
+import * as React38 from "react";
 import { ActivityIndicator as ActivityIndicator8, View as View41 } from "react-native";
 
 // src/components/chat/ChatPage.tsx
-import * as React34 from "react";
-import { Keyboard as Keyboard4, Platform as Platform7, View as View37 } from "react-native";
+import * as React36 from "react";
+import { Keyboard as Keyboard4, Platform as Platform9, View as View37 } from "react-native";
 import { useSafeAreaInsets as useSafeAreaInsets4 } from "react-native-safe-area-context";
 
 // src/components/chat/ChatMessageList.tsx
-import * as React33 from "react";
-import { Platform as Platform6, View as View36 } from "react-native";
+import * as React35 from "react";
+import { View as View36 } from "react-native";
 import { BottomSheetFlatList } from "@gorhom/bottom-sheet";
 
 // src/components/chat/ChatMessageBubble.tsx
 import { View as View34 } from "react-native";
 import { CheckCheck as CheckCheck2, GitMerge as GitMerge2 } from "lucide-react-native";
-import { jsx as jsx44, jsxs as jsxs27 } from "react/jsx-runtime";
+import { jsx as jsx46, jsxs as jsxs27 } from "react/jsx-runtime";
 function ChatMessageBubble({ message, renderContent, style }) {
   var _a, _b;
   const theme = useTheme();
@@ -5537,7 +5673,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__ */ jsx44(View34, { style: [align, style], children: /* @__PURE__ */ jsx44(
+  return /* @__PURE__ */ jsx46(View34, { style: [align, style], children: /* @__PURE__ */ jsx46(
     Surface,
     {
       variant: bubbleVariant,
@@ -5553,26 +5689,26 @@ function ChatMessageBubble({ message, renderContent, style }) {
         cornerStyle
       ],
       children: /* @__PURE__ */ jsxs27(View34, { style: { flexDirection: "row", alignItems: "center" }, children: [
-        isMergeCompleted ? /* @__PURE__ */ jsx44(CheckCheck2, { size: 16, color: theme.colors.success, style: { marginRight: theme.spacing.sm } }) : null,
-        isMergeApproved ? /* @__PURE__ */ jsx44(GitMerge2, { size: 16, color: theme.colors.text, style: { marginRight: theme.spacing.sm } }) : null,
-        /* @__PURE__ */ jsx44(View34, { style: { flexShrink: 1, minWidth: 0 }, children: renderContent ? renderContent(message) : /* @__PURE__ */ jsx44(MarkdownText, { markdown: message.content, variant: "chat", bodyColor }) })
+        isMergeCompleted ? /* @__PURE__ */ jsx46(CheckCheck2, { size: 16, color: theme.colors.success, style: { marginRight: theme.spacing.sm } }) : null,
+        isMergeApproved ? /* @__PURE__ */ jsx46(GitMerge2, { size: 16, color: theme.colors.text, style: { marginRight: theme.spacing.sm } }) : null,
+        /* @__PURE__ */ jsx46(View34, { style: { flexShrink: 1, minWidth: 0 }, children: renderContent ? renderContent(message) : /* @__PURE__ */ jsx46(MarkdownText, { markdown: message.content, variant: "chat", bodyColor }) })
       ] })
     }
   ) });
 }
 
 // src/components/chat/TypingIndicator.tsx
-import * as React32 from "react";
+import * as React34 from "react";
 import { Animated as Animated10, View as View35 } from "react-native";
-import { jsx as jsx45 } from "react/jsx-runtime";
+import { jsx as jsx47 } from "react/jsx-runtime";
 function TypingIndicator({ style }) {
   const theme = useTheme();
   const dotColor = theme.colors.textSubtle;
-  const anims = React32.useMemo(
+  const anims = React34.useMemo(
     () => [new Animated10.Value(0.3), new Animated10.Value(0.3), new Animated10.Value(0.3)],
     []
   );
-  React32.useEffect(() => {
+  React34.useEffect(() => {
     const loops = [];
     anims.forEach((a, idx) => {
       const seq = Animated10.sequence([
@@ -5587,7 +5723,7 @@ function TypingIndicator({ style }) {
       loops.forEach((l) => l.stop());
     };
   }, [anims]);
-  return /* @__PURE__ */ jsx45(View35, { style: [{ flexDirection: "row", alignItems: "center" }, style], children: anims.map((a, i) => /* @__PURE__ */ jsx45(
+  return /* @__PURE__ */ jsx47(View35, { style: [{ flexDirection: "row", alignItems: "center" }, style], children: anims.map((a, i) => /* @__PURE__ */ jsx47(
     Animated10.View,
     {
       style: {
@@ -5605,8 +5741,8 @@ function TypingIndicator({ style }) {
 }
 
 // src/components/chat/ChatMessageList.tsx
-import { jsx as jsx46, jsxs as jsxs28 } from "react/jsx-runtime";
-var ChatMessageList = React33.forwardRef(
+import { jsx as jsx48, jsxs as jsxs28 } from "react/jsx-runtime";
+var ChatMessageList = React35.forwardRef(
   ({
     messages,
     showTypingIndicator = false,
@@ -5617,23 +5753,23 @@ var ChatMessageList = React33.forwardRef(
     nearBottomThreshold = 200
   }, ref) => {
     const theme = useTheme();
-    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) => {
+    const listRef = React35.useRef(null);
+    const nearBottomRef = React35.useRef(true);
+    const initialScrollDoneRef = React35.useRef(false);
+    const lastMessageIdRef = React35.useRef(null);
+    const data = React35.useMemo(() => {
+      return [...messages].reverse();
+    }, [messages]);
+    const scrollToBottom = React35.useCallback((options) => {
       var _a;
       const animated = (options == null ? void 0 : options.animated) ?? true;
-      (_a = listRef.current) == null ? void 0 : _a.scrollToEnd({ animated });
+      (_a = listRef.current) == null ? void 0 : _a.scrollToOffset({ offset: 0, animated });
     }, []);
-    React33.useImperativeHandle(ref, () => ({ scrollToBottom }), [scrollToBottom]);
-    const handleScroll = React33.useCallback(
+    React35.useImperativeHandle(ref, () => ({ scrollToBottom }), [scrollToBottom]);
+    const handleScroll = React35.useCallback(
       (e) => {
         const { contentOffset, contentSize, layoutMeasurement } = e.nativeEvent;
-        const distanceFromBottom = Math.max(
-          contentSize.height - Math.max(bottomInset, 0) - (contentOffset.y + layoutMeasurement.height),
-          0
-        );
+        const distanceFromBottom = Math.max(contentOffset.y - Math.max(bottomInset, 0), 0);
         const isNear = distanceFromBottom <= nearBottomThreshold;
         if (nearBottomRef.current !== isNear) {
           nearBottomRef.current = isNear;
@@ -5642,16 +5778,7 @@ var ChatMessageList = React33.forwardRef(
       },
       [bottomInset, nearBottomThreshold, onNearBottomChange]
     );
-    React33.useEffect(() => {
-      var _a;
-      if (initialScrollDoneRef.current) return;
-      if (messages.length === 0) return;
-      initialScrollDoneRef.current = true;
-      lastMessageIdRef.current = ((_a = messages[messages.length - 1]) == null ? void 0 : _a.id) ?? null;
-      const id = requestAnimationFrame(() => scrollToBottom({ animated: false }));
-      return () => cancelAnimationFrame(id);
-    }, [messages, scrollToBottom]);
-    React33.useEffect(() => {
+    React35.useEffect(() => {
       if (!initialScrollDoneRef.current) return;
       const lastId = messages.length > 0 ? messages[messages.length - 1].id : null;
       const prevLastId = lastMessageIdRef.current;
@@ -5661,42 +5788,44 @@ var ChatMessageList = React33.forwardRef(
       const id = requestAnimationFrame(() => scrollToBottom({ animated: true }));
       return () => cancelAnimationFrame(id);
     }, [messages, scrollToBottom]);
-    React33.useEffect(() => {
+    React35.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__ */ jsx46(
+    return /* @__PURE__ */ jsx48(
       BottomSheetFlatList,
       {
         ref: listRef,
-        data: messages,
+        inverted: true,
+        data,
         keyExtractor: (m) => m.id,
-        keyboardDismissMode: Platform6.OS === "ios" ? "interactive" : "on-drag",
         keyboardShouldPersistTaps: "handled",
         onScroll: handleScroll,
         scrollEventThrottle: 16,
         showsVerticalScrollIndicator: false,
+        onContentSizeChange: () => {
+          if (initialScrollDoneRef.current) return;
+          initialScrollDoneRef.current = true;
+          lastMessageIdRef.current = messages.length > 0 ? messages[messages.length - 1].id : null;
+          nearBottomRef.current = true;
+          onNearBottomChange == null ? void 0 : onNearBottomChange(true);
+          requestAnimationFrame(() => scrollToBottom({ animated: false }));
+        },
         contentContainerStyle: [
           {
             paddingHorizontal: theme.spacing.lg,
-            paddingTop: theme.spacing.sm,
-            paddingBottom: theme.spacing.sm
+            paddingVertical: theme.spacing.sm
           },
           contentStyle
         ],
-        renderItem: ({ item, index }) => /* @__PURE__ */ jsx46(View36, { style: { marginTop: index === 0 ? 0 : theme.spacing.sm }, children: /* @__PURE__ */ jsx46(ChatMessageBubble, { message: item, renderContent: renderMessageContent }) }),
-        ListFooterComponent: /* @__PURE__ */ jsxs28(View36, { children: [
-          showTypingIndicator ? /* @__PURE__ */ jsx46(View36, { style: { marginTop: theme.spacing.sm, alignSelf: "flex-start", paddingHorizontal: theme.spacing.lg }, children: /* @__PURE__ */ jsx46(TypingIndicator, {}) }) : null,
-          bottomInset > 0 ? /* @__PURE__ */ jsx46(View36, { style: { height: bottomInset } }) : null
+        ItemSeparatorComponent: () => /* @__PURE__ */ jsx48(View36, { style: { height: theme.spacing.sm } }),
+        renderItem: ({ item }) => /* @__PURE__ */ jsx48(ChatMessageBubble, { message: item, renderContent: renderMessageContent }),
+        ListHeaderComponent: /* @__PURE__ */ jsxs28(View36, { children: [
+          showTypingIndicator ? /* @__PURE__ */ jsx48(View36, { style: { marginTop: theme.spacing.sm, alignSelf: "flex-start", paddingHorizontal: theme.spacing.lg }, children: /* @__PURE__ */ jsx48(TypingIndicator, {}) }) : null,
+          bottomInset > 0 ? /* @__PURE__ */ jsx48(View36, { style: { height: bottomInset } }) : null
         ] })
       }
     );
@@ -5705,7 +5834,7 @@ var ChatMessageList = React33.forwardRef(
 ChatMessageList.displayName = "ChatMessageList";
 
 // src/components/chat/ChatPage.tsx
-import { jsx as jsx47, jsxs as jsxs29 } from "react/jsx-runtime";
+import { jsx as jsx49, jsxs as jsxs29 } from "react/jsx-runtime";
 function ChatPage({
   header,
   messages,
@@ -5715,15 +5844,16 @@ function ChatPage({
   composer,
   overlay,
   style,
+  composerHorizontalPadding,
   onNearBottomChange,
   listRef
 }) {
   const theme = useTheme();
   const insets = useSafeAreaInsets4();
-  const [composerHeight, setComposerHeight] = React34.useState(0);
-  const [keyboardVisible, setKeyboardVisible] = React34.useState(false);
-  React34.useEffect(() => {
-    if (Platform7.OS !== "ios") return;
+  const [composerHeight, setComposerHeight] = React36.useState(0);
+  const [keyboardVisible, setKeyboardVisible] = React36.useState(false);
+  React36.useEffect(() => {
+    if (Platform9.OS !== "ios") return;
     const show = Keyboard4.addListener("keyboardWillShow", () => setKeyboardVisible(true));
     const hide = Keyboard4.addListener("keyboardWillHide", () => setKeyboardVisible(false));
     return () => {
@@ -5731,28 +5861,28 @@ function ChatPage({
       hide.remove();
     };
   }, []);
-  const footerBottomPadding = Platform7.OS === "ios" ? keyboardVisible ? 0 : insets.bottom : insets.bottom + 10;
+  const footerBottomPadding = Platform9.OS === "ios" ? keyboardVisible ? 0 : insets.bottom : insets.bottom + 10;
   const overlayBottom = composerHeight + footerBottomPadding + theme.spacing.lg;
   const bottomInset = composerHeight + footerBottomPadding + theme.spacing.xl;
-  const resolvedOverlay = React34.useMemo(() => {
+  const resolvedOverlay = React36.useMemo(() => {
     var _a;
     if (!overlay) return null;
-    if (!React34.isValidElement(overlay)) return overlay;
+    if (!React36.isValidElement(overlay)) return overlay;
     const prevStyle = (_a = overlay.props) == null ? void 0 : _a.style;
-    return React34.cloneElement(overlay, {
+    return React36.cloneElement(overlay, {
       style: [prevStyle, { bottom: overlayBottom }]
     });
   }, [overlay, overlayBottom]);
   return /* @__PURE__ */ jsxs29(View37, { style: [{ flex: 1 }, style], children: [
-    header ? /* @__PURE__ */ jsx47(View37, { children: header }) : null,
-    topBanner ? /* @__PURE__ */ jsx47(View37, { style: { paddingHorizontal: theme.spacing.lg, paddingTop: theme.spacing.sm }, children: topBanner }) : null,
+    header ? /* @__PURE__ */ jsx49(View37, { children: header }) : null,
+    topBanner ? /* @__PURE__ */ jsx49(View37, { style: { paddingHorizontal: theme.spacing.lg, paddingTop: theme.spacing.sm }, children: topBanner }) : null,
     /* @__PURE__ */ jsxs29(View37, { style: { flex: 1 }, children: [
       /* @__PURE__ */ jsxs29(
         View37,
         {
           style: { flex: 1 },
           children: [
-            /* @__PURE__ */ jsx47(
+            /* @__PURE__ */ jsx49(
               ChatMessageList,
               {
                 ref: listRef,
@@ -5767,7 +5897,7 @@ function ChatPage({
           ]
         }
       ),
-      /* @__PURE__ */ jsx47(
+      /* @__PURE__ */ jsx49(
         View37,
         {
           style: {
@@ -5775,11 +5905,11 @@ function ChatPage({
             left: 0,
             right: 0,
             bottom: 0,
-            paddingHorizontal: theme.spacing.lg,
+            paddingHorizontal: composerHorizontalPadding ?? theme.spacing.md,
             paddingTop: theme.spacing.sm,
             paddingBottom: footerBottomPadding
           },
-          children: /* @__PURE__ */ jsx47(
+          children: /* @__PURE__ */ jsx49(
             ChatComposer,
             {
               ...composer,
@@ -5794,15 +5924,15 @@ function ChatPage({
 }
 
 // src/components/chat/ScrollToBottomButton.tsx
-import * as React35 from "react";
+import * as React37 from "react";
 import { Pressable as Pressable12, View as View38 } from "react-native";
 import Animated11, { Easing as Easing2, useAnimatedStyle as useAnimatedStyle2, useSharedValue as useSharedValue2, withTiming as withTiming2 } from "react-native-reanimated";
-import { jsx as jsx48 } from "react/jsx-runtime";
+import { jsx as jsx50 } from "react/jsx-runtime";
 function ScrollToBottomButton({ visible, onPress, children, style }) {
   const theme = useTheme();
   const progress = useSharedValue2(visible ? 1 : 0);
-  const [pressed, setPressed] = React35.useState(false);
-  React35.useEffect(() => {
+  const [pressed, setPressed] = React37.useState(false);
+  React37.useEffect(() => {
     progress.value = withTiming2(visible ? 1 : 0, { duration: 200, easing: Easing2.out(Easing2.ease) });
   }, [progress, visible]);
   const animStyle = useAnimatedStyle2(() => ({
@@ -5811,7 +5941,7 @@ function ScrollToBottomButton({ visible, onPress, children, style }) {
   }));
   const bg = theme.scheme === "dark" ? "rgba(39,39,42,0.9)" : "rgba(244,244,245,0.95)";
   const border = theme.scheme === "dark" ? withAlpha("#FFFFFF", 0.12) : withAlpha("#000000", 0.08);
-  return /* @__PURE__ */ jsx48(
+  return /* @__PURE__ */ jsx50(
     Animated11.View,
     {
       pointerEvents: visible ? "auto" : "none",
@@ -5825,7 +5955,7 @@ function ScrollToBottomButton({ visible, onPress, children, style }) {
         style,
         animStyle
       ],
-      children: /* @__PURE__ */ jsx48(
+      children: /* @__PURE__ */ jsx50(
         View38,
         {
           style: {
@@ -5844,7 +5974,7 @@ function ScrollToBottomButton({ visible, onPress, children, style }) {
             elevation: 5,
             opacity: pressed ? 0.85 : 1
           },
-          children: /* @__PURE__ */ jsx48(
+          children: /* @__PURE__ */ jsx50(
             Pressable12,
             {
               onPress,
@@ -5863,7 +5993,7 @@ function ScrollToBottomButton({ visible, onPress, children, style }) {
 
 // src/components/chat/ChatHeader.tsx
 import { StyleSheet as StyleSheet4 } from "react-native";
-import { jsx as jsx49 } from "react/jsx-runtime";
+import { jsx as jsx51 } from "react/jsx-runtime";
 function ChatHeader({ left, right, center, style }) {
   const flattenedStyle = StyleSheet4.flatten([
     {
@@ -5871,7 +6001,7 @@ function ChatHeader({ left, right, center, style }) {
     },
     style
   ]);
-  return /* @__PURE__ */ jsx49(
+  return /* @__PURE__ */ jsx51(
     StudioSheetHeader,
     {
       left,
@@ -5884,12 +6014,12 @@ function ChatHeader({ left, right, center, style }) {
 
 // src/components/chat/ForkNoticeBanner.tsx
 import { View as View40 } from "react-native";
-import { jsx as jsx50, jsxs as jsxs30 } from "react/jsx-runtime";
+import { jsx as jsx52, jsxs as jsxs30 } from "react/jsx-runtime";
 function ForkNoticeBanner({ isOwner = true, title, description, style }) {
   const theme = useTheme();
   const resolvedTitle = title ?? (isOwner ? "Remixed app" : "Remix app");
   const resolvedDescription = description ?? (isOwner ? "Any changes you make will be a remix of the original app. You can view the edited version in the Remix tab in your apps page." : "Once you make edits, this remixed version will appear on your Remixed apps page.");
-  return /* @__PURE__ */ jsx50(
+  return /* @__PURE__ */ jsx52(
     Card,
     {
       variant: "surfaceRaised",
@@ -5905,7 +6035,7 @@ function ForkNoticeBanner({ isOwner = true, title, description, style }) {
         style
       ],
       children: /* @__PURE__ */ jsxs30(View40, { style: { minWidth: 0 }, children: [
-        /* @__PURE__ */ jsx50(
+        /* @__PURE__ */ jsx52(
           Text,
           {
             style: {
@@ -5919,7 +6049,7 @@ function ForkNoticeBanner({ isOwner = true, title, description, style }) {
             children: resolvedTitle
           }
         ),
-        /* @__PURE__ */ jsx50(
+        /* @__PURE__ */ jsx52(
           Text,
           {
             style: {
@@ -5937,7 +6067,7 @@ function ForkNoticeBanner({ isOwner = true, title, description, style }) {
 }
 
 // src/studio/ui/ChatPanel.tsx
-import { jsx as jsx51, jsxs as jsxs31 } from "react/jsx-runtime";
+import { jsx as jsx53, jsxs as jsxs31 } from "react/jsx-runtime";
 function ChatPanel({
   title = "Chat",
   autoFocusComposer = false,
@@ -5957,9 +6087,9 @@ function ChatPanel({
   onStartDraw,
   onSend
 }) {
-  const listRef = React36.useRef(null);
-  const [nearBottom, setNearBottom] = React36.useState(true);
-  const handleSend = React36.useCallback(
+  const listRef = React38.useRef(null);
+  const [nearBottom, setNearBottom] = React38.useState(true);
+  const handleSend = React38.useCallback(
     async (text, composerAttachments) => {
       const all = composerAttachments ?? attachments;
       await onSend(text, all.length > 0 ? all : void 0);
@@ -5973,25 +6103,25 @@ function ChatPanel({
     },
     [attachments, nearBottom, onClearAttachments, onSend]
   );
-  const handleScrollToBottom = React36.useCallback(() => {
+  const handleScrollToBottom = React38.useCallback(() => {
     var _a;
     (_a = listRef.current) == null ? void 0 : _a.scrollToBottom({ animated: true });
   }, []);
-  const header = /* @__PURE__ */ jsx51(
+  const header = /* @__PURE__ */ jsx53(
     ChatHeader,
     {
       left: /* @__PURE__ */ jsxs31(View41, { style: { flexDirection: "row", alignItems: "center" }, children: [
-        /* @__PURE__ */ jsx51(StudioSheetHeaderIconButton, { onPress: onBack, accessibilityLabel: "Back", style: { marginRight: 8 }, children: /* @__PURE__ */ jsx51(IconBack, { size: 20, colorToken: "floatingContent" }) }),
-        onNavigateHome ? /* @__PURE__ */ jsx51(StudioSheetHeaderIconButton, { onPress: onNavigateHome, accessibilityLabel: "Home", children: /* @__PURE__ */ jsx51(IconHome, { size: 20, colorToken: "floatingContent" }) }) : null
+        /* @__PURE__ */ jsx53(StudioSheetHeaderIconButton, { onPress: onBack, accessibilityLabel: "Back", style: { marginRight: 8 }, children: /* @__PURE__ */ jsx53(IconBack, { size: 20, colorToken: "floatingContent" }) }),
+        onNavigateHome ? /* @__PURE__ */ jsx53(StudioSheetHeaderIconButton, { onPress: onNavigateHome, accessibilityLabel: "Home", children: /* @__PURE__ */ jsx53(IconHome, { size: 20, colorToken: "floatingContent" }) }) : null
       ] }),
       right: /* @__PURE__ */ jsxs31(View41, { style: { flexDirection: "row", alignItems: "center" }, children: [
-        onStartDraw ? /* @__PURE__ */ jsx51(StudioSheetHeaderIconButton, { onPress: onStartDraw, accessibilityLabel: "Draw", intent: "danger", style: { marginRight: 8 }, children: /* @__PURE__ */ jsx51(IconDraw, { size: 20, colorToken: "onDanger" }) }) : null,
-        /* @__PURE__ */ jsx51(StudioSheetHeaderIconButton, { onPress: onClose, accessibilityLabel: "Close", children: /* @__PURE__ */ jsx51(IconClose, { size: 20, colorToken: "floatingContent" }) })
+        onStartDraw ? /* @__PURE__ */ jsx53(StudioSheetHeaderIconButton, { onPress: onStartDraw, accessibilityLabel: "Draw", intent: "danger", style: { marginRight: 8 }, children: /* @__PURE__ */ jsx53(IconDraw, { size: 20, colorToken: "onDanger" }) }) : null,
+        /* @__PURE__ */ jsx53(StudioSheetHeaderIconButton, { onPress: onClose, accessibilityLabel: "Close", children: /* @__PURE__ */ jsx53(IconClose, { size: 20, colorToken: "floatingContent" }) })
       ] }),
       center: null
     }
   );
-  const topBanner = shouldForkOnEdit ? /* @__PURE__ */ jsx51(
+  const topBanner = shouldForkOnEdit ? /* @__PURE__ */ jsx53(
     ForkNoticeBanner,
     {
       isOwner: !shouldForkOnEdit,
@@ -6001,31 +6131,32 @@ function ChatPanel({
   const showMessagesLoading = Boolean(loading) && messages.length === 0 || forking;
   if (showMessagesLoading) {
     return /* @__PURE__ */ jsxs31(View41, { style: { flex: 1 }, children: [
-      /* @__PURE__ */ jsx51(View41, { children: header }),
-      topBanner ? /* @__PURE__ */ jsx51(View41, { style: { paddingHorizontal: 16, paddingTop: 8 }, children: topBanner }) : null,
+      /* @__PURE__ */ jsx53(View41, { children: header }),
+      topBanner ? /* @__PURE__ */ jsx53(View41, { style: { paddingHorizontal: 16, paddingTop: 8 }, children: topBanner }) : null,
       /* @__PURE__ */ jsxs31(View41, { style: { flex: 1, alignItems: "center", justifyContent: "center", paddingHorizontal: 24, paddingVertical: 12 }, children: [
-        /* @__PURE__ */ jsx51(ActivityIndicator8, {}),
-        /* @__PURE__ */ jsx51(View41, { style: { height: 12 } }),
-        /* @__PURE__ */ jsx51(Text, { variant: "bodyMuted", children: forking ? "Creating your copy\u2026" : "Loading messages\u2026" })
+        /* @__PURE__ */ jsx53(ActivityIndicator8, {}),
+        /* @__PURE__ */ jsx53(View41, { style: { height: 12 } }),
+        /* @__PURE__ */ jsx53(Text, { variant: "bodyMuted", children: forking ? "Creating your copy\u2026" : "Loading messages\u2026" })
       ] })
     ] });
   }
-  return /* @__PURE__ */ jsx51(
+  return /* @__PURE__ */ jsx53(
     ChatPage,
     {
       header,
       messages,
       showTypingIndicator,
       topBanner,
+      composerHorizontalPadding: 0,
       listRef,
       onNearBottomChange: setNearBottom,
-      overlay: /* @__PURE__ */ jsx51(
+      overlay: /* @__PURE__ */ jsx53(
         ScrollToBottomButton,
         {
           visible: !nearBottom,
           onPress: handleScrollToBottom,
           style: { bottom: 80 },
-          children: /* @__PURE__ */ jsx51(IconArrowDown, { size: 20, colorToken: "floatingContent" })
+          children: /* @__PURE__ */ jsx53(IconArrowDown, { size: 20, colorToken: "floatingContent" })
         }
       ),
       composer: {
@@ -6046,7 +6177,7 @@ function ChatPanel({
 }
 
 // src/components/dialogs/ConfirmMergeRequestDialog.tsx
-import * as React37 from "react";
+import * as React39 from "react";
 import { Pressable as Pressable14, View as View43 } from "react-native";
 
 // src/components/primitives/Modal.tsx
@@ -6055,7 +6186,7 @@ import {
   Pressable as Pressable13,
   View as View42
 } from "react-native";
-import { jsx as jsx52, jsxs as jsxs32 } from "react/jsx-runtime";
+import { jsx as jsx54, jsxs as jsxs32 } from "react/jsx-runtime";
 function Modal({
   visible,
   onRequestClose,
@@ -6064,7 +6195,7 @@ function Modal({
   contentStyle
 }) {
   const theme = useTheme();
-  return /* @__PURE__ */ jsx52(
+  return /* @__PURE__ */ jsx54(
     RNModal,
     {
       visible,
@@ -6072,7 +6203,7 @@ function Modal({
       animationType: "fade",
       onRequestClose,
       children: /* @__PURE__ */ jsxs32(View42, { style: { flex: 1, backgroundColor: theme.colors.backdrop, justifyContent: "center", padding: theme.spacing.lg }, children: [
-        /* @__PURE__ */ jsx52(
+        /* @__PURE__ */ jsx54(
           Pressable13,
           {
             accessibilityRole: "button",
@@ -6080,14 +6211,14 @@ function Modal({
             style: { position: "absolute", inset: 0 }
           }
         ),
-        /* @__PURE__ */ jsx52(Card, { variant: "surfaceRaised", padded: true, style: [{ borderRadius: theme.radii.xl }, contentStyle], children })
+        /* @__PURE__ */ jsx54(Card, { variant: "surfaceRaised", padded: true, style: [{ borderRadius: theme.radii.xl }, contentStyle], children })
       ] })
     }
   );
 }
 
 // src/components/dialogs/ConfirmMergeRequestDialog.tsx
-import { jsx as jsx53, jsxs as jsxs33 } from "react/jsx-runtime";
+import { jsx as jsx55, jsxs as jsxs33 } from "react/jsx-runtime";
 function ConfirmMergeRequestDialog({
   visible,
   onOpenChange,
@@ -6098,14 +6229,14 @@ function ConfirmMergeRequestDialog({
   onTestFirst
 }) {
   const theme = useTheme();
-  const close = React37.useCallback(() => onOpenChange(false), [onOpenChange]);
+  const close = React39.useCallback(() => onOpenChange(false), [onOpenChange]);
   const canConfirm = Boolean(mergeRequest) && !approveDisabled;
-  const handleConfirm = React37.useCallback(() => {
+  const handleConfirm = React39.useCallback(() => {
     if (!mergeRequest) return;
     onOpenChange(false);
     void onConfirm();
   }, [mergeRequest, onConfirm, onOpenChange]);
-  const handleTestFirst = React37.useCallback(() => {
+  const handleTestFirst = React39.useCallback(() => {
     if (!mergeRequest) return;
     onOpenChange(false);
     void onTestFirst(mergeRequest);
@@ -6128,7 +6259,7 @@ function ConfirmMergeRequestDialog({
         backgroundColor: theme.colors.background
       },
       children: [
-        /* @__PURE__ */ jsx53(View43, { children: /* @__PURE__ */ jsx53(
+        /* @__PURE__ */ jsx55(View43, { children: /* @__PURE__ */ jsx55(
           Text,
           {
             style: {
@@ -6141,7 +6272,7 @@ function ConfirmMergeRequestDialog({
           }
         ) }),
         /* @__PURE__ */ jsxs33(View43, { style: { marginTop: 16 }, children: [
-          /* @__PURE__ */ jsx53(
+          /* @__PURE__ */ jsx55(
             View43,
             {
               style: [
@@ -6151,7 +6282,7 @@ function ConfirmMergeRequestDialog({
                   opacity: canConfirm ? 1 : 0.5
                 }
               ],
-              children: /* @__PURE__ */ jsx53(
+              children: /* @__PURE__ */ jsx55(
                 Pressable14,
                 {
                   accessibilityRole: "button",
@@ -6159,13 +6290,13 @@ function ConfirmMergeRequestDialog({
                   disabled: !canConfirm,
                   onPress: handleConfirm,
                   style: [fullWidthButtonBase, { flex: 1 }],
-                  children: /* @__PURE__ */ jsx53(Text, { style: { textAlign: "center", color: theme.colors.onPrimary }, children: "Approve Merge" })
+                  children: /* @__PURE__ */ jsx55(Text, { style: { textAlign: "center", color: theme.colors.onPrimary }, children: "Approve Merge" })
                 }
               )
             }
           ),
-          /* @__PURE__ */ jsx53(View43, { style: { height: 8 } }),
-          /* @__PURE__ */ jsx53(
+          /* @__PURE__ */ jsx55(View43, { style: { height: 8 } }),
+          /* @__PURE__ */ jsx55(
             View43,
             {
               style: [
@@ -6177,7 +6308,7 @@ function ConfirmMergeRequestDialog({
                   opacity: isBuilding || !mergeRequest ? 0.5 : 1
                 }
               ],
-              children: /* @__PURE__ */ jsx53(
+              children: /* @__PURE__ */ jsx55(
                 Pressable14,
                 {
                   accessibilityRole: "button",
@@ -6185,13 +6316,13 @@ function ConfirmMergeRequestDialog({
                   disabled: isBuilding || !mergeRequest,
                   onPress: handleTestFirst,
                   style: [fullWidthButtonBase, { flex: 1 }],
-                  children: /* @__PURE__ */ jsx53(Text, { style: { textAlign: "center", color: theme.colors.text }, children: isBuilding ? "Preparing\u2026" : "Test edits first" })
+                  children: /* @__PURE__ */ jsx55(Text, { style: { textAlign: "center", color: theme.colors.text }, children: isBuilding ? "Preparing\u2026" : "Test edits first" })
                 }
               )
             }
           ),
-          /* @__PURE__ */ jsx53(View43, { style: { height: 8 } }),
-          /* @__PURE__ */ jsx53(
+          /* @__PURE__ */ jsx55(View43, { style: { height: 8 } }),
+          /* @__PURE__ */ jsx55(
             View43,
             {
               style: [
@@ -6202,14 +6333,14 @@ function ConfirmMergeRequestDialog({
                   borderColor: theme.colors.border
                 }
               ],
-              children: /* @__PURE__ */ jsx53(
+              children: /* @__PURE__ */ jsx55(
                 Pressable14,
                 {
                   accessibilityRole: "button",
                   accessibilityLabel: "Cancel",
                   onPress: close,
                   style: [fullWidthButtonBase, { flex: 1 }],
-                  children: /* @__PURE__ */ jsx53(Text, { style: { textAlign: "center", color: theme.colors.text }, children: "Cancel" })
+                  children: /* @__PURE__ */ jsx55(Text, { style: { textAlign: "center", color: theme.colors.text }, children: "Cancel" })
                 }
               )
             }
@@ -6221,7 +6352,7 @@ function ConfirmMergeRequestDialog({
 }
 
 // src/studio/ui/ConfirmMergeFlow.tsx
-import { jsx as jsx54 } from "react/jsx-runtime";
+import { jsx as jsx56 } from "react/jsx-runtime";
 function ConfirmMergeFlow({
   visible,
   onOpenChange,
@@ -6232,7 +6363,7 @@ function ConfirmMergeFlow({
   onConfirm,
   onTestFirst
 }) {
-  return /* @__PURE__ */ jsx54(
+  return /* @__PURE__ */ jsx56(
     ConfirmMergeRequestDialog,
     {
       visible,
@@ -6253,8 +6384,94 @@ function ConfirmMergeFlow({
   );
 }
 
+// src/studio/hooks/useOptimisticChatMessages.ts
+import * as React40 from "react";
+function makeOptimisticId() {
+  return `optimistic:${Date.now().toString(36)}:${Math.random().toString(36).slice(2, 10)}`;
+}
+function toEpochMs(createdAt) {
+  if (createdAt == null) return 0;
+  if (typeof createdAt === "number") return createdAt;
+  if (createdAt instanceof Date) return createdAt.getTime();
+  const t = Date.parse(String(createdAt));
+  return Number.isFinite(t) ? t : 0;
+}
+function isOptimisticResolvedByServer(chatMessages, o) {
+  if (o.failed) return false;
+  const normalize = (s) => s.trim();
+  let startIndex = -1;
+  if (o.baseServerLastId) {
+    startIndex = chatMessages.findIndex((m) => m.id === o.baseServerLastId);
+  }
+  const candidates = startIndex >= 0 ? chatMessages.slice(startIndex + 1) : chatMessages;
+  const target = normalize(o.content);
+  for (const m of candidates) {
+    if (m.author !== "human") continue;
+    if (normalize(m.content) !== target) continue;
+    const serverMs = toEpochMs(m.createdAt);
+    const optimisticMs = Date.parse(o.createdAtIso);
+    if (Number.isFinite(optimisticMs) && optimisticMs > 0 && serverMs > 0) {
+      if (serverMs + 12e4 < optimisticMs) continue;
+    }
+    return true;
+  }
+  return false;
+}
+function useOptimisticChatMessages({
+  threadId,
+  shouldForkOnEdit,
+  chatMessages,
+  onSendChat
+}) {
+  const [optimisticChat, setOptimisticChat] = React40.useState([]);
+  React40.useEffect(() => {
+    setOptimisticChat([]);
+  }, [threadId]);
+  const messages = React40.useMemo(() => {
+    if (!optimisticChat || optimisticChat.length === 0) return chatMessages;
+    const unresolved = optimisticChat.filter((o) => !isOptimisticResolvedByServer(chatMessages, o));
+    if (unresolved.length === 0) return chatMessages;
+    const optimisticAsChat = unresolved.map((o) => ({
+      id: o.id,
+      author: "human",
+      content: o.content,
+      createdAt: o.createdAtIso,
+      kind: "optimistic",
+      meta: o.failed ? { kind: "optimistic", event: "send.failed", status: "error" } : { kind: "optimistic", event: "send.pending", status: "info" }
+    }));
+    const merged = [...chatMessages, ...optimisticAsChat];
+    merged.sort((a, b) => String(a.createdAt).localeCompare(String(b.createdAt)));
+    return merged;
+  }, [chatMessages, optimisticChat]);
+  React40.useEffect(() => {
+    if (optimisticChat.length === 0) return;
+    setOptimisticChat((prev) => {
+      if (prev.length === 0) return prev;
+      const next = prev.filter((o) => !isOptimisticResolvedByServer(chatMessages, o) || o.failed);
+      return next.length === prev.length ? prev : next;
+    });
+  }, [chatMessages, optimisticChat.length]);
+  const onSend = React40.useCallback(
+    async (text, attachments) => {
+      if (shouldForkOnEdit) {
+        await onSendChat(text, attachments);
+        return;
+      }
+      const createdAtIso = (/* @__PURE__ */ new Date()).toISOString();
+      const baseServerLastId = chatMessages.length > 0 ? chatMessages[chatMessages.length - 1].id : null;
+      const id = makeOptimisticId();
+      setOptimisticChat((prev) => [...prev, { id, content: text, createdAtIso, baseServerLastId, failed: false }]);
+      void Promise.resolve(onSendChat(text, attachments)).catch(() => {
+        setOptimisticChat((prev) => prev.map((m) => m.id === id ? { ...m, failed: true } : m));
+      });
+    },
+    [chatMessages, onSendChat, shouldForkOnEdit]
+  );
+  return { messages, onSend };
+}
+
 // src/studio/ui/StudioOverlay.tsx
-import { Fragment as Fragment6, jsx as jsx55, jsxs as jsxs34 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx57, jsxs as jsxs34 } from "react/jsx-runtime";
 function StudioOverlay({
   captureTargetRef,
   app,
@@ -6285,31 +6502,38 @@ function StudioOverlay({
 }) {
   const theme = useTheme();
   const { width } = useWindowDimensions4();
-  const [sheetOpen, setSheetOpen] = React38.useState(false);
-  const [activePage, setActivePage] = React38.useState("preview");
-  const [drawing, setDrawing] = React38.useState(false);
-  const [chatAttachments, setChatAttachments] = React38.useState([]);
-  const [commentsAppId, setCommentsAppId] = React38.useState(null);
-  const [commentsCount, setCommentsCount] = React38.useState(null);
-  const [confirmMrId, setConfirmMrId] = React38.useState(null);
-  const confirmMr = React38.useMemo(
+  const [sheetOpen, setSheetOpen] = React41.useState(false);
+  const [activePage, setActivePage] = React41.useState("preview");
+  const [drawing, setDrawing] = React41.useState(false);
+  const [chatAttachments, setChatAttachments] = React41.useState([]);
+  const [commentsAppId, setCommentsAppId] = React41.useState(null);
+  const [commentsCount, setCommentsCount] = React41.useState(null);
+  const threadId = (app == null ? void 0 : app.threadId) ?? null;
+  const optimistic = useOptimisticChatMessages({
+    threadId,
+    shouldForkOnEdit,
+    chatMessages,
+    onSendChat
+  });
+  const [confirmMrId, setConfirmMrId] = React41.useState(null);
+  const confirmMr = React41.useMemo(
     () => confirmMrId ? incomingMergeRequests.find((m) => m.id === confirmMrId) ?? null : null,
     [confirmMrId, incomingMergeRequests]
   );
-  const handleSheetOpenChange = React38.useCallback((open) => {
+  const handleSheetOpenChange = React41.useCallback((open) => {
     setSheetOpen(open);
     if (!open) Keyboard5.dismiss();
   }, []);
-  const closeSheet = React38.useCallback(() => {
+  const closeSheet = React41.useCallback(() => {
     handleSheetOpenChange(false);
   }, [handleSheetOpenChange]);
-  const openSheet = React38.useCallback(() => setSheetOpen(true), []);
-  const goToChat = React38.useCallback(() => {
+  const openSheet = React41.useCallback(() => setSheetOpen(true), []);
+  const goToChat = React41.useCallback(() => {
     setActivePage("chat");
     openSheet();
   }, [openSheet]);
-  const backToPreview = React38.useCallback(() => {
-    if (Platform8.OS !== "ios") {
+  const backToPreview = React41.useCallback(() => {
+    if (Platform10.OS !== "ios") {
       Keyboard5.dismiss();
       setActivePage("preview");
       return;
@@ -6326,11 +6550,11 @@ function StudioOverlay({
     const t = setTimeout(finalize, 350);
     Keyboard5.dismiss();
   }, []);
-  const startDraw = React38.useCallback(() => {
+  const startDraw = React41.useCallback(() => {
     setDrawing(true);
     closeSheet();
   }, [closeSheet]);
-  const handleDrawCapture = React38.useCallback(
+  const handleDrawCapture = React41.useCallback(
     (dataUrl) => {
       setChatAttachments((prev) => [...prev, dataUrl]);
       setDrawing(false);
@@ -6339,7 +6563,7 @@ function StudioOverlay({
     },
     [openSheet]
   );
-  const toggleSheet = React38.useCallback(async () => {
+  const toggleSheet = React41.useCallback(async () => {
     if (!sheetOpen) {
       const shouldExitTest = Boolean(testingMrId) || isTesting;
       if (shouldExitTest) {
@@ -6351,7 +6575,7 @@ function StudioOverlay({
       closeSheet();
     }
   }, [closeSheet, isTesting, onRestoreBase, sheetOpen, testingMrId]);
-  const handleTestMr = React38.useCallback(
+  const handleTestMr = React41.useCallback(
     async (mr) => {
       if (!onTestMr) return;
       await onTestMr(mr);
@@ -6360,13 +6584,13 @@ function StudioOverlay({
     [closeSheet, onTestMr]
   );
   return /* @__PURE__ */ jsxs34(Fragment6, { children: [
-    /* @__PURE__ */ jsx55(EdgeGlowFrame, { visible: isTesting, role: "accent", thickness: 40, intensity: 1 }),
-    /* @__PURE__ */ jsx55(StudioBottomSheet, { open: sheetOpen, onOpenChange: handleSheetOpenChange, children: /* @__PURE__ */ jsx55(
+    /* @__PURE__ */ jsx57(EdgeGlowFrame, { visible: isTesting, role: "accent", thickness: 40, intensity: 1 }),
+    /* @__PURE__ */ jsx57(StudioBottomSheet, { open: sheetOpen, onOpenChange: handleSheetOpenChange, children: /* @__PURE__ */ jsx57(
       StudioSheetPager,
       {
         activePage,
         width,
-        preview: /* @__PURE__ */ jsx55(
+        preview: /* @__PURE__ */ jsx57(
           PreviewPanel,
           {
             app,
@@ -6392,10 +6616,10 @@ function StudioOverlay({
             commentCountOverride: commentsCount ?? void 0
           }
         ),
-        chat: /* @__PURE__ */ jsx55(
+        chat: /* @__PURE__ */ jsx57(
           ChatPanel,
           {
-            messages: chatMessages,
+            messages: optimistic.messages,
             showTypingIndicator: chatShowTypingIndicator,
             loading: chatLoading,
             sendDisabled: chatSendDisabled,
@@ -6410,12 +6634,12 @@ function StudioOverlay({
             onClose: closeSheet,
             onNavigateHome,
             onStartDraw: startDraw,
-            onSend: onSendChat
+            onSend: optimistic.onSend
           }
         )
       }
     ) }),
-    /* @__PURE__ */ jsx55(
+    /* @__PURE__ */ jsx57(
       FloatingDraggableButton,
       {
         visible: !sheetOpen && !drawing,
@@ -6423,10 +6647,10 @@ function StudioOverlay({
         badgeCount: incomingMergeRequests.length,
         onPress: toggleSheet,
         isLoading: (app == null ? void 0 : app.status) === "editing",
-        children: /* @__PURE__ */ jsx55(View44, { style: { width: 28, height: 28, alignItems: "center", justifyContent: "center" }, children: /* @__PURE__ */ jsx55(MergeIcon, { width: 24, height: 24, color: theme.colors.floatingContent }) })
+        children: /* @__PURE__ */ jsx57(View44, { style: { width: 28, height: 28, alignItems: "center", justifyContent: "center" }, children: /* @__PURE__ */ jsx57(MergeIcon, { width: 24, height: 24, color: theme.colors.floatingContent }) })
       }
     ),
-    /* @__PURE__ */ jsx55(
+    /* @__PURE__ */ jsx57(
       DrawModeOverlay,
       {
         visible: drawing,
@@ -6435,7 +6659,7 @@ function StudioOverlay({
         onCapture: handleDrawCapture
       }
     ),
-    /* @__PURE__ */ jsx55(
+    /* @__PURE__ */ jsx57(
       ConfirmMergeFlow,
       {
         visible: Boolean(confirmMr),
@@ -6448,7 +6672,7 @@ function StudioOverlay({
         onTestFirst: handleTestMr
       }
     ),
-    /* @__PURE__ */ jsx55(
+    /* @__PURE__ */ jsx57(
       AppCommentsSheet,
       {
         appId: commentsAppId,
@@ -6461,7 +6685,7 @@ function StudioOverlay({
 }
 
 // src/studio/ComergeStudio.tsx
-import { jsx as jsx56, jsxs as jsxs35 } from "react/jsx-runtime";
+import { jsx as jsx58, jsxs as jsxs35 } from "react/jsx-runtime";
 function ComergeStudio({
   appId,
   apiKey,
@@ -6469,17 +6693,17 @@ function ComergeStudio({
   onNavigateHome,
   style
 }) {
-  const [activeAppId, setActiveAppId] = React39.useState(appId);
-  const [runtimeAppId, setRuntimeAppId] = React39.useState(appId);
-  const [pendingRuntimeTargetAppId, setPendingRuntimeTargetAppId] = React39.useState(null);
-  const platform = React39.useMemo(() => RNPlatform.OS === "ios" ? "ios" : "android", []);
-  React39.useEffect(() => {
+  const [activeAppId, setActiveAppId] = React42.useState(appId);
+  const [runtimeAppId, setRuntimeAppId] = React42.useState(appId);
+  const [pendingRuntimeTargetAppId, setPendingRuntimeTargetAppId] = React42.useState(null);
+  const platform = React42.useMemo(() => RNPlatform.OS === "ios" ? "ios" : "android", []);
+  React42.useEffect(() => {
     setActiveAppId(appId);
     setRuntimeAppId(appId);
     setPendingRuntimeTargetAppId(null);
   }, [appId]);
-  const captureTargetRef = React39.useRef(null);
-  return /* @__PURE__ */ jsx56(StudioBootstrap, { apiKey, children: ({ userId }) => /* @__PURE__ */ jsx56(BottomSheetModalProvider, { children: /* @__PURE__ */ jsx56(
+  const captureTargetRef = React42.useRef(null);
+  return /* @__PURE__ */ jsx58(StudioBootstrap, { apiKey, children: ({ userId }) => /* @__PURE__ */ jsx58(BottomSheetModalProvider, { children: /* @__PURE__ */ jsx58(LiquidGlassResetProvider, { resetTriggers: [appId, activeAppId, runtimeAppId], children: /* @__PURE__ */ jsx58(
     ComergeStudioInner,
     {
       userId,
@@ -6495,7 +6719,7 @@ function ComergeStudio({
       captureTargetRef,
       style
     }
-  ) }) });
+  ) }) }) });
 }
 function ComergeStudioInner({
   userId,
@@ -6514,11 +6738,11 @@ function ComergeStudioInner({
   const { app, loading: appLoading } = useApp(activeAppId);
   const { app: runtimeAppFromHook } = useApp(runtimeAppId, { enabled: runtimeAppId !== activeAppId });
   const runtimeApp = runtimeAppId === activeAppId ? app : runtimeAppFromHook;
-  const sawEditingOnPendingTargetRef = React39.useRef(false);
-  React39.useEffect(() => {
+  const sawEditingOnPendingTargetRef = React42.useRef(false);
+  React42.useEffect(() => {
     sawEditingOnPendingTargetRef.current = false;
   }, [pendingRuntimeTargetAppId]);
-  React39.useEffect(() => {
+  React42.useEffect(() => {
     if (!pendingRuntimeTargetAppId) return;
     if (activeAppId !== pendingRuntimeTargetAppId) return;
     if ((app == null ? void 0 : app.status) === "editing") {
@@ -6535,13 +6759,38 @@ function ComergeStudioInner({
     platform,
     canRequestLatest: (runtimeApp == null ? void 0 : runtimeApp.status) === "ready"
   });
+  const sawEditingOnActiveAppRef = React42.useRef(false);
+  const [showPostEditPreparing, setShowPostEditPreparing] = React42.useState(false);
+  React42.useEffect(() => {
+    sawEditingOnActiveAppRef.current = false;
+    setShowPostEditPreparing(false);
+  }, [activeAppId]);
+  React42.useEffect(() => {
+    if (!(app == null ? void 0 : app.id)) return;
+    if (app.status === "editing") {
+      sawEditingOnActiveAppRef.current = true;
+      setShowPostEditPreparing(false);
+      return;
+    }
+    if (app.status === "ready" && sawEditingOnActiveAppRef.current) {
+      setShowPostEditPreparing(true);
+      sawEditingOnActiveAppRef.current = false;
+    }
+  }, [app == null ? void 0 : app.id, app == null ? void 0 : app.status]);
+  React42.useEffect(() => {
+    if (!showPostEditPreparing) return;
+    const stillProcessingBaseBundle = bundle.loading && bundle.loadingMode === "base" && !bundle.isTesting;
+    if (!stillProcessingBaseBundle) {
+      setShowPostEditPreparing(false);
+    }
+  }, [showPostEditPreparing, bundle.loading, bundle.loadingMode, bundle.isTesting]);
   const threadId = (app == null ? void 0 : app.threadId) ?? "";
   const thread = useThreadMessages(threadId);
   const mergeRequests = useMergeRequests({ appId: activeAppId });
-  const hasOpenOutgoingMr = React39.useMemo(() => {
+  const hasOpenOutgoingMr = React42.useMemo(() => {
     return mergeRequests.lists.outgoing.some((mr) => mr.status === "open");
   }, [mergeRequests.lists.outgoing]);
-  const incomingReviewMrs = React39.useMemo(() => {
+  const incomingReviewMrs = React42.useMemo(() => {
     if (!userId) return mergeRequests.lists.incoming;
     return mergeRequests.lists.incoming.filter((mr) => mr.createdBy !== userId);
   }, [mergeRequests.lists.incoming, userId]);
@@ -6563,18 +6812,26 @@ function ComergeStudioInner({
     uploadAttachments: uploader.uploadBase64Images
   });
   const chatSendDisabled = hasNoOutcomeAfterLastHuman(thread.raw);
-  const [processingMrId, setProcessingMrId] = React39.useState(null);
-  const [testingMrId, setTestingMrId] = React39.useState(null);
-  const chatShowTypingIndicator = React39.useMemo(() => {
+  const [processingMrId, setProcessingMrId] = React42.useState(null);
+  const [testingMrId, setTestingMrId] = React42.useState(null);
+  const chatShowTypingIndicator = React42.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__ */ jsx56(View45, { style: [{ flex: 1 }, style], children: /* @__PURE__ */ jsxs35(View45, { ref: captureTargetRef, style: { flex: 1 }, collapsable: false, children: [
-    /* @__PURE__ */ jsx56(RuntimeRenderer, { appKey, bundlePath: bundle.bundlePath, renderToken: bundle.renderToken }),
-    /* @__PURE__ */ jsx56(
+  return /* @__PURE__ */ jsx58(View45, { style: [{ flex: 1 }, style], children: /* @__PURE__ */ jsxs35(View45, { ref: captureTargetRef, style: { flex: 1 }, collapsable: false, children: [
+    /* @__PURE__ */ jsx58(
+      RuntimeRenderer,
+      {
+        appKey,
+        bundlePath: bundle.bundlePath,
+        forcePreparing: showPostEditPreparing,
+        renderToken: bundle.renderToken
+      }
+    ),
+    /* @__PURE__ */ jsx58(
       StudioOverlay,
       {
         captureTargetRef,