@comergehq/studio 0.1.9 → 0.1.11

package/dist/index.js

@@ -36,8 +36,8 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/studio/ComergeStudio.tsx
-var React39 = __toESM(require("react"));
-var import_react_native53 = require("react-native");
+var React42 = __toESM(require("react"));
+var import_react_native55 = require("react-native");
 var import_bottom_sheet6 = require("@gorhom/bottom-sheet");
 
 // src/studio/bootstrap/StudioBootstrap.tsx
@@ -982,6 +982,39 @@ var BundlesRepositoryImpl = class extends BaseRepository {
 var bundlesRepository = new BundlesRepositoryImpl(bundlesRemoteDataSource);
 
 // src/studio/hooks/useBundleManager.ts
+function sleep(ms) {
+  return new Promise((r) => setTimeout(r, ms));
+}
+function isRetryableNetworkError(e) {
+  var _a;
+  const err = e;
+  const code = typeof (err == null ? void 0 : err.code) === "string" ? err.code : "";
+  const message = typeof (err == null ? void 0 : err.message) === "string" ? err.message : "";
+  if (code === "ERR_NETWORK" || code === "ECONNABORTED") return true;
+  if (message.toLowerCase().includes("network error")) return true;
+  if (message.toLowerCase().includes("timeout")) return true;
+  const status = typeof ((_a = err == null ? void 0 : err.response) == null ? void 0 : _a.status) === "number" ? err.response.status : void 0;
+  if (status && (status === 429 || status >= 500)) return true;
+  return false;
+}
+async function withRetry(fn, opts) {
+  let lastErr = null;
+  for (let attempt = 1; attempt <= opts.attempts; attempt += 1) {
+    try {
+      return await fn();
+    } catch (e) {
+      lastErr = e;
+      const retryable = isRetryableNetworkError(e);
+      if (!retryable || attempt >= opts.attempts) {
+        throw e;
+      }
+      const exp = Math.min(opts.maxDelayMs, opts.baseDelayMs * Math.pow(2, attempt - 1));
+      const jitter = Math.floor(Math.random() * 250);
+      await sleep(exp + jitter);
+    }
+  }
+  throw lastErr;
+}
 function safeName(s) {
   return s.replace(/[^a-zA-Z0-9._-]/g, "_");
 }
@@ -1039,8 +1072,16 @@ async function getExistingNonEmptyFileUri(fileUri) {
 async function downloadIfMissing(url, fileUri) {
   const existing = await getExistingNonEmptyFileUri(fileUri);
   if (existing) return existing;
-  const res = await FileSystem.downloadAsync(url, fileUri);
-  return res.uri;
+  return await withRetry(
+    async () => {
+      await deleteFileIfExists(fileUri);
+      const res = await FileSystem.downloadAsync(url, fileUri);
+      const ok = await getExistingNonEmptyFileUri(res.uri);
+      if (!ok) throw new Error("Downloaded bundle is empty.");
+      return res.uri;
+    },
+    { attempts: 3, baseDelayMs: 500, maxDelayMs: 4e3 }
+  );
 }
 async function deleteFileIfExists(fileUri) {
   try {
@@ -1054,11 +1095,15 @@ async function deleteFileIfExists(fileUri) {
 async function safeReplaceFileFromUrl(url, targetUri, tmpKey) {
   const tmpUri = toBundleFileUri(`tmp:${tmpKey}:${Date.now()}`);
   try {
-    await FileSystem.downloadAsync(url, tmpUri);
-    const tmpOk = await getExistingNonEmptyFileUri(tmpUri);
-    if (!tmpOk) {
-      throw new Error("Downloaded bundle is empty.");
-    }
+    await withRetry(
+      async () => {
+        await deleteFileIfExists(tmpUri);
+        await FileSystem.downloadAsync(url, tmpUri);
+        const tmpOk = await getExistingNonEmptyFileUri(tmpUri);
+        if (!tmpOk) throw new Error("Downloaded bundle is empty.");
+      },
+      { attempts: 3, baseDelayMs: 500, maxDelayMs: 4e3 }
+    );
     await deleteFileIfExists(targetUri);
     await FileSystem.moveAsync({ from: tmpUri, to: targetUri });
     const finalOk = await getExistingNonEmptyFileUri(targetUri);
@@ -1071,28 +1116,44 @@ async function safeReplaceFileFromUrl(url, targetUri, tmpKey) {
 async function pollBundle(appId, bundleId, opts) {
   const start = Date.now();
   while (true) {
-    const bundle = await bundlesRepository.getById(appId, bundleId);
-    if (bundle.status === "succeeded" || bundle.status === "failed") return bundle;
+    try {
+      const bundle = await bundlesRepository.getById(appId, bundleId);
+      if (bundle.status === "succeeded" || bundle.status === "failed") return bundle;
+    } catch (e) {
+      if (!isRetryableNetworkError(e)) {
+        throw e;
+      }
+    }
     if (Date.now() - start > opts.timeoutMs) {
       throw new Error("Bundle build timed out.");
     }
-    await new Promise((r) => setTimeout(r, opts.intervalMs));
+    await sleep(opts.intervalMs);
   }
 }
 async function resolveBundlePath(src, platform, mode) {
   const { appId, commitId } = src;
   const dir = bundlesCacheDir();
   await ensureDir(dir);
-  const initiate = await bundlesRepository.initiate(appId, {
-    platform,
-    commitId: commitId ?? void 0,
-    idempotencyKey: `${appId}:${commitId ?? "head"}:${platform}`
-  });
+  const initiate = await withRetry(
+    async () => {
+      return await bundlesRepository.initiate(appId, {
+        platform,
+        commitId: commitId ?? void 0,
+        idempotencyKey: `${appId}:${commitId ?? "head"}:${platform}`
+      });
+    },
+    { attempts: 3, baseDelayMs: 500, maxDelayMs: 4e3 }
+  );
   const finalBundle = initiate.status === "succeeded" || initiate.status === "failed" ? initiate : await pollBundle(appId, initiate.id, { timeoutMs: 3 * 60 * 1e3, intervalMs: 1200 });
   if (finalBundle.status === "failed") {
     throw new Error("Bundle build failed.");
   }
-  const signed = await bundlesRepository.getSignedDownloadUrl(appId, finalBundle.id, { redirect: false });
+  const signed = await withRetry(
+    async () => {
+      return await bundlesRepository.getSignedDownloadUrl(appId, finalBundle.id, { redirect: false });
+    },
+    { attempts: 3, baseDelayMs: 500, maxDelayMs: 4e3 }
+  );
   const bundlePath = mode === "base" ? await safeReplaceFileFromUrl(
     signed.url,
     toBundleFileUri(baseBundleKey(appId, platform)),
@@ -1108,6 +1169,7 @@ function useBundleManager({
   const [bundlePath, setBundlePath] = React5.useState(null);
   const [renderToken, setRenderToken] = React5.useState(0);
   const [loading, setLoading] = React5.useState(false);
+  const [loadingMode, setLoadingMode] = React5.useState(null);
   const [statusLabel, setStatusLabel] = React5.useState(null);
   const [error, setError] = React5.useState(null);
   const [isTesting, setIsTesting] = React5.useState(false);
@@ -1123,6 +1185,7 @@ function useBundleManager({
       baseOpIdRef.current += 1;
       if (activeLoadModeRef.current === "base") {
         setLoading(false);
+        setLoadingMode(null);
         setStatusLabel(null);
         activeLoadModeRef.current = null;
       }
@@ -1187,6 +1250,7 @@ function useBundleManager({
     const opId = mode === "base" ? ++baseOpIdRef.current : ++testOpIdRef.current;
     activeLoadModeRef.current = mode;
     setLoading(true);
+    setLoadingMode(mode);
     setError(null);
     setStatusLabel(mode === "test" ? "Loading test bundle\u2026" : "Loading latest build\u2026");
     if (mode === "base") {
@@ -1229,6 +1293,7 @@ function useBundleManager({
       if (mode === "base" && opId !== baseOpIdRef.current) return;
       if (mode === "test" && opId !== testOpIdRef.current) return;
       setLoading(false);
+      setLoadingMode(null);
       if (activeLoadModeRef.current === mode) activeLoadModeRef.current = null;
     }
   }, [activateCachedBase, platform]);
@@ -1250,7 +1315,7 @@ function useBundleManager({
     if (!canRequestLatest) return;
     void loadBase();
   }, [base.appId, base.commitId, platform, canRequestLatest, loadBase]);
-  return { bundlePath, renderToken, loading, statusLabel, error, isTesting, loadBase, loadTest, restoreBase };
+  return { bundlePath, renderToken, loading, loadingMode, statusLabel, error, isTesting, loadBase, loadTest, restoreBase };
 }
 
 // src/studio/hooks/useMergeRequests.ts
@@ -1509,6 +1574,8 @@ function useMergeRequests(params) {
 
 // src/studio/hooks/useAttachmentUpload.ts
 var React7 = __toESM(require("react"));
+var import_react_native5 = require("react-native");
+var FileSystem2 = __toESM(require("expo-file-system/legacy"));
 
 // src/data/attachment/remote.ts
 var AttachmentRemoteDataSourceImpl = class extends BaseRemote {
@@ -1548,6 +1615,40 @@ var attachmentRepository = new AttachmentRepositoryImpl(
 );
 
 // src/studio/hooks/useAttachmentUpload.ts
+async function dataUrlToBlobAndroid(dataUrl) {
+  const normalized = dataUrl.startsWith("data:") ? dataUrl : `data:image/png;base64,${dataUrl}`;
+  const comma = normalized.indexOf(",");
+  if (comma === -1) {
+    throw new Error("Invalid data URL (missing comma separator)");
+  }
+  const header = normalized.slice(0, comma);
+  const base64 = normalized.slice(comma + 1);
+  const mimeMatch = header.match(/data:(.*?);base64/i);
+  const mimeType = (mimeMatch == null ? void 0 : mimeMatch[1]) ?? "application/octet-stream";
+  const cacheDir = FileSystem2.cacheDirectory;
+  if (!cacheDir) {
+    throw new Error("expo-file-system cacheDirectory is unavailable");
+  }
+  const fileUri = `${cacheDir}attachment-${Date.now()}-${Math.random().toString(16).slice(2)}.bin`;
+  await FileSystem2.writeAsStringAsync(fileUri, base64, {
+    encoding: FileSystem2.EncodingType.Base64
+  });
+  try {
+    const resp = await fetch(fileUri);
+    const blob = await resp.blob();
+    return blob.type ? blob : new Blob([blob], { type: mimeType });
+  } finally {
+    void FileSystem2.deleteAsync(fileUri, { idempotent: true }).catch(() => {
+    });
+  }
+}
+function getMimeTypeFromDataUrl(dataUrl) {
+  const normalized = dataUrl.startsWith("data:") ? dataUrl : `data:image/png;base64,${dataUrl}`;
+  const comma = normalized.indexOf(",");
+  const header = comma === -1 ? normalized : normalized.slice(0, comma);
+  const mimeMatch = header.match(/data:(.*?);base64/i);
+  return (mimeMatch == null ? void 0 : mimeMatch[1]) ?? "image/png";
+}
 function useAttachmentUpload() {
   const [uploading, setUploading] = React7.useState(false);
   const [error, setError] = React7.useState(null);
@@ -1560,15 +1661,15 @@ function useAttachmentUpload() {
       const blobs = await Promise.all(
         dataUrls.map(async (dataUrl, idx) => {
           const normalized = dataUrl.startsWith("data:") ? dataUrl : `data:image/png;base64,${dataUrl}`;
-          const resp = await fetch(normalized);
-          const blob = await resp.blob();
-          return { blob, idx };
+          const blob = import_react_native5.Platform.OS === "android" ? await dataUrlToBlobAndroid(normalized) : await (await fetch(normalized)).blob();
+          const mimeType = getMimeTypeFromDataUrl(normalized);
+          return { blob, idx, mimeType };
         })
       );
-      const files = blobs.map(({ blob }, idx) => ({
+      const files = blobs.map(({ blob, mimeType }, idx) => ({
         name: `attachment-${Date.now()}-${idx}.png`,
         size: blob.size,
-        mimeType: blob.type || "image/png"
+        mimeType
       }));
       const presign = await attachmentRepository.presign({ threadId, appId, files });
       await Promise.all(presign.uploads.map((u, index) => attachmentRepository.upload(u, blobs[index].blob)));
@@ -1692,14 +1793,14 @@ function hasNoOutcomeAfterLastHuman(messages) {
 }
 
 // src/studio/ui/RuntimeRenderer.tsx
-var import_react_native5 = require("react-native");
+var import_react_native6 = require("react-native");
 var import_runtime = require("@comergehq/runtime");
 var import_jsx_runtime3 = require("react/jsx-runtime");
-function RuntimeRenderer({ appKey, bundlePath, renderToken, style }) {
-  if (!bundlePath) {
-    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native5.View, { style: [{ flex: 1, justifyContent: "center", alignItems: "center", padding: 24 }, style], children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Text, { variant: "bodyMuted", children: "Preparing app\u2026" }) });
+function RuntimeRenderer({ appKey, bundlePath, forcePreparing, renderToken, style }) {
+  if (!bundlePath || forcePreparing) {
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native6.View, { style: [{ flex: 1, justifyContent: "center", alignItems: "center", padding: 24 }, style], children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Text, { variant: "bodyMuted", children: "Preparing app\u2026" }) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native5.View, { style: [{ flex: 1 }, style], children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native6.View, { style: [{ flex: 1 }, style], children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
     import_runtime.ComergeRuntimeRenderer,
     {
       appKey,
@@ -1711,25 +1812,76 @@ function RuntimeRenderer({ appKey, bundlePath, renderToken, style }) {
 }
 
 // src/studio/ui/StudioOverlay.tsx
-var React38 = __toESM(require("react"));
-var import_react_native52 = require("react-native");
+var React41 = __toESM(require("react"));
+var import_react_native54 = require("react-native");
 
 // src/components/studio-sheet/StudioBottomSheet.tsx
-var React9 = __toESM(require("react"));
-var import_react_native7 = require("react-native");
+var React11 = __toESM(require("react"));
+var import_react_native9 = require("react-native");
 var import_bottom_sheet = __toESM(require("@gorhom/bottom-sheet"));
 var import_react_native_safe_area_context = require("react-native-safe-area-context");
 
 // src/components/studio-sheet/StudioSheetBackground.tsx
-var import_react_native6 = require("react-native");
+var import_react_native8 = require("react-native");
+var import_liquid_glass2 = require("@callstack/liquid-glass");
+
+// src/components/utils/ResettableLiquidGlassView.tsx
+var React10 = __toESM(require("react"));
 var import_liquid_glass = require("@callstack/liquid-glass");
+
+// src/components/utils/liquidGlassReset.tsx
+var React9 = __toESM(require("react"));
+var import_react_native7 = require("react-native");
 var import_jsx_runtime4 = require("react/jsx-runtime");
+var LiquidGlassResetContext = React9.createContext(0);
+function LiquidGlassResetProvider({
+  children,
+  resetTriggers = []
+}) {
+  const [token, setToken] = React9.useState(0);
+  React9.useEffect(() => {
+    if (import_react_native7.Platform.OS !== "ios") return;
+    const onChange = (state) => {
+      if (state === "active") setToken((t) => t + 1);
+    };
+    const sub = import_react_native7.AppState.addEventListener("change", onChange);
+    return () => sub.remove();
+  }, []);
+  React9.useEffect(() => {
+    setToken((t) => t + 1);
+  }, resetTriggers);
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(LiquidGlassResetContext.Provider, { value: token, children });
+}
+function useLiquidGlassResetToken() {
+  return React9.useContext(LiquidGlassResetContext);
+}
+
+// src/components/utils/ResettableLiquidGlassView.tsx
+var import_jsx_runtime5 = require("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__ */ (0, import_jsx_runtime5.jsx)(import_liquid_glass.LiquidGlassView, { ...props, onLayout, children }, `liquid-glass-${token}-${layoutBootKey}`);
+}
+
+// src/components/studio-sheet/StudioSheetBackground.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
 function StudioSheetBackground({
   style,
   renderBackground
 }) {
   const theme = useTheme();
-  const radius = import_react_native6.Platform.OS === "ios" ? 39 : 16;
+  const radius = import_react_native8.Platform.OS === "ios" ? 39 : 16;
   const fallbackBgColor = theme.scheme === "dark" ? "rgba(11, 8, 15, 0.85)" : "rgba(255, 255, 255, 0.85)";
   const secondaryBgBaseColor = theme.scheme === "dark" ? "rgb(24, 24, 27)" : "rgb(173, 173, 173)";
   const containerStyle = {
@@ -1739,18 +1891,18 @@ function StudioSheetBackground({
     overflow: "hidden"
   };
   if (renderBackground) {
-    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_jsx_runtime4.Fragment, { children: renderBackground({ style: containerStyle }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_jsx_runtime6.Fragment, { children: renderBackground({ style: containerStyle }) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-      import_liquid_glass.LiquidGlassView,
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      ResettableLiquidGlassView,
       {
-        style: [containerStyle, !import_liquid_glass.isLiquidGlassSupported && { backgroundColor: fallbackBgColor }],
+        style: [containerStyle, !import_liquid_glass2.isLiquidGlassSupported && { backgroundColor: fallbackBgColor }],
         effect: "regular"
       }
     ),
-    import_liquid_glass.isLiquidGlassSupported && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-      import_react_native6.View,
+    import_liquid_glass2.isLiquidGlassSupported && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      import_react_native8.View,
       {
         style: [
           containerStyle,
@@ -1771,11 +1923,11 @@ function StudioSheetBackground({
 }
 
 // src/components/studio-sheet/StudioBottomSheet.tsx
-var import_jsx_runtime5 = require("react/jsx-runtime");
+var import_jsx_runtime7 = require("react/jsx-runtime");
 function StudioBottomSheet({
   open,
   onOpenChange,
-  snapPoints = ["80%", "100%"],
+  snapPoints = ["100%"],
   sheetRef,
   background,
   children,
@@ -1783,16 +1935,16 @@ function StudioBottomSheet({
 }) {
   const theme = useTheme();
   const insets = (0, import_react_native_safe_area_context.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(import_react_native7.AppState.currentState);
-  React9.useEffect(() => {
-    const sub = import_react_native7.AppState.addEventListener("change", (state) => {
+  const currentIndexRef = React11.useRef(open ? snapPoints.length - 1 : -1);
+  const lastAppStateRef = React11.useRef(import_react_native9.AppState.currentState);
+  React11.useEffect(() => {
+    const sub = import_react_native9.AppState.addEventListener("change", (state) => {
       const prev = lastAppStateRef.current;
       lastAppStateRef.current = state;
       if (state === "background" || state === "inactive") {
-        import_react_native7.Keyboard.dismiss();
+        import_react_native9.Keyboard.dismiss();
         return;
       }
       if (state !== "active") return;
@@ -1800,14 +1952,14 @@ function StudioBottomSheet({
       if (!sheet) return;
       const idx = currentIndexRef.current;
       if (open && idx >= 0) {
-        import_react_native7.Keyboard.dismiss();
+        import_react_native9.Keyboard.dismiss();
         requestAnimationFrame(() => sheet.snapToIndex(idx));
         setTimeout(() => sheet.snapToIndex(idx), 120);
       }
     });
     return () => sub.remove();
   }, [open, resolvedSheetRef]);
-  React9.useEffect(() => {
+  React11.useEffect(() => {
     const sheet = resolvedSheetRef.current;
     if (!sheet) return;
     if (open) {
@@ -1816,42 +1968,42 @@ 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__ */ (0, import_jsx_runtime5.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
     import_bottom_sheet.default,
     {
       ref: resolvedSheetRef,
       index: open ? snapPoints.length - 1 : -1,
       snapPoints,
+      enableDynamicSizing: false,
       enablePanDownToClose: true,
-      keyboardBehavior: "interactive",
-      keyboardBlurBehavior: "restore",
+      enableContentPanningGesture: false,
       android_keyboardInputMode: "adjustResize",
-      backgroundComponent: (props) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(StudioSheetBackground, { ...props, renderBackground: background == null ? void 0 : background.renderBackground }),
+      backgroundComponent: (props) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(StudioSheetBackground, { ...props, renderBackground: background == null ? void 0 : background.renderBackground }),
       topInset: insets.top,
       bottomInset: 0,
       handleIndicatorStyle: { backgroundColor: theme.colors.handleIndicator },
       onChange: handleChange,
       ...bottomSheetProps,
-      children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_native7.View, { style: { flex: 1, overflow: "hidden" }, children })
+      children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native9.View, { style: { flex: 1, overflow: "hidden" }, children })
     }
   );
 }
 
 // src/components/studio-sheet/StudioSheetPager.tsx
-var React10 = __toESM(require("react"));
-var import_react_native8 = require("react-native");
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var React12 = __toESM(require("react"));
+var import_react_native10 = require("react-native");
+var import_jsx_runtime8 = require("react/jsx-runtime");
 function StudioSheetPager({ activePage, width, preview, chat, style }) {
-  const anim = React10.useRef(new import_react_native8.Animated.Value(activePage === "chat" ? 1 : 0)).current;
-  React10.useEffect(() => {
-    import_react_native8.Animated.spring(anim, {
+  const anim = React12.useRef(new import_react_native10.Animated.Value(activePage === "chat" ? 1 : 0)).current;
+  React12.useEffect(() => {
+    import_react_native10.Animated.spring(anim, {
       toValue: activePage === "chat" ? 1 : 0,
       useNativeDriver: true,
       tension: 65,
@@ -1860,9 +2012,9 @@ function StudioSheetPager({ activePage, width, preview, chat, style }) {
   }, [activePage, anim]);
   const previewTranslateX = anim.interpolate({ inputRange: [0, 1], outputRange: [0, -width] });
   const chatTranslateX = anim.interpolate({ inputRange: [0, 1], outputRange: [width, 0] });
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_react_native8.Animated.View, { style: [{ flex: 1 }, style], children: [
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-      import_react_native8.Animated.View,
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_react_native10.Animated.View, { style: [{ flex: 1 }, style], children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      import_react_native10.Animated.View,
       {
         style: [
           {
@@ -1878,8 +2030,8 @@ function StudioSheetPager({ activePage, width, preview, chat, style }) {
         children: preview
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-      import_react_native8.Animated.View,
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      import_react_native10.Animated.View,
       {
         style: [
           {
@@ -1900,10 +2052,10 @@ function StudioSheetPager({ activePage, width, preview, chat, style }) {
 
 // src/components/floating-draggable-button/FloatingDraggableButton.tsx
 var import_react = require("react");
-var import_react_native9 = require("react-native");
+var import_react_native11 = require("react-native");
 var Haptics = __toESM(require("expo-haptics"));
 var import_react_native_reanimated = __toESM(require("react-native-reanimated"));
-var import_liquid_glass2 = require("@callstack/liquid-glass");
+var import_liquid_glass3 = require("@callstack/liquid-glass");
 
 // src/components/floating-draggable-button/constants.ts
 var DEFAULT_SIZE = 48;
@@ -1914,11 +2066,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
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_jsx_runtime9 = require("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 };
@@ -1926,8 +2077,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: import_react_native_reanimated.Easing.out(import_react_native_reanimated.Easing.ease) };
-var TIMING_OPACITY_OUT = { duration: 250, easing: import_react_native_reanimated.Easing.in(import_react_native_reanimated.Easing.ease) };
 function clamp(value, min, max) {
   "worklet";
   return Math.max(min, Math.min(max, value));
@@ -1959,7 +2108,7 @@ function FloatingDraggableButton({
   backgroundColor
 }) {
   const theme = useTheme();
-  const { width, height } = (0, import_react_native9.useWindowDimensions)();
+  const { width, height } = (0, import_react_native11.useWindowDimensions)();
   const isDanger = variant === "danger";
   const onPressRef = (0, import_react.useRef)(onPress);
   (0, import_react.useEffect)(() => {
@@ -1974,30 +2123,20 @@ function FloatingDraggableButton({
   const translateY = (0, import_react_native_reanimated.useSharedValue)(getHiddenTranslateY(height));
   const scale = (0, import_react_native_reanimated.useSharedValue)(ENTER_SCALE_FROM);
   const rotation = (0, import_react_native_reanimated.useSharedValue)(ENTER_ROTATION_FROM_DEG);
-  const opacity = (0, import_react_native_reanimated.useSharedValue)(1);
   const borderPulse = (0, import_react_native_reanimated.useSharedValue)(0);
   const startPos = (0, import_react.useRef)({ x: 0, y: 0 });
   const isAnimatingOut = (0, import_react.useRef)(false);
   const animateToHidden = (0, import_react.useCallback)(
     (options) => {
-      translateX.value = (0, import_react_native_reanimated.withSpring)(getHiddenTranslateX(size), SPRING_POSITION);
+      const finish = options == null ? void 0 : options.onFinish;
+      translateX.value = (0, import_react_native_reanimated.withSpring)(getHiddenTranslateX(size), SPRING_POSITION, (finished) => {
+        if (finished && finish) (0, import_react_native_reanimated.runOnJS)(finish)();
+      });
       translateY.value = (0, import_react_native_reanimated.withSpring)(getHiddenTranslateY(height), SPRING_POSITION);
       scale.value = (0, import_react_native_reanimated.withSpring)(ENTER_SCALE_FROM, SPRING_SCALE_IN);
       rotation.value = (0, import_react_native_reanimated.withSpring)(ENTER_ROTATION_FROM_DEG, SPRING_ROTATION_IN);
-      const finish = options == null ? void 0 : options.onFinish;
-      if (!finish) {
-        opacity.value = (0, import_react_native_reanimated.withTiming)(HIDDEN_OPACITY, TIMING_OPACITY_OUT);
-        return;
-      }
-      opacity.value = (0, import_react_native_reanimated.withTiming)(
-        HIDDEN_OPACITY,
-        TIMING_OPACITY_OUT,
-        (finished) => {
-          if (finished) (0, import_react_native_reanimated.runOnJS)(finish)();
-        }
-      );
     },
-    [height, opacity, rotation, scale, size, translateX, translateY]
+    [height, rotation, scale, size, translateX, translateY]
   );
   const animateOut = (0, import_react.useCallback)(() => {
     if (isAnimatingOut.current) return;
@@ -2037,8 +2176,7 @@ function FloatingDraggableButton({
       (0, import_react_native_reanimated.withSpring)(1, SPRING_SCALE_OUT)
     );
     rotation.value = (0, import_react_native_reanimated.withSpring)(0, SPRING_ROTATION_IN);
-    opacity.value = (0, import_react_native_reanimated.withTiming)(1, TIMING_OPACITY_IN);
-  }, [height, offset.bottom, offset.left, opacity, rotation, scale, size, translateX, translateY]);
+  }, [height, offset.bottom, offset.left, rotation, scale, size, translateX, translateY]);
   (0, import_react.useEffect)(() => {
     const timer = setTimeout(() => {
       if (visible) {
@@ -2062,7 +2200,7 @@ function FloatingDraggableButton({
     }
   }, [forceShowTrigger, visible, animateIn]);
   const panResponder = (0, import_react.useRef)(
-    import_react_native9.PanResponder.create({
+    import_react_native11.PanResponder.create({
       onStartShouldSetPanResponder: () => true,
       onMoveShouldSetPanResponder: () => true,
       onPanResponderGrant: () => {
@@ -2094,8 +2232,7 @@ function FloatingDraggableButton({
       { translateY: translateY.value },
       { scale: scale.value },
       { rotate: `${rotation.value}deg` }
-    ],
-    opacity: opacity.value
+    ]
   }));
   const borderAnimatedStyle = (0, import_react_native_reanimated.useAnimatedStyle)(() => {
     const borderColor = (0, import_react_native_reanimated.interpolateColor)(
@@ -2109,7 +2246,7 @@ function FloatingDraggableButton({
       borderRadius: size / 2
     };
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
     import_react_native_reanimated.default.View,
     {
       ...panResponder.panHandlers,
@@ -2118,31 +2255,31 @@ function FloatingDraggableButton({
       accessibilityRole: "button",
       accessibilityLabel: ariaLabel,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native_reanimated.default.View, { style: [{ width: size, height: size, borderRadius: size / 2 }, borderAnimatedStyle], children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-          import_liquid_glass2.LiquidGlassView,
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native_reanimated.default.View, { style: [{ width: size, height: size, borderRadius: size / 2 }, borderAnimatedStyle], children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+          ResettableLiquidGlassView,
           {
-            style: [{ flex: 1, borderRadius: size / 2 }, !import_liquid_glass2.isLiquidGlassSupported && { backgroundColor: fallbackBgColor }],
+            style: [{ flex: 1, borderRadius: size / 2 }, !import_liquid_glass3.isLiquidGlassSupported && { backgroundColor: fallbackBgColor }],
             interactive: true,
             effect: "clear",
-            children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-              import_react_native9.Pressable,
+            children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+              import_react_native11.Pressable,
               {
                 onPress: () => {
                   if (!disabled) animateOut();
                 },
                 style: styles.buttonInner,
                 android_ripple: { color: "rgba(255, 255, 255, 0.3)", borderless: true },
-                children: children ?? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native9.View, {})
+                children: children ?? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native11.View, {})
               }
             )
           }
         ) }),
-        badgeCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native9.View, { style: [styles.badge, { backgroundColor: theme.colors.danger }], children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native9.Text, { style: [styles.badgeText, { color: theme.colors.onDanger }], children: badgeCount > 99 ? "99+" : badgeCount }) })
+        badgeCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native11.View, { style: [styles.badge, { backgroundColor: theme.colors.danger }], children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native11.Text, { style: [styles.badgeText, { color: theme.colors.onDanger }], children: badgeCount > 99 ? "99+" : badgeCount }) })
       ]
     }
   );
 }
-var styles = import_react_native9.StyleSheet.create({
+var styles = import_react_native11.StyleSheet.create({
   floatingButton: {
     position: "absolute",
     justifyContent: "center",
@@ -2178,8 +2315,8 @@ var styles = import_react_native9.StyleSheet.create({
 });
 
 // src/components/overlays/EdgeGlowFrame.tsx
-var React11 = __toESM(require("react"));
-var import_react_native10 = require("react-native");
+var React13 = __toESM(require("react"));
+var import_react_native12 = require("react-native");
 var import_expo_linear_gradient = require("expo-linear-gradient");
 
 // src/components/utils/color.ts
@@ -2198,7 +2335,7 @@ function withAlpha(color, alpha) {
 }
 
 // src/components/overlays/EdgeGlowFrame.tsx
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_jsx_runtime10 = require("react/jsx-runtime");
 function baseColor(role, theme) {
   switch (role) {
     case "danger":
@@ -2221,9 +2358,9 @@ function EdgeGlowFrame({
 }) {
   const theme = useTheme();
   const alpha = Math.max(0, Math.min(1, intensity));
-  const anim = React11.useRef(new import_react_native10.Animated.Value(visible ? 1 : 0)).current;
-  React11.useEffect(() => {
-    import_react_native10.Animated.timing(anim, {
+  const anim = React13.useRef(new import_react_native12.Animated.Value(visible ? 1 : 0)).current;
+  React13.useEffect(() => {
+    import_react_native12.Animated.timing(anim, {
       toValue: visible ? 1 : 0,
       duration: 300,
       useNativeDriver: true
@@ -2232,8 +2369,8 @@ function EdgeGlowFrame({
   const c = baseColor(role, theme);
   const strong = withAlpha(c, 0.6 * alpha);
   const soft = withAlpha(c, 0.22 * alpha);
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_react_native10.Animated.View, { pointerEvents: "none", style: [{ position: "absolute", inset: 0, opacity: anim }, style], children: [
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native10.View, { style: { position: "absolute", top: 0, left: 0, right: 0, height: thickness }, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_react_native12.Animated.View, { pointerEvents: "none", style: [{ position: "absolute", inset: 0, opacity: anim }, style], children: [
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native12.View, { style: { position: "absolute", top: 0, left: 0, right: 0, height: thickness }, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
       import_expo_linear_gradient.LinearGradient,
       {
         colors: [strong, soft, "transparent"],
@@ -2242,7 +2379,7 @@ function EdgeGlowFrame({
         style: { width: "100%", height: "100%" }
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native10.View, { style: { position: "absolute", bottom: 0, left: 0, right: 0, height: thickness }, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native12.View, { style: { position: "absolute", bottom: 0, left: 0, right: 0, height: thickness }, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
       import_expo_linear_gradient.LinearGradient,
       {
         colors: ["transparent", soft, strong],
@@ -2251,7 +2388,7 @@ function EdgeGlowFrame({
         style: { width: "100%", height: "100%" }
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native10.View, { style: { position: "absolute", top: 0, bottom: 0, left: 0, width: thickness }, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native12.View, { style: { position: "absolute", top: 0, bottom: 0, left: 0, width: thickness }, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
       import_expo_linear_gradient.LinearGradient,
       {
         colors: [strong, soft, "transparent"],
@@ -2260,7 +2397,7 @@ function EdgeGlowFrame({
         style: { width: "100%", height: "100%" }
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native10.View, { style: { position: "absolute", top: 0, bottom: 0, right: 0, width: thickness }, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native12.View, { style: { position: "absolute", top: 0, bottom: 0, right: 0, width: thickness }, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
       import_expo_linear_gradient.LinearGradient,
       {
         colors: ["transparent", soft, strong],
@@ -2273,13 +2410,13 @@ function EdgeGlowFrame({
 }
 
 // src/components/draw/DrawModeOverlay.tsx
-var React14 = __toESM(require("react"));
-var import_react_native14 = require("react-native");
+var React16 = __toESM(require("react"));
+var import_react_native16 = require("react-native");
 var import_react_native_view_shot = require("react-native-view-shot");
 
 // src/components/draw/DrawSurface.tsx
-var React12 = __toESM(require("react"));
-var import_react_native11 = require("react-native");
+var React14 = __toESM(require("react"));
+var import_react_native13 = require("react-native");
 var import_react_native_svg = __toESM(require("react-native-svg"));
 
 // src/components/draw/strokes.ts
@@ -2301,7 +2438,7 @@ function pointsToSmoothPath(points) {
 }
 
 // src/components/draw/DrawSurface.tsx
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_jsx_runtime11 = require("react/jsx-runtime");
 function DrawSurface({
   color,
   strokeWidth,
@@ -2310,25 +2447,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) {
@@ -2341,7 +2478,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 });
@@ -2349,8 +2486,8 @@ function DrawSurface({
     currentPointsRef.current = [];
     triggerRender();
   }, [color, onAddStroke, strokeWidth, triggerRender]);
-  const panResponder = React12.useMemo(
-    () => import_react_native11.PanResponder.create({
+  const panResponder = React14.useMemo(
+    () => import_react_native13.PanResponder.create({
       onStartShouldSetPanResponder: () => true,
       onMoveShouldSetPanResponder: () => true,
       onPanResponderGrant: onStart,
@@ -2362,11 +2499,11 @@ function DrawSurface({
   );
   const currentPath = pointsToSmoothPath(currentPointsRef.current);
   void renderTick;
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native11.View, { style: [import_react_native11.StyleSheet.absoluteFill, styles2.container, style], ...panResponder.panHandlers, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_react_native_svg.default, { style: import_react_native11.StyleSheet.absoluteFill, width: "100%", height: "100%", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_native13.View, { style: [import_react_native13.StyleSheet.absoluteFill, styles2.container, style], ...panResponder.panHandlers, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_react_native_svg.default, { style: import_react_native13.StyleSheet.absoluteFill, width: "100%", height: "100%", children: [
     strokes.map((s, idx) => {
       const d = pointsToSmoothPath(s.points);
       if (!d) return null;
-      return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
         import_react_native_svg.Path,
         {
           d,
@@ -2379,7 +2516,7 @@ function DrawSurface({
         idx
       );
     }),
-    currentPath ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    currentPath ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
       import_react_native_svg.Path,
       {
         d: currentPath,
@@ -2392,15 +2529,15 @@ function DrawSurface({
     ) : null
   ] }) });
 }
-var styles2 = import_react_native11.StyleSheet.create({
+var styles2 = import_react_native13.StyleSheet.create({
   container: {
     zIndex: 5
   }
 });
 
 // src/components/draw/DrawToolbar.tsx
-var React13 = __toESM(require("react"));
-var import_react_native13 = require("react-native");
+var React15 = __toESM(require("react"));
+var import_react_native15 = require("react-native");
 var import_react_native_safe_area_context2 = require("react-native-safe-area-context");
 var import_lucide_react_native = require("lucide-react-native");
 
@@ -2419,8 +2556,8 @@ async function impact(style) {
 }
 
 // src/components/draw/DrawColorPicker.tsx
-var import_react_native12 = require("react-native");
-var import_jsx_runtime10 = require("react/jsx-runtime");
+var import_react_native14 = require("react-native");
+var import_jsx_runtime12 = require("react/jsx-runtime");
 function DrawColorPicker({
   colors,
   selected,
@@ -2454,10 +2591,10 @@ function DrawColorPicker({
     return { ...base, ...selectedStyle, ...whiteStyle };
   };
   if (!expanded) {
-    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native12.Pressable, { onPress: onToggle, style: [swatchStyle(selected, true), style] });
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react_native14.Pressable, { onPress: onToggle, style: [swatchStyle(selected, true), style] });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native12.View, { style: [{ flexDirection: "row", alignItems: "center", gap: 8 }, style], children: colors.map((c, idx) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-    import_react_native12.Pressable,
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react_native14.View, { style: [{ flexDirection: "row", alignItems: "center", gap: 8 }, style], children: colors.map((c, idx) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    import_react_native14.Pressable,
     {
       onPress: () => {
         onSelect(c);
@@ -2470,7 +2607,7 @@ function DrawColorPicker({
 }
 
 // src/components/draw/DrawToolbar.tsx
-var import_jsx_runtime11 = require("react/jsx-runtime");
+var import_jsx_runtime13 = require("react/jsx-runtime");
 function DrawToolbar({
   colors,
   selectedColor,
@@ -2488,14 +2625,14 @@ function DrawToolbar({
   style
 }) {
   const insets = (0, import_react_native_safe_area_context2.useSafeAreaInsets)();
-  const { width: screenWidth, height: screenHeight } = (0, import_react_native13.useWindowDimensions)();
-  const [expanded, setExpanded] = React13.useState(false);
-  const pos = React13.useRef(new import_react_native13.Animated.ValueXY({ x: screenWidth / 2 - 110, y: -140 })).current;
-  const start = React13.useRef({ x: 0, y: 0 });
-  const currentPos = React13.useRef({ x: 0, y: 0 });
-  React13.useEffect(() => {
+  const { width: screenWidth, height: screenHeight } = (0, import_react_native15.useWindowDimensions)();
+  const [expanded, setExpanded] = React15.useState(false);
+  const pos = React15.useRef(new import_react_native15.Animated.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;
-    import_react_native13.Animated.spring(pos.y, {
+    import_react_native15.Animated.spring(pos.y, {
       toValue: insets.top + 60,
       useNativeDriver: true,
       damping: 12,
@@ -2503,7 +2640,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 };
     });
@@ -2511,7 +2648,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);
@@ -2521,8 +2658,8 @@ function DrawToolbar({
     },
     [insets.top, screenHeight, screenWidth]
   );
-  const panResponder = React13.useMemo(
-    () => import_react_native13.PanResponder.create({
+  const panResponder = React15.useMemo(
+    () => import_react_native15.PanResponder.create({
       onStartShouldSetPanResponder: () => false,
       onMoveShouldSetPanResponder: (_e, g) => Math.abs(g.dx) > 5 || Math.abs(g.dy) > 5,
       onPanResponderGrant: () => {
@@ -2534,7 +2671,7 @@ function DrawToolbar({
       },
       onPanResponderRelease: () => {
         const next = clamp2(currentPos.current.x, currentPos.current.y);
-        import_react_native13.Animated.spring(pos, { toValue: next, useNativeDriver: true }).start();
+        import_react_native15.Animated.spring(pos, { toValue: next, useNativeDriver: true }).start();
       }
     }),
     [clamp2, pos]
@@ -2549,9 +2686,9 @@ function DrawToolbar({
     children
   }) {
     const isDisabled = Boolean(disabled) || Boolean(capturingDisabled);
-    const [pressed, setPressed] = React13.useState(false);
-    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-      import_react_native13.View,
+    const [pressed, setPressed] = React15.useState(false);
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+      import_react_native15.View,
       {
         style: {
           width: 28,
@@ -2562,8 +2699,8 @@ function DrawToolbar({
           backgroundColor,
           opacity: isDisabled ? 0.5 : pressed ? 0.85 : 1
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-          import_react_native13.Pressable,
+        children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+          import_react_native15.Pressable,
           {
             accessibilityRole: "button",
             accessibilityLabel,
@@ -2579,8 +2716,8 @@ function DrawToolbar({
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-    import_react_native13.Animated.View,
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    import_react_native15.Animated.View,
     {
       style: [
         {
@@ -2596,8 +2733,8 @@ function DrawToolbar({
         style
       ],
       ...panResponder.panHandlers,
-      children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-        import_react_native13.View,
+      children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        import_react_native15.View,
         {
           style: {
             backgroundColor: "#F43F5E",
@@ -2605,9 +2742,9 @@ function DrawToolbar({
             padding: 12,
             minWidth: 220
           },
-          children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_react_native13.View, { style: { flexDirection: "row", alignItems: "center", gap: 8 }, children: [
-            renderDragHandle ? renderDragHandle() : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_lucide_react_native.GripVertical, { size: 20, color: "rgba(255, 255, 255, 0.6)" }),
-            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_react_native15.View, { style: { flexDirection: "row", alignItems: "center", gap: 8 }, children: [
+            renderDragHandle ? renderDragHandle() : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react_native.GripVertical, { size: 20, color: "rgba(255, 255, 255, 0.6)" }),
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
               DrawColorPicker,
               {
                 colors,
@@ -2623,8 +2760,8 @@ function DrawToolbar({
                 }
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_native13.View, { style: { width: 1, height: 20, backgroundColor: "rgba(255, 255, 255, 0.3)", marginHorizontal: 4 } }),
-            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_native15.View, { style: { width: 1, height: 20, backgroundColor: "rgba(255, 255, 255, 0.3)", marginHorizontal: 4 } }),
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
               CircleActionButton,
               {
                 accessibilityLabel: "Undo",
@@ -2635,10 +2772,10 @@ function DrawToolbar({
                   void impact("light");
                   onUndo();
                 },
-                children: renderUndoIcon ? renderUndoIcon() : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_lucide_react_native.Undo2, { size: 16, color: canUndo ? "#FFFFFF" : "rgba(255,255,255,0.4)" })
+                children: renderUndoIcon ? renderUndoIcon() : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react_native.Undo2, { size: 16, color: canUndo ? "#FFFFFF" : "rgba(255,255,255,0.4)" })
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
               CircleActionButton,
               {
                 accessibilityLabel: "Cancel",
@@ -2648,10 +2785,10 @@ function DrawToolbar({
                   void impact("medium");
                   onCancel();
                 },
-                children: renderCancelIcon ? renderCancelIcon() : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_lucide_react_native.X, { size: 16, color: "#FFFFFF" })
+                children: renderCancelIcon ? renderCancelIcon() : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react_native.X, { size: 16, color: "#FFFFFF" })
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
               CircleActionButton,
               {
                 accessibilityLabel: "Done",
@@ -2661,7 +2798,7 @@ function DrawToolbar({
                   void impact("medium");
                   onDone();
                 },
-                children: capturing ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_native13.ActivityIndicator, { color: "#FFFFFF", size: "small" }) : renderDoneIcon ? renderDoneIcon() : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_lucide_react_native.Check, { size: 16, color: "#FFFFFF" })
+                children: capturing ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_native15.ActivityIndicator, { color: "#FFFFFF", size: "small" }) : renderDoneIcon ? renderDoneIcon() : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react_native.Check, { size: 16, color: "#FFFFFF" })
               }
             )
           ] })
@@ -2672,7 +2809,7 @@ function DrawToolbar({
 }
 
 // src/components/draw/DrawModeOverlay.tsx
-var import_jsx_runtime12 = require("react/jsx-runtime");
+var import_jsx_runtime14 = require("react/jsx-runtime");
 function DrawModeOverlay({
   visible,
   captureTargetRef,
@@ -2687,7 +2824,7 @@ function DrawModeOverlay({
   renderDragHandle
 }) {
   const theme = useTheme();
-  const defaultPalette = React14.useMemo(
+  const defaultPalette = React16.useMemo(
     () => [
       "#EF4444",
       // Red
@@ -2705,11 +2842,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");
@@ -2717,14 +2854,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);
@@ -2746,9 +2883,9 @@ function DrawModeOverlay({
     }
   }, [captureTargetRef, capturing, onCapture]);
   if (!visible) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_react_native14.View, { style: [import_react_native14.StyleSheet.absoluteFill, styles3.root, style], pointerEvents: "box-none", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(EdgeGlowFrame, { visible: !hideUi, role: "danger", thickness: 50, intensity: 1 }),
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_react_native16.View, { style: [import_react_native16.StyleSheet.absoluteFill, styles3.root, style], pointerEvents: "box-none", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(EdgeGlowFrame, { visible: !hideUi, role: "danger", thickness: 50, intensity: 1 }),
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
       DrawSurface,
       {
         color: selectedColor,
@@ -2757,7 +2894,7 @@ function DrawModeOverlay({
         onAddStroke: (stroke) => setStrokes((prev) => [...prev, stroke])
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
       DrawToolbar,
       {
         hidden: hideUi,
@@ -2777,32 +2914,32 @@ function DrawModeOverlay({
     )
   ] });
 }
-var styles3 = import_react_native14.StyleSheet.create({
+var styles3 = import_react_native16.StyleSheet.create({
   root: {
     zIndex: 9999
   }
 });
 
 // src/components/comments/AppCommentsSheet.tsx
-var React21 = __toESM(require("react"));
-var import_react_native20 = require("react-native");
+var React23 = __toESM(require("react"));
+var import_react_native22 = require("react-native");
 var import_bottom_sheet3 = require("@gorhom/bottom-sheet");
 var import_react_native_safe_area_context3 = require("react-native-safe-area-context");
-var import_liquid_glass4 = require("@callstack/liquid-glass");
+var import_liquid_glass5 = require("@callstack/liquid-glass");
 var import_lucide_react_native4 = require("lucide-react-native");
 
 // src/components/chat/ChatComposer.tsx
-var React16 = __toESM(require("react"));
-var import_react_native16 = require("react-native");
-var import_liquid_glass3 = require("@callstack/liquid-glass");
+var React18 = __toESM(require("react"));
+var import_react_native18 = require("react-native");
+var import_liquid_glass4 = require("@callstack/liquid-glass");
 var import_lucide_react_native3 = require("lucide-react-native");
 
 // src/components/chat/MultilineTextInput.tsx
-var React15 = __toESM(require("react"));
-var import_react_native15 = require("react-native");
+var React17 = __toESM(require("react"));
+var import_react_native17 = require("react-native");
 var import_bottom_sheet2 = require("@gorhom/bottom-sheet");
-var import_jsx_runtime13 = require("react/jsx-runtime");
-var MultilineTextInput = React15.forwardRef(function MultilineTextInput2({ useBottomSheetTextInput = false, placeholder, placeholderTextColor, style, ...props }, ref) {
+var import_jsx_runtime15 = require("react/jsx-runtime");
+var MultilineTextInput = React17.forwardRef(function MultilineTextInput2({ useBottomSheetTextInput = false, placeholder, placeholderTextColor, style, ...props }, ref) {
   const theme = useTheme();
   const baseStyle = {
     minHeight: 44,
@@ -2822,12 +2959,12 @@ var MultilineTextInput = React15.forwardRef(function MultilineTextInput2({ useBo
     style: [baseStyle, style],
     textAlignVertical: "top"
   };
-  return useBottomSheetTextInput ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_bottom_sheet2.BottomSheetTextInput, { ref, ...commonProps }) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_native15.TextInput, { ref, ...commonProps });
+  return useBottomSheetTextInput ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_bottom_sheet2.BottomSheetTextInput, { ref, ...commonProps }) : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react_native17.TextInput, { ref, ...commonProps });
 });
 
 // src/components/icons/StudioIcons.tsx
 var import_lucide_react_native2 = require("lucide-react-native");
-var import_jsx_runtime14 = require("react/jsx-runtime");
+var import_jsx_runtime16 = require("react/jsx-runtime");
 function useResolvedIconColor(token) {
   const theme = useTheme();
   switch (token) {
@@ -2851,7 +2988,7 @@ function useResolvedIconColor(token) {
 function makeIcon(Comp) {
   return function StudioIcon({ size = 20, strokeWidth = 2, colorToken = "floatingContent", ...rest }) {
     const color = useResolvedIconColor(colorToken);
-    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Comp, { size, strokeWidth, color, ...rest });
+    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Comp, { size, strokeWidth, color, ...rest });
   };
 }
 var IconHome = makeIcon(import_lucide_react_native2.Home);
@@ -2867,17 +3004,17 @@ var IconArrowDown = makeIcon(import_lucide_react_native2.ArrowDown);
 var IconApprove = makeIcon(import_lucide_react_native2.Check);
 
 // src/components/chat/ChatComposer.tsx
-var import_jsx_runtime15 = require("react/jsx-runtime");
+var import_jsx_runtime17 = require("react/jsx-runtime");
 var THUMBNAIL_HEIGHT = 90;
 function AspectRatioThumbnail({
   uri,
   onRemove,
   renderRemoveIcon
 }) {
-  const [aspectRatio, setAspectRatio] = React16.useState(1);
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_react_native16.View, { style: { height: THUMBNAIL_HEIGHT, aspectRatio, position: "relative" }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react_native16.View, { style: { flex: 1, borderRadius: 8, overflow: "hidden" }, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-      import_react_native16.Image,
+  const [aspectRatio, setAspectRatio] = React18.useState(1);
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_react_native18.View, { style: { height: THUMBNAIL_HEIGHT, aspectRatio, position: "relative" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react_native18.View, { style: { flex: 1, borderRadius: 8, overflow: "hidden" }, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+      import_react_native18.Image,
       {
         source: { uri },
         style: { width: "100%", height: "100%" },
@@ -2889,8 +3026,8 @@ function AspectRatioThumbnail({
         }
       }
     ) }),
-    onRemove ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-      import_react_native16.Pressable,
+    onRemove ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+      import_react_native18.Pressable,
       {
         style: {
           position: "absolute",
@@ -2906,7 +3043,7 @@ function AspectRatioThumbnail({
         },
         onPress: onRemove,
         hitSlop: 10,
-        children: renderRemoveIcon ? renderRemoveIcon() : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(IconClose, { size: 12, colorToken: "onPrimary" })
+        children: renderRemoveIcon ? renderRemoveIcon() : /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(IconClose, { size: 12, colorToken: "onPrimary" })
       }
     ) : null
   ] });
@@ -2931,19 +3068,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(() => import_react_native16.Dimensions.get("window").height * 0.5, []);
-  const shakeAnim = React16.useRef(new import_react_native16.Animated.Value(0)).current;
-  const [sendPressed, setSendPressed] = React16.useState(false);
-  const inputRef = React16.useRef(null);
-  const prevAutoFocusRef = React16.useRef(false);
-  React16.useEffect(() => {
+  const maxInputHeight = React18.useMemo(() => import_react_native18.Dimensions.get("window").height * 0.5, []);
+  const shakeAnim = React18.useRef(new import_react_native18.Animated.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;
@@ -2953,17 +3090,17 @@ function ChatComposer({
     }, 75);
     return () => clearTimeout(t);
   }, [autoFocus, disabled, sending]);
-  const triggerShake = React16.useCallback(() => {
+  const triggerShake = React18.useCallback(() => {
     shakeAnim.setValue(0);
-    import_react_native16.Animated.sequence([
-      import_react_native16.Animated.timing(shakeAnim, { toValue: 10, duration: 50, useNativeDriver: true }),
-      import_react_native16.Animated.timing(shakeAnim, { toValue: -10, duration: 50, useNativeDriver: true }),
-      import_react_native16.Animated.timing(shakeAnim, { toValue: 10, duration: 50, useNativeDriver: true }),
-      import_react_native16.Animated.timing(shakeAnim, { toValue: -10, duration: 50, useNativeDriver: true }),
-      import_react_native16.Animated.timing(shakeAnim, { toValue: 0, duration: 50, useNativeDriver: true })
+    import_react_native18.Animated.sequence([
+      import_react_native18.Animated.timing(shakeAnim, { toValue: 10, duration: 50, useNativeDriver: true }),
+      import_react_native18.Animated.timing(shakeAnim, { toValue: -10, duration: 50, useNativeDriver: true }),
+      import_react_native18.Animated.timing(shakeAnim, { toValue: 10, duration: 50, useNativeDriver: true }),
+      import_react_native18.Animated.timing(shakeAnim, { toValue: -10, duration: 50, useNativeDriver: true }),
+      import_react_native18.Animated.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();
@@ -2975,33 +3112,34 @@ 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__ */ (0, import_jsx_runtime15.jsx)(
-    import_react_native16.View,
+  const sendBg = withAlpha(theme.colors.primary, isButtonDisabled ? 0.6 : sendPressed ? 0.9 : 1);
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+    import_react_native18.View,
     {
       style: [{ paddingHorizontal: 16, paddingBottom: 12, paddingTop: 8 }, style],
       onLayout: (e) => onLayout == null ? void 0 : onLayout({ height: e.nativeEvent.layout.height }),
-      children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_react_native16.View, { style: { flexDirection: "row", alignItems: "flex-end", gap: 8 }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react_native16.Animated.View, { style: { flex: 1, transform: [{ translateX: shakeAnim }] }, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
-          import_liquid_glass3.LiquidGlassView,
+      children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_react_native18.View, { style: { flexDirection: "row", alignItems: "flex-end", gap: 8 }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react_native18.Animated.View, { style: { flex: 1, transform: [{ translateX: shakeAnim }] }, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+          ResettableLiquidGlassView,
           {
             style: [
               // LiquidGlassView doesn't reliably auto-size to children; ensure enough height for the
               // thumbnail strip when attachments are present.
               { borderRadius: 24, flex: 1, minHeight: composerMinHeight },
-              !import_liquid_glass3.isLiquidGlassSupported && { backgroundColor: textareaBgColor }
+              !import_liquid_glass4.isLiquidGlassSupported && { backgroundColor: textareaBgColor }
             ],
             interactive: true,
             effect: "clear",
             children: [
-              hasAttachments ? /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
-                import_react_native16.ScrollView,
+              hasAttachments ? /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+                import_react_native18.ScrollView,
                 {
                   horizontal: true,
                   showsHorizontalScrollIndicator: false,
                   keyboardShouldPersistTaps: "handled",
                   contentContainerStyle: { gap: 8, paddingHorizontal: 12, paddingTop: 12 },
                   children: [
-                    attachments.map((uri, index) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+                    attachments.map((uri, index) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
                       AspectRatioThumbnail,
                       {
                         uri,
@@ -3010,8 +3148,8 @@ function ChatComposer({
                       },
                       `attachment-${index}`
                     )),
-                    onAddAttachment ? renderAddAttachment ? renderAddAttachment() : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-                      import_react_native16.Pressable,
+                    onAddAttachment ? renderAddAttachment ? renderAddAttachment() : /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+                      import_react_native18.Pressable,
                       {
                         style: {
                           height: THUMBNAIL_HEIGHT,
@@ -3025,13 +3163,13 @@ function ChatComposer({
                           backgroundColor: "rgba(255, 255, 255, 0.05)"
                         },
                         onPress: onAddAttachment,
-                        children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_lucide_react_native3.Plus, { size: 24, color: "rgba(255, 255, 255, 0.5)" })
+                        children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_lucide_react_native3.Plus, { size: 24, color: "rgba(255, 255, 255, 0.5)" })
                       }
                     ) : null
                   ]
                 }
               ) : null,
-              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
                 MultilineTextInput,
                 {
                   ref: inputRef,
@@ -3056,25 +3194,24 @@ function ChatComposer({
             ]
           }
         ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-          import_liquid_glass3.LiquidGlassView,
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+          ResettableLiquidGlassView,
           {
-            style: [{ borderRadius: 100 }, !import_liquid_glass3.isLiquidGlassSupported && { backgroundColor: textareaBgColor }],
+            style: [{ borderRadius: 100 }, !import_liquid_glass4.isLiquidGlassSupported && { backgroundColor: textareaBgColor }],
             interactive: true,
             effect: "clear",
-            children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-              import_react_native16.View,
+            children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+              import_react_native18.View,
               {
                 style: {
                   width: 44,
                   height: 44,
                   borderRadius: 22,
                   overflow: "hidden",
-                  backgroundColor: theme.colors.primary,
-                  opacity: isButtonDisabled ? 0.6 : sendPressed ? 0.9 : 1
+                  backgroundColor: sendBg
                 },
-                children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-                  import_react_native16.Pressable,
+                children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+                  import_react_native18.Pressable,
                   {
                     accessibilityRole: "button",
                     accessibilityLabel: "Send",
@@ -3083,7 +3220,7 @@ function ChatComposer({
                     onPressIn: () => setSendPressed(true),
                     onPressOut: () => setSendPressed(false),
                     style: { flex: 1, alignItems: "center", justifyContent: "center" },
-                    children: sending ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react_native16.ActivityIndicator, {}) : renderSendIcon ? renderSendIcon() : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(IconChevronRight, { size: 20, colorToken: "onPrimary" })
+                    children: sending ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react_native18.ActivityIndicator, {}) : renderSendIcon ? renderSendIcon() : /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(IconChevronRight, { size: 20, colorToken: "onPrimary" })
                   }
                 )
               }
@@ -3096,12 +3233,12 @@ function ChatComposer({
 }
 
 // src/components/comments/CommentRow.tsx
-var React17 = __toESM(require("react"));
-var import_react_native18 = require("react-native");
+var React19 = __toESM(require("react"));
+var import_react_native20 = require("react-native");
 
 // src/components/primitives/Avatar.tsx
-var import_react_native17 = require("react-native");
-var import_jsx_runtime16 = require("react/jsx-runtime");
+var import_react_native19 = require("react-native");
+var import_jsx_runtime18 = require("react/jsx-runtime");
 function initialsFrom(name) {
   var _a, _b;
   const trimmed = (name ?? "").trim();
@@ -3119,8 +3256,8 @@ function Avatar({
   const theme = useTheme();
   const radius = size / 2;
   const fallbackBg = fallbackBackgroundColor ?? theme.colors.neutral;
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-    import_react_native17.View,
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+    import_react_native19.View,
     {
       style: [
         {
@@ -3134,14 +3271,14 @@ function Avatar({
         },
         style
       ],
-      children: uri ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-        import_react_native17.Image,
+      children: uri ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+        import_react_native19.Image,
         {
           source: { uri },
           style: [{ width: size, height: size }, imageStyle],
           resizeMode: "cover"
         }
-      ) : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Text, { variant: "caption", style: { color: theme.colors.onNeutral }, children: initialsFrom(name) })
+      ) : /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Text, { variant: "caption", style: { color: theme.colors.onNeutral }, children: initialsFrom(name) })
     }
   );
 }
@@ -3165,12 +3302,12 @@ function formatTimeAgo(iso) {
 }
 
 // src/components/comments/CommentRow.tsx
-var import_jsx_runtime17 = require("react/jsx-runtime");
+var import_jsx_runtime19 = require("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 {
@@ -3185,8 +3322,8 @@ function CommentRow({ comment, showDivider }) {
       cancelled = true;
     };
   }, [comment.authorId]);
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
-    import_react_native18.View,
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+    import_react_native20.View,
     {
       style: {
         flexDirection: "row",
@@ -3196,13 +3333,13 @@ function CommentRow({ comment, showDivider }) {
         borderBottomColor: withAlpha(theme.colors.border, 0.5)
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Avatar, { size: 32, uri: authorAvatar, name: authorName ?? comment.authorId, style: { marginTop: 6 } }),
-        /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_react_native18.View, { style: { flex: 1, minWidth: 0, gap: 4 }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_react_native18.View, { style: { flexDirection: "row", alignItems: "center", gap: theme.spacing.sm }, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Text, { style: { fontSize: 14, lineHeight: 18, fontWeight: theme.typography.fontWeight.bold, color: theme.colors.text }, children: authorName ?? "Unknown User" }),
-            /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Text, { style: { fontSize: 12, lineHeight: 16, color: theme.colors.textMuted }, children: formatTimeAgo(comment.createdAt) })
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Avatar, { size: 32, uri: authorAvatar, name: authorName ?? comment.authorId, style: { marginTop: 6 } }),
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_react_native20.View, { style: { flex: 1, minWidth: 0, gap: 4 }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_react_native20.View, { style: { flexDirection: "row", alignItems: "center", gap: theme.spacing.sm }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Text, { style: { fontSize: 14, lineHeight: 18, fontWeight: theme.typography.fontWeight.bold, color: theme.colors.text }, children: authorName ?? "Unknown User" }),
+            /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Text, { style: { fontSize: 12, lineHeight: 16, color: theme.colors.textMuted }, children: formatTimeAgo(comment.createdAt) })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Text, { style: { fontSize: 14, lineHeight: 20, color: theme.colors.text }, children: comment.body ?? comment.description ?? "" })
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Text, { style: { fontSize: 14, lineHeight: 20, color: theme.colors.text }, children: comment.body ?? comment.description ?? "" })
         ] })
       ]
     }
@@ -3210,7 +3347,7 @@ function CommentRow({ comment, showDivider }) {
 }
 
 // src/components/comments/useAppComments.ts
-var React18 = __toESM(require("react"));
+var React20 = __toESM(require("react"));
 
 // src/data/comments/remote.ts
 var AppCommentsRemoteDataSourceImpl = class extends BaseRemote {
@@ -3282,18 +3419,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;
@@ -3310,10 +3447,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();
@@ -3336,11 +3473,11 @@ function useAppComments(appId) {
 }
 
 // src/components/comments/useAppDetails.ts
-var React19 = __toESM(require("react"));
+var React21 = __toESM(require("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;
@@ -3365,14 +3502,14 @@ function useAppDetails(appId) {
 }
 
 // src/components/comments/useIosKeyboardSnapFix.ts
-var React20 = __toESM(require("react"));
-var import_react_native19 = require("react-native");
+var React22 = __toESM(require("react"));
+var import_react_native21 = require("react-native");
 function useIosKeyboardSnapFix(sheetRef, options) {
-  const [keyboardVisible, setKeyboardVisible] = React20.useState(false);
-  React20.useEffect(() => {
-    if (import_react_native19.Platform.OS !== "ios") return;
-    const show = import_react_native19.Keyboard.addListener("keyboardWillShow", () => setKeyboardVisible(true));
-    const hide = import_react_native19.Keyboard.addListener("keyboardWillHide", () => {
+  const [keyboardVisible, setKeyboardVisible] = React22.useState(false);
+  React22.useEffect(() => {
+    if (import_react_native21.Platform.OS !== "ios") return;
+    const show = import_react_native21.Keyboard.addListener("keyboardWillShow", () => setKeyboardVisible(true));
+    const hide = import_react_native21.Keyboard.addListener("keyboardWillHide", () => {
       var _a;
       setKeyboardVisible(false);
       const target = (options == null ? void 0 : options.targetIndex) ?? 1;
@@ -3393,20 +3530,20 @@ function useIosKeyboardSnapFix(sheetRef, options) {
 }
 
 // src/components/comments/AppCommentsSheet.tsx
-var import_jsx_runtime18 = require("react/jsx-runtime");
+var import_jsx_runtime20 = require("react/jsx-runtime");
 function AppCommentsSheet({ appId, onClose, onCountChange, onPlayApp }) {
   const theme = useTheme();
   const insets = (0, import_react_native_safe_area_context3.useSafeAreaInsets)();
-  const sheetRef = 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();
@@ -3415,29 +3552,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__ */ (0, import_jsx_runtime18.jsx)(import_bottom_sheet3.BottomSheetBackdrop, { ...props, disappearsOnIndex: -1, appearsOnIndex: 0, opacity: 0.5 }),
+  const renderBackdrop = React23.useCallback(
+    (props) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_bottom_sheet3.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__ */ (0, import_jsx_runtime18.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
     import_bottom_sheet3.BottomSheetModal,
     {
       ref: sheetRef,
@@ -3448,17 +3585,17 @@ function AppCommentsSheet({ appId, onClose, onCountChange, onPlayApp }) {
       onChange: handleChange,
       backgroundStyle: {
         backgroundColor: theme.scheme === "dark" ? "#0B080F" : "#FFFFFF",
-        borderTopLeftRadius: import_react_native20.Platform.OS === "ios" ? 39 : 16,
-        borderTopRightRadius: import_react_native20.Platform.OS === "ios" ? 39 : 16
+        borderTopLeftRadius: import_react_native22.Platform.OS === "ios" ? 39 : 16,
+        borderTopRightRadius: import_react_native22.Platform.OS === "ios" ? 39 : 16
       },
       handleIndicatorStyle: { backgroundColor: theme.colors.handleIndicator },
       keyboardBehavior: "interactive",
       keyboardBlurBehavior: "restore",
       android_keyboardInputMode: "adjustResize",
       topInset: insets.top,
-      children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_react_native20.View, { style: { flex: 1 }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
-          import_react_native20.View,
+      children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react_native22.View, { style: { flex: 1 }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+          import_react_native22.View,
           {
             style: {
               flexDirection: "row",
@@ -3470,7 +3607,7 @@ function AppCommentsSheet({ appId, onClose, onCountChange, onPlayApp }) {
               borderBottomColor: withAlpha(theme.colors.border, 0.1)
             },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
                 Text,
                 {
                   numberOfLines: 1,
@@ -3484,29 +3621,28 @@ function AppCommentsSheet({ appId, onClose, onCountChange, onPlayApp }) {
                   children: loadingApp ? "Loading..." : (app == null ? void 0 : app.name) || "Comments"
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
-                import_liquid_glass4.LiquidGlassView,
+              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+                ResettableLiquidGlassView,
                 {
                   style: [
                     { borderRadius: 24 },
-                    !import_liquid_glass4.isLiquidGlassSupported && { backgroundColor: theme.scheme === "dark" ? "#18181B" : "#F6F6F6" }
+                    !import_liquid_glass5.isLiquidGlassSupported && { backgroundColor: theme.scheme === "dark" ? "#18181B" : "#F6F6F6" }
                   ],
                   interactive: true,
                   effect: "clear",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
-                    import_react_native20.View,
+                  children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+                    import_react_native22.View,
                     {
                       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__ */ (0, import_jsx_runtime18.jsx)(
-                        import_react_native20.Pressable,
+                      children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+                        import_react_native22.Pressable,
                         {
                           disabled: !appId,
                           onPress: () => void handlePlay(),
@@ -3518,9 +3654,9 @@ function AppCommentsSheet({ appId, onClose, onCountChange, onPlayApp }) {
                               alignItems: "center",
                               justifyContent: "center"
                             },
-                            pressed ? { opacity: 0.85 } : null
+                            pressed ? { transform: [{ scale: 0.96 }] } : null
                           ],
-                          children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_lucide_react_native4.Play, { size: 16, color: theme.colors.onPrimary })
+                          children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react_native4.Play, { size: 16, color: theme.colors.onPrimary })
                         }
                       )
                     }
@@ -3530,7 +3666,7 @@ function AppCommentsSheet({ appId, onClose, onCountChange, onPlayApp }) {
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
           import_bottom_sheet3.BottomSheetScrollView,
           {
             style: { flex: 1 },
@@ -3541,13 +3677,13 @@ function AppCommentsSheet({ appId, onClose, onCountChange, onPlayApp }) {
             },
             keyboardShouldPersistTaps: "handled",
             children: [
-              loading && comments.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_native20.View, { style: { flex: 1, alignItems: "center", justifyContent: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_native20.ActivityIndicator, {}) }) : comments.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_native20.View, { style: { flex: 1, alignItems: "center", justifyContent: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Text, { variant: "bodyMuted", style: { textAlign: "center" }, children: "No comments yet" }) }) : comments.map((c, idx) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(CommentRow, { comment: c, showDivider: idx < comments.length - 1 }, c.id)),
-              error ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Text, { variant: "captionMuted", style: { marginTop: theme.spacing.lg }, children: "Failed to load comments." }) : null
+              loading && comments.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react_native22.View, { style: { flex: 1, alignItems: "center", justifyContent: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react_native22.ActivityIndicator, {}) }) : comments.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react_native22.View, { style: { flex: 1, alignItems: "center", justifyContent: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Text, { variant: "bodyMuted", style: { textAlign: "center" }, children: "No comments yet" }) }) : comments.map((c, idx) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(CommentRow, { comment: c, showDivider: idx < comments.length - 1 }, c.id)),
+              error ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Text, { variant: "captionMuted", style: { marginTop: theme.spacing.lg }, children: "Failed to load comments." }) : null
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
-          import_react_native20.View,
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+          import_react_native22.View,
           {
             style: {
               position: "absolute",
@@ -3556,12 +3692,12 @@ function AppCommentsSheet({ appId, onClose, onCountChange, onPlayApp }) {
               bottom: 0,
               paddingHorizontal: theme.spacing.lg,
               paddingTop: theme.spacing.sm,
-              paddingBottom: import_react_native20.Platform.OS === "ios" ? keyboardVisible ? theme.spacing.lg : insets.bottom : insets.bottom + 10,
+              paddingBottom: import_react_native22.Platform.OS === "ios" ? keyboardVisible ? theme.spacing.lg : insets.bottom : insets.bottom + 10,
               borderTopWidth: 1,
               borderTopColor: withAlpha(theme.colors.border, 0.1),
               backgroundColor: withAlpha(theme.colors.background, 0.8)
             },
-            children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
               ChatComposer,
               {
                 placeholder: "Write a comment...",
@@ -3570,7 +3706,7 @@ function AppCommentsSheet({ appId, onClose, onCountChange, onPlayApp }) {
                 useBottomSheetTextInput: true,
                 onSend: async (text) => {
                   await create(text);
-                  import_react_native20.Keyboard.dismiss();
+                  import_react_native22.Keyboard.dismiss();
                 }
               }
             )
@@ -3582,17 +3718,17 @@ function AppCommentsSheet({ appId, onClose, onCountChange, onPlayApp }) {
 }
 
 // src/studio/ui/PreviewPanel.tsx
-var import_react_native41 = require("react-native");
+var import_react_native43 = require("react-native");
 
 // src/components/preview/PreviewPage.tsx
-var import_react_native21 = require("react-native");
+var import_react_native23 = require("react-native");
 var import_bottom_sheet4 = require("@gorhom/bottom-sheet");
-var import_jsx_runtime19 = require("react/jsx-runtime");
+var import_jsx_runtime21 = require("react/jsx-runtime");
 function PreviewPage({ header, children, contentStyle }) {
   const theme = useTheme();
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_react_native21.View, { style: { flex: 1 }, children: [
-    header ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react_native21.View, { children: header }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_react_native23.View, { style: { flex: 1 }, children: [
+    header ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_react_native23.View, { children: header }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
       import_bottom_sheet4.BottomSheetScrollView,
       {
         style: { flex: 1 },
@@ -3611,15 +3747,15 @@ function PreviewPage({ header, children, contentStyle }) {
 }
 
 // src/studio/ui/preview-panel/PreviewPanelHeader.tsx
-var import_react_native24 = require("react-native");
+var import_react_native26 = require("react-native");
 
 // src/components/studio-sheet/StudioSheetHeader.tsx
-var import_react_native22 = require("react-native");
-var import_jsx_runtime20 = require("react/jsx-runtime");
+var import_react_native24 = require("react-native");
+var import_jsx_runtime22 = require("react/jsx-runtime");
 function StudioSheetHeader({ left, center, right, style }) {
   const theme = useTheme();
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
-    import_react_native22.View,
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+    import_react_native24.View,
     {
       style: [
         {
@@ -3632,19 +3768,19 @@ function StudioSheetHeader({ left, center, right, style }) {
         style
       ],
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react_native22.View, { style: { flexDirection: "row", alignItems: "center" }, children: left }),
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react_native22.View, { style: { flex: 1, alignItems: "center" }, children: center }),
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react_native22.View, { style: { flexDirection: "row", alignItems: "center" }, children: right })
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react_native24.View, { style: { flexDirection: "row", alignItems: "center" }, children: left }),
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react_native24.View, { style: { flex: 1, alignItems: "center" }, children: center }),
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react_native24.View, { style: { flexDirection: "row", alignItems: "center" }, children: right })
       ]
     }
   );
 }
 
 // src/components/studio-sheet/StudioSheetHeaderIconButton.tsx
-var React22 = __toESM(require("react"));
-var import_react_native23 = require("react-native");
-var import_liquid_glass5 = require("@callstack/liquid-glass");
-var import_jsx_runtime21 = require("react/jsx-runtime");
+var React24 = __toESM(require("react"));
+var import_react_native25 = require("react-native");
+var import_liquid_glass6 = require("@callstack/liquid-glass");
+var import_jsx_runtime23 = require("react/jsx-runtime");
 function StudioSheetHeaderIconButton({
   onPress,
   disabled,
@@ -3656,19 +3792,20 @@ 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__ */ (0, import_jsx_runtime21.jsx)(import_react_native23.View, { style, children: appearance === "glass" ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-    import_liquid_glass5.LiquidGlassView,
+  const glassBg = withAlpha(glassInnerBg, resolvedOpacity);
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react_native25.View, { style, children: appearance === "glass" ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+    ResettableLiquidGlassView,
     {
-      style: [{ borderRadius: 100 }, !import_liquid_glass5.isLiquidGlassSupported && { backgroundColor: glassFallbackBg }],
+      style: [{ borderRadius: 100 }, !import_liquid_glass6.isLiquidGlassSupported && { backgroundColor: glassFallbackBg }],
       interactive: true,
       effect: "clear",
-      children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-        import_react_native23.View,
+      children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+        import_react_native25.View,
         {
           style: {
             width: size,
@@ -3676,11 +3813,10 @@ function StudioSheetHeaderIconButton({
             borderRadius: 100,
             alignItems: "center",
             justifyContent: "center",
-            backgroundColor: glassInnerBg,
-            opacity: resolvedOpacity
+            backgroundColor: glassBg
           },
-          children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-            import_react_native23.Pressable,
+          children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+            import_react_native25.Pressable,
             {
               accessibilityRole: "button",
               accessibilityLabel,
@@ -3698,8 +3834,8 @@ function StudioSheetHeaderIconButton({
         }
       )
     }
-  ) : /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-    import_react_native23.View,
+  ) : /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+    import_react_native25.View,
     {
       style: {
         width: size,
@@ -3710,8 +3846,8 @@ function StudioSheetHeaderIconButton({
         backgroundColor: solidBg,
         opacity: resolvedOpacity
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-        import_react_native23.Pressable,
+      children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+        import_react_native25.Pressable,
         {
           accessibilityRole: "button",
           accessibilityLabel,
@@ -3731,15 +3867,15 @@ function StudioSheetHeaderIconButton({
 }
 
 // src/studio/ui/preview-panel/PreviewPanelHeader.tsx
-var import_jsx_runtime22 = require("react/jsx-runtime");
+var import_jsx_runtime24 = require("react/jsx-runtime");
 function PreviewPanelHeader({ isOwner, onClose, onNavigateHome, onGoToChat }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
     StudioSheetHeader,
     {
-      left: onNavigateHome ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(StudioSheetHeaderIconButton, { onPress: onNavigateHome, accessibilityLabel: "Home", appearance: "glass", intent: "primary", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(IconHome, { size: 20, colorToken: "onPrimary" }) }) : null,
+      left: onNavigateHome ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(StudioSheetHeaderIconButton, { onPress: onNavigateHome, accessibilityLabel: "Home", appearance: "glass", intent: "primary", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(IconHome, { size: 20, colorToken: "onPrimary" }) }) : null,
       center: null,
-      right: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_react_native24.View, { style: { flexDirection: "row", alignItems: "center" }, children: [
-        isOwner ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+      right: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_react_native26.View, { style: { flexDirection: "row", alignItems: "center" }, children: [
+        isOwner ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
           StudioSheetHeaderIconButton,
           {
             onPress: onGoToChat,
@@ -3747,21 +3883,21 @@ function PreviewPanelHeader({ isOwner, onClose, onNavigateHome, onGoToChat }) {
             intent: "primary",
             appearance: "glass",
             style: { marginRight: 8 },
-            children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(IconChat, { size: 20, colorToken: "onPrimary" })
+            children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(IconChat, { size: 20, colorToken: "onPrimary" })
           }
         ) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(StudioSheetHeaderIconButton, { onPress: onClose, accessibilityLabel: "Close", appearance: "glass", intent: "primary", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(IconClose, { size: 20, colorToken: "onPrimary" }) })
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(StudioSheetHeaderIconButton, { onPress: onClose, accessibilityLabel: "Close", appearance: "glass", intent: "primary", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(IconClose, { size: 20, colorToken: "onPrimary" }) })
       ] })
     }
   );
 }
 
 // src/components/preview/PreviewHeroCard.tsx
-var import_react_native26 = require("react-native");
+var import_react_native28 = require("react-native");
 
 // src/components/primitives/Surface.tsx
-var import_react_native25 = require("react-native");
-var import_jsx_runtime23 = require("react/jsx-runtime");
+var import_react_native27 = require("react-native");
+var import_jsx_runtime25 = require("react/jsx-runtime");
 function backgroundFor(variant, theme) {
   const { colors } = theme;
   switch (variant) {
@@ -3778,8 +3914,8 @@ function backgroundFor(variant, theme) {
 }
 function Surface({ variant = "surface", border = false, style, ...props }) {
   const theme = useTheme();
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
-    import_react_native25.View,
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+    import_react_native27.View,
     {
       ...props,
       style: [
@@ -3792,12 +3928,12 @@ function Surface({ variant = "surface", border = false, style, ...props }) {
 }
 
 // src/components/primitives/Card.tsx
-var import_jsx_runtime24 = require("react/jsx-runtime");
+var import_jsx_runtime26 = require("react/jsx-runtime");
 function Card({ variant = "surface", padded = true, border = true, style, ...props }) {
   const theme = useTheme();
   const radius = theme.radii.lg;
   const padding = padded ? theme.spacing.lg : 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
     Surface,
     {
       ...props,
@@ -3809,7 +3945,7 @@ function Card({ variant = "surface", padded = true, border = true, style, ...pro
 }
 
 // src/components/preview/PreviewHeroCard.tsx
-var import_jsx_runtime25 = require("react/jsx-runtime");
+var import_jsx_runtime27 = require("react/jsx-runtime");
 function PreviewHeroCard({
   aspectRatio = 4 / 3,
   overlayTopLeft,
@@ -3820,7 +3956,7 @@ function PreviewHeroCard({
 }) {
   const theme = useTheme();
   const radius = 16;
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
     Card,
     {
       variant: "surfaceRaised",
@@ -3835,32 +3971,32 @@ function PreviewHeroCard({
         },
         style
       ],
-      children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_react_native26.View, { style: { flex: 1 }, children: [
-        background ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_react_native26.View, { style: { position: "absolute", inset: 0 }, children: background }) : null,
-        image ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_react_native26.View, { style: { position: "absolute", inset: 0 }, children: image }) : null,
-        overlayTopLeft ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_react_native26.View, { style: { position: "absolute", top: theme.spacing.sm, left: theme.spacing.sm, zIndex: 2 }, children: overlayTopLeft }) : null,
-        overlayBottom ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_react_native26.View, { style: { flex: 1, justifyContent: "flex-end" }, children: overlayBottom }) : null
+      children: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_react_native28.View, { style: { flex: 1 }, children: [
+        background ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_react_native28.View, { style: { position: "absolute", inset: 0 }, children: background }) : null,
+        image ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_react_native28.View, { style: { position: "absolute", inset: 0 }, children: image }) : null,
+        overlayTopLeft ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_react_native28.View, { style: { position: "absolute", top: theme.spacing.sm, left: theme.spacing.sm, zIndex: 2 }, children: overlayTopLeft }) : null,
+        overlayBottom ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_react_native28.View, { style: { flex: 1, justifyContent: "flex-end" }, children: overlayBottom }) : null
       ] })
     }
   );
 }
 
 // src/components/preview/PreviewPlaceholder.tsx
-var React23 = __toESM(require("react"));
-var import_react_native27 = require("react-native");
+var React25 = __toESM(require("react"));
+var import_react_native29 = require("react-native");
 var import_expo_linear_gradient2 = require("expo-linear-gradient");
-var import_jsx_runtime26 = require("react/jsx-runtime");
+var import_jsx_runtime28 = require("react/jsx-runtime");
 function PreviewPlaceholder({ visible, style }) {
   if (!visible) return null;
-  const opacityAnim = React23.useRef(new import_react_native27.Animated.Value(0)).current;
-  React23.useEffect(() => {
+  const opacityAnim = React25.useRef(new import_react_native29.Animated.Value(0)).current;
+  React25.useEffect(() => {
     if (!visible) return;
-    const animation = import_react_native27.Animated.loop(
-      import_react_native27.Animated.sequence([
-        import_react_native27.Animated.timing(opacityAnim, { toValue: 1, duration: 1500, useNativeDriver: true }),
-        import_react_native27.Animated.timing(opacityAnim, { toValue: 2, duration: 1500, useNativeDriver: true }),
-        import_react_native27.Animated.timing(opacityAnim, { toValue: 3, duration: 1500, useNativeDriver: true }),
-        import_react_native27.Animated.timing(opacityAnim, { toValue: 0, duration: 1500, useNativeDriver: true })
+    const animation = import_react_native29.Animated.loop(
+      import_react_native29.Animated.sequence([
+        import_react_native29.Animated.timing(opacityAnim, { toValue: 1, duration: 1500, useNativeDriver: true }),
+        import_react_native29.Animated.timing(opacityAnim, { toValue: 2, duration: 1500, useNativeDriver: true }),
+        import_react_native29.Animated.timing(opacityAnim, { toValue: 3, duration: 1500, useNativeDriver: true }),
+        import_react_native29.Animated.timing(opacityAnim, { toValue: 0, duration: 1500, useNativeDriver: true })
       ])
     );
     animation.start();
@@ -3870,8 +4006,8 @@ function PreviewPlaceholder({ visible, style }) {
   const opacity2 = opacityAnim.interpolate({ inputRange: [0, 1, 2, 3], outputRange: [0, 1, 0, 0] });
   const opacity3 = opacityAnim.interpolate({ inputRange: [0, 1, 2, 3], outputRange: [0, 0, 1, 0] });
   const opacity4 = opacityAnim.interpolate({ inputRange: [0, 1, 2, 3], outputRange: [0, 0, 0, 1] });
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_jsx_runtime26.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react_native27.Animated.View, { style: [{ position: "absolute", inset: 0, opacity: opacity1 }, style], children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_jsx_runtime28.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react_native29.Animated.View, { style: [{ position: "absolute", inset: 0, opacity: opacity1 }, style], children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
       import_expo_linear_gradient2.LinearGradient,
       {
         colors: ["rgba(98, 0, 238, 0.45)", "rgba(168, 85, 247, 0.35)"],
@@ -3880,7 +4016,7 @@ function PreviewPlaceholder({ visible, style }) {
         style: { width: "100%", height: "100%" }
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react_native27.Animated.View, { style: [{ position: "absolute", inset: 0, opacity: opacity2 }, style], children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react_native29.Animated.View, { style: [{ position: "absolute", inset: 0, opacity: opacity2 }, style], children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
       import_expo_linear_gradient2.LinearGradient,
       {
         colors: ["rgba(168, 85, 247, 0.45)", "rgba(139, 92, 246, 0.35)"],
@@ -3889,7 +4025,7 @@ function PreviewPlaceholder({ visible, style }) {
         style: { width: "100%", height: "100%" }
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react_native27.Animated.View, { style: [{ position: "absolute", inset: 0, opacity: opacity3 }, style], children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react_native29.Animated.View, { style: [{ position: "absolute", inset: 0, opacity: opacity3 }, style], children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
       import_expo_linear_gradient2.LinearGradient,
       {
         colors: ["rgba(139, 92, 246, 0.45)", "rgba(126, 34, 206, 0.35)"],
@@ -3898,7 +4034,7 @@ function PreviewPlaceholder({ visible, style }) {
         style: { width: "100%", height: "100%" }
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react_native27.Animated.View, { style: [{ position: "absolute", inset: 0, opacity: opacity4 }, style], children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react_native29.Animated.View, { style: [{ position: "absolute", inset: 0, opacity: opacity4 }, style], children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
       import_expo_linear_gradient2.LinearGradient,
       {
         colors: ["rgba(126, 34, 206, 0.45)", "rgba(98, 0, 238, 0.35)"],
@@ -3911,12 +4047,12 @@ function PreviewPlaceholder({ visible, style }) {
 }
 
 // src/components/preview/PreviewImage.tsx
-var import_react_native28 = require("react-native");
-var import_jsx_runtime27 = require("react/jsx-runtime");
+var import_react_native30 = require("react-native");
+var import_jsx_runtime29 = require("react/jsx-runtime");
 function PreviewImage({ uri, onLoad, style }) {
   if (!uri) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
-    import_react_native28.Image,
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+    import_react_native30.Image,
     {
       source: { uri },
       resizeMode: "cover",
@@ -3927,15 +4063,15 @@ function PreviewImage({ uri, onLoad, style }) {
 }
 
 // src/components/preview/StatsBar.tsx
-var import_react_native29 = require("react-native");
-var import_liquid_glass6 = require("@callstack/liquid-glass");
+var import_react_native31 = require("react-native");
+var import_liquid_glass7 = require("@callstack/liquid-glass");
 var import_lucide_react_native5 = require("lucide-react-native");
 
 // src/components/icons/MergeIcon.tsx
 var import_react_native_svg2 = __toESM(require("react-native-svg"));
-var import_jsx_runtime28 = require("react/jsx-runtime");
+var import_jsx_runtime30 = require("react/jsx-runtime");
 function MergeIcon({ color = "currentColor", width = 24, height = 24, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react_native_svg2.default, { viewBox: "0 0 486 486", width, height, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_react_native_svg2.default, { viewBox: "0 0 486 486", width, height, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
     import_react_native_svg2.Path,
     {
       d: "M237.025 0H243.664C254.876 95.0361 275.236 175.597 304.743 241.684C334.249 307.478 367.002 357.774 403 392.572L389.722 486C361.691 458.22 338.233 429.417 319.349 399.59C300.464 369.764 284.531 335.843 271.548 297.829C258.565 259.522 246.615 214.343 235.697 162.292L237.91 161.415C228.468 214.928 217.993 261.569 206.485 301.338C194.978 341.107 179.634 375.904 160.455 405.731C141.571 435.265 115.752 462.022 83 486L96.278 392.572C124.014 369.179 147.62 336.72 167.094 295.197C186.864 253.381 202.65 206.886 214.452 155.713C226.255 104.247 233.779 52.343 237.025 0Z",
@@ -3945,7 +4081,7 @@ function MergeIcon({ color = "currentColor", width = 24, height = 24, ...props }
 }
 
 // src/components/preview/StatsBar.tsx
-var import_jsx_runtime29 = require("react/jsx-runtime");
+var import_jsx_runtime31 = require("react/jsx-runtime");
 function StatsBar({
   likeCount,
   commentCount,
@@ -3959,33 +4095,33 @@ function StatsBar({
 }) {
   const theme = useTheme();
   const statsBgColor = theme.scheme === "dark" ? "rgba(24, 24, 27, 0.5)" : "rgba(255, 255, 255, 0.5)";
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
-    import_react_native29.View,
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+    import_react_native31.View,
     {
       style: [
         { position: "absolute", bottom: 12, width: "100%", paddingHorizontal: 12 },
         centered && { alignItems: "center" },
         style
       ],
-      children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
-        import_liquid_glass6.LiquidGlassView,
+      children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+        ResettableLiquidGlassView,
         {
           style: [
             { borderRadius: 100, overflow: "hidden" },
             fixedWidth ? { width: fixedWidth } : void 0,
-            !import_liquid_glass6.isLiquidGlassSupported && { backgroundColor: statsBgColor }
+            !import_liquid_glass7.isLiquidGlassSupported && { backgroundColor: statsBgColor }
           ],
           effect: "clear",
-          children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_react_native29.View, { style: { flexDirection: "row", alignItems: "center", justifyContent: "space-between", paddingHorizontal: 16 }, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
-              import_react_native29.Pressable,
+          children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_react_native31.View, { style: { flexDirection: "row", alignItems: "center", justifyContent: "space-between", paddingHorizontal: 16 }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+              import_react_native31.Pressable,
               {
                 disabled: !onPressLike,
                 onPress: onPressLike,
                 hitSlop: 8,
                 style: { paddingVertical: 8 },
-                children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_react_native29.View, { style: { flexDirection: "row", alignItems: "center" }, children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+                children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_react_native31.View, { style: { flexDirection: "row", alignItems: "center" }, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
                     import_lucide_react_native5.Heart,
                     {
                       size: 16,
@@ -3994,8 +4130,8 @@ function StatsBar({
                       fill: isLiked ? theme.colors.danger : "transparent"
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_react_native29.View, { style: { width: 4 } }),
-                  /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_react_native31.View, { style: { width: 4 } }),
+                  /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
                     Text,
                     {
                       variant: "caption",
@@ -4009,24 +4145,24 @@ function StatsBar({
                 ] })
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
-              import_react_native29.Pressable,
+            /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+              import_react_native31.Pressable,
               {
                 disabled: !onPressComments,
                 onPress: onPressComments,
                 hitSlop: 8,
                 style: { paddingVertical: 8 },
-                children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_react_native29.View, { style: { flexDirection: "row", alignItems: "center" }, children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_lucide_react_native5.MessageCircle, { size: 16, strokeWidth: 2.5, color: "#FFFFFF" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_react_native29.View, { style: { width: 4 } }),
-                  /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Text, { variant: "caption", style: { color: "#FFFFFF", fontWeight: theme.typography.fontWeight.bold }, children: commentCount })
+                children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_react_native31.View, { style: { flexDirection: "row", alignItems: "center" }, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_lucide_react_native5.MessageCircle, { size: 16, strokeWidth: 2.5, color: "#FFFFFF" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_react_native31.View, { style: { width: 4 } }),
+                  /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Text, { variant: "caption", style: { color: "#FFFFFF", fontWeight: theme.typography.fontWeight.bold }, children: commentCount })
                 ] })
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_react_native29.View, { style: { flexDirection: "row", alignItems: "center", paddingVertical: 8 }, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_react_native29.View, { style: { transform: [{ scaleY: -1 }] }, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(MergeIcon, { width: 14, height: 14, color: "#FFFFFF" }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_react_native29.View, { style: { width: 4 } }),
-              /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Text, { variant: "caption", style: { color: "#FFFFFF", fontWeight: theme.typography.fontWeight.bold }, children: forkCount })
+            /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_react_native31.View, { style: { flexDirection: "row", alignItems: "center", paddingVertical: 8 }, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_react_native31.View, { style: { transform: [{ scaleY: -1 }] }, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(MergeIcon, { width: 14, height: 14, color: "#FFFFFF" }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_react_native31.View, { style: { width: 4 } }),
+              /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Text, { variant: "caption", style: { color: "#FFFFFF", fontWeight: theme.typography.fontWeight.bold }, children: forkCount })
             ] })
           ] })
         }
@@ -4036,7 +4172,7 @@ function StatsBar({
 }
 
 // src/components/preview/PreviewStatusBadge.tsx
-var import_react_native30 = require("react-native");
+var import_react_native32 = require("react-native");
 var import_lucide_react_native6 = require("lucide-react-native");
 
 // src/data/apps/types.ts
@@ -4051,7 +4187,7 @@ var APP_STATUS_LABEL = {
 };
 
 // src/components/preview/PreviewStatusBadge.tsx
-var import_jsx_runtime30 = require("react/jsx-runtime");
+var import_jsx_runtime32 = require("react/jsx-runtime");
 var STATUS_BG = {
   ready: "#10B981",
   // emerald-500
@@ -4080,8 +4216,8 @@ var STATUS_ICON = {
 function PreviewStatusBadge({ status }) {
   const IconComp = STATUS_ICON[status];
   const label = APP_STATUS_LABEL[status] ?? status;
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
-    import_react_native30.View,
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
+    import_react_native32.View,
     {
       style: {
         flexDirection: "row",
@@ -4092,15 +4228,15 @@ function PreviewStatusBadge({ status }) {
         backgroundColor: STATUS_BG[status]
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(IconComp, { size: 12, color: "#FFFFFF", style: { marginRight: 4 } }),
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Text, { style: { color: "#FFFFFF", fontSize: 11, lineHeight: 14 }, children: label })
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(IconComp, { size: 12, color: "#FFFFFF", style: { marginRight: 4 } }),
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Text, { style: { color: "#FFFFFF", fontSize: 11, lineHeight: 14 }, children: label })
       ]
     }
   );
 }
 
 // src/studio/ui/preview-panel/PreviewHeroSection.tsx
-var import_jsx_runtime31 = require("react/jsx-runtime");
+var import_jsx_runtime33 = require("react/jsx-runtime");
 function PreviewHeroSection({
   appStatus,
   showProcessing,
@@ -4109,13 +4245,13 @@ function PreviewHeroSection({
   onImageLoad,
   stats
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
     PreviewHeroCard,
     {
-      overlayTopLeft: showProcessing ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(PreviewStatusBadge, { status: appStatus }) : null,
-      background: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(PreviewPlaceholder, { visible: !imageLoaded }),
-      image: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(PreviewImage, { uri: imageUrl, onLoad: onImageLoad }),
-      overlayBottom: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+      overlayTopLeft: showProcessing ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(PreviewStatusBadge, { status: appStatus }) : null,
+      background: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(PreviewPlaceholder, { visible: !imageLoaded }),
+      image: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(PreviewImage, { uri: imageUrl, onLoad: onImageLoad }),
+      overlayBottom: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
         StatsBar,
         {
           likeCount: stats.likeCount,
@@ -4134,11 +4270,11 @@ function PreviewHeroSection({
 }
 
 // src/studio/ui/preview-panel/PreviewMetaSection.tsx
-var import_react_native32 = require("react-native");
+var import_react_native34 = require("react-native");
 
 // src/components/preview/PreviewMetaRow.tsx
-var import_react_native31 = require("react-native");
-var import_jsx_runtime32 = require("react/jsx-runtime");
+var import_react_native33 = require("react-native");
+var import_jsx_runtime34 = require("react/jsx-runtime");
 function PreviewMetaRow({
   avatarUri,
   creatorName,
@@ -4149,11 +4285,11 @@ function PreviewMetaRow({
   style
 }) {
   const theme = useTheme();
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_react_native31.View, { style: [{ alignSelf: "stretch" }, style], children: [
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_react_native31.View, { style: { flexDirection: "row", alignItems: "center" }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Avatar, { uri: avatarUri, name: creatorName, size: 24, style: { marginRight: theme.spacing.sm } }),
-      /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_react_native31.View, { style: { flexDirection: "row", alignItems: "center", flex: 1, minWidth: 0, marginRight: theme.spacing.sm }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_react_native33.View, { style: [{ alignSelf: "stretch" }, style], children: [
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_react_native33.View, { style: { flexDirection: "row", alignItems: "center" }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Avatar, { uri: avatarUri, name: creatorName, size: 24, style: { marginRight: theme.spacing.sm } }),
+      /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_react_native33.View, { style: { flexDirection: "row", alignItems: "center", flex: 1, minWidth: 0, marginRight: theme.spacing.sm }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
           Text,
           {
             numberOfLines: 1,
@@ -4167,11 +4303,11 @@ function PreviewMetaRow({
             children: title
           }
         ),
-        tag ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_react_native31.View, { style: { marginLeft: theme.spacing.sm }, children: tag }) : null
+        tag ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_react_native33.View, { style: { marginLeft: theme.spacing.sm }, children: tag }) : null
       ] }),
-      rightMetric ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_react_native31.View, { children: rightMetric }) : null
+      rightMetric ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_react_native33.View, { children: rightMetric }) : null
     ] }),
-    subtitle ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+    subtitle ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
       Text,
       {
         numberOfLines: 2,
@@ -4214,20 +4350,20 @@ function statusDescription(status, statusError) {
 }
 
 // src/studio/ui/preview-panel/PreviewMetaSection.tsx
-var import_jsx_runtime33 = require("react/jsx-runtime");
+var import_jsx_runtime35 = require("react/jsx-runtime");
 function PreviewMetaSection({ app, isOwner, creator, downloadsCount }) {
   var _a;
   const theme = useTheme();
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
     PreviewMetaRow,
     {
       title: app.name,
       subtitle: app.description,
       avatarUri: (creator == null ? void 0 : creator.avatar) ?? null,
       creatorName: (creator == null ? void 0 : creator.name) ?? null,
-      tag: isOwner || app.forkedFromAppId ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_react_native32.View, { style: { paddingHorizontal: 8, paddingVertical: 2, borderRadius: 999, backgroundColor: "#3700B3" }, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Text, { variant: "caption", style: { color: "#fff", fontWeight: theme.typography.fontWeight.semibold }, children: app.forkedFromAppId ? "Remix" : "Owner" }) }) : null,
-      rightMetric: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
-        import_react_native32.View,
+      tag: isOwner || app.forkedFromAppId ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_react_native34.View, { style: { paddingHorizontal: 8, paddingVertical: 2, borderRadius: 999, backgroundColor: "#3700B3" }, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Text, { variant: "caption", style: { color: "#fff", fontWeight: theme.typography.fontWeight.semibold }, children: app.forkedFromAppId ? "Remix" : "Owner" }) }) : null,
+      rightMetric: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
+        import_react_native34.View,
         {
           style: {
             flexDirection: "row",
@@ -4238,7 +4374,7 @@ function PreviewMetaSection({ app, isOwner, creator, downloadsCount }) {
             backgroundColor: withAlpha(theme.colors.neutral, 0.3)
           },
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
               Text,
               {
                 style: {
@@ -4251,7 +4387,7 @@ function PreviewMetaSection({ app, isOwner, creator, downloadsCount }) {
                 children: formatCount(downloadsCount ?? ((_a = app.insights) == null ? void 0 : _a.totalDownloads) ?? 0)
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(IconPlay, { size: 14, colorToken: "textMuted", fill: theme.colors.textMuted })
+            /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(IconPlay, { size: 14, colorToken: "textMuted", fill: theme.colors.textMuted })
           ]
         }
       ),
@@ -4261,11 +4397,11 @@ function PreviewMetaSection({ app, isOwner, creator, downloadsCount }) {
 }
 
 // src/studio/ui/preview-panel/PreviewCustomizeSection.tsx
-var import_react_native34 = require("react-native");
+var import_react_native36 = require("react-native");
 
 // src/studio/ui/preview-panel/PressableCardRow.tsx
-var import_react_native33 = require("react-native");
-var import_jsx_runtime34 = require("react/jsx-runtime");
+var import_react_native35 = require("react-native");
+var import_jsx_runtime36 = require("react/jsx-runtime");
 function PressableCardRow({
   accessibilityLabel,
   onPress,
@@ -4276,31 +4412,31 @@ function PressableCardRow({
   right,
   style
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
-    import_react_native33.Pressable,
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+    import_react_native35.Pressable,
     {
       accessibilityRole: "button",
       accessibilityLabel,
       disabled,
       onPress,
       style: ({ pressed }) => ({ opacity: disabled ? 0.6 : pressed ? 0.85 : 1 }),
-      children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Card, { padded: false, border: false, style, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_react_native33.View, { style: { flexDirection: "row", alignItems: "center" }, children: [
+      children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Card, { padded: false, border: false, style, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_react_native35.View, { style: { flexDirection: "row", alignItems: "center" }, children: [
         left,
-        /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_react_native33.View, { style: { flex: 1, minWidth: 0 }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_react_native35.View, { style: { flex: 1, minWidth: 0 }, children: [
           title,
           subtitle ? subtitle : null
         ] }),
-        right ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_react_native33.View, { style: { marginLeft: 16 }, children: right }) : null
+        right ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_react_native35.View, { style: { marginLeft: 16 }, children: right }) : null
       ] }) })
     }
   );
 }
 
 // src/studio/ui/preview-panel/SectionTitle.tsx
-var import_jsx_runtime35 = require("react/jsx-runtime");
+var import_jsx_runtime37 = require("react/jsx-runtime");
 function SectionTitle({ children, marginTop }) {
   const theme = useTheme();
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
     Text,
     {
       style: {
@@ -4319,7 +4455,7 @@ function SectionTitle({ children, marginTop }) {
 }
 
 // src/studio/ui/preview-panel/PreviewCustomizeSection.tsx
-var import_jsx_runtime36 = require("react/jsx-runtime");
+var import_jsx_runtime38 = require("react/jsx-runtime");
 function PreviewCustomizeSection({
   app,
   isOwner,
@@ -4329,10 +4465,10 @@ function PreviewCustomizeSection({
   onStartDraw
 }) {
   const theme = useTheme();
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_jsx_runtime36.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(SectionTitle, { children: "Customize" }),
-    showProcessing ? /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
-      import_react_native34.View,
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_jsx_runtime38.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(SectionTitle, { children: "Customize" }),
+    showProcessing ? /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
+      import_react_native36.View,
       {
         style: {
           flexDirection: "row",
@@ -4345,8 +4481,8 @@ function PreviewCustomizeSection({
           marginBottom: theme.spacing.sm
         },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
-            import_react_native34.View,
+          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+            import_react_native36.View,
             {
               style: {
                 width: 40,
@@ -4357,17 +4493,17 @@ function PreviewCustomizeSection({
                 backgroundColor: withAlpha(theme.colors.warning, 0.1),
                 marginRight: theme.spacing.lg
               },
-              children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_react_native34.ActivityIndicator, { color: theme.colors.warning, size: "small" })
+              children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_react_native36.ActivityIndicator, { color: theme.colors.warning, size: "small" })
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_react_native34.View, { style: { flex: 1, minWidth: 0 }, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Text, { style: { color: theme.colors.text, fontSize: 16, lineHeight: 20, fontWeight: theme.typography.fontWeight.semibold }, children: app.status === "error" ? "Error" : "Processing" }),
-            /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Text, { style: { color: theme.colors.textMuted, fontSize: 12, lineHeight: 16, marginTop: 2 }, children: statusDescription(app.status, app.statusError) })
+          /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_react_native36.View, { style: { flex: 1, minWidth: 0 }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Text, { style: { color: theme.colors.text, fontSize: 16, lineHeight: 20, fontWeight: theme.typography.fontWeight.semibold }, children: app.status === "error" ? "Error" : "Processing" }),
+            /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Text, { style: { color: theme.colors.textMuted, fontSize: 12, lineHeight: 16, marginTop: 2 }, children: statusDescription(app.status, app.statusError) })
           ] })
         ]
       }
     ) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
       PressableCardRow,
       {
         accessibilityLabel: isOwner ? "Edit app" : "Remix app",
@@ -4380,8 +4516,8 @@ function PreviewCustomizeSection({
           borderColor: withAlpha(theme.colors.primary, 0.1),
           marginBottom: theme.spacing.sm
         },
-        left: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
-          import_react_native34.View,
+        left: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+          import_react_native36.View,
           {
             style: {
               width: 40,
@@ -4392,15 +4528,15 @@ function PreviewCustomizeSection({
               backgroundColor: withAlpha(theme.colors.primary, 0.1),
               marginRight: theme.spacing.lg
             },
-            children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(IconChat, { size: 20, colorToken: "primary" })
+            children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(IconChat, { size: 20, colorToken: "primary" })
           }
         ),
-        title: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Text, { style: { color: theme.colors.text, fontSize: 16, lineHeight: 20, fontWeight: theme.typography.fontWeight.semibold }, children: isOwner ? app.forkedFromAppId ? "Edit your Remix" : "Edit Your App" : "Remix App" }),
-        subtitle: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Text, { style: { color: theme.colors.textMuted, fontSize: 12, lineHeight: 16, marginTop: 2 }, children: isOwner && app.forkedFromAppId ? "Make changes to your remix with chat" : shouldForkOnEdit ? "Chat to create your own copy and edit it" : "Chat to apply changes" }),
-        right: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(IconChevronRight, { size: 20, colorToken: "textMuted" })
+        title: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Text, { style: { color: theme.colors.text, fontSize: 16, lineHeight: 20, fontWeight: theme.typography.fontWeight.semibold }, children: isOwner ? app.forkedFromAppId ? "Edit your Remix" : "Edit Your App" : "Remix App" }),
+        subtitle: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Text, { style: { color: theme.colors.textMuted, fontSize: 12, lineHeight: 16, marginTop: 2 }, children: isOwner && app.forkedFromAppId ? "Make changes to your remix with chat" : shouldForkOnEdit ? "Chat to create your own copy and edit it" : "Chat to apply changes" }),
+        right: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(IconChevronRight, { size: 20, colorToken: "textMuted" })
       }
     ),
-    isOwner && onStartDraw ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+    isOwner && onStartDraw ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
       PressableCardRow,
       {
         accessibilityLabel: "Draw changes",
@@ -4413,8 +4549,8 @@ function PreviewCustomizeSection({
           borderColor: withAlpha(theme.colors.danger, 0.1),
           marginBottom: theme.spacing.sm
         },
-        left: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
-          import_react_native34.View,
+        left: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+          import_react_native36.View,
           {
             style: {
               width: 40,
@@ -4425,31 +4561,31 @@ function PreviewCustomizeSection({
               backgroundColor: withAlpha(theme.colors.danger, 0.1),
               marginRight: theme.spacing.lg
             },
-            children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(IconDraw, { size: 20, colorToken: "danger" })
+            children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(IconDraw, { size: 20, colorToken: "danger" })
           }
         ),
-        title: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Text, { style: { color: theme.colors.text, fontSize: 16, lineHeight: 20, fontWeight: theme.typography.fontWeight.semibold }, children: "Draw Changes" }),
-        subtitle: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Text, { style: { color: theme.colors.textMuted, fontSize: 12, lineHeight: 16, marginTop: 2 }, children: "Annotate the app with drawings" }),
-        right: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(IconChevronRight, { size: 20, colorToken: "textMuted" })
+        title: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Text, { style: { color: theme.colors.text, fontSize: 16, lineHeight: 20, fontWeight: theme.typography.fontWeight.semibold }, children: "Draw Changes" }),
+        subtitle: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Text, { style: { color: theme.colors.textMuted, fontSize: 12, lineHeight: 16, marginTop: 2 }, children: "Annotate the app with drawings" }),
+        right: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(IconChevronRight, { size: 20, colorToken: "textMuted" })
       }
     ) : null
   ] });
 }
 
 // src/studio/ui/preview-panel/PreviewCollaborateSection.tsx
-var React29 = __toESM(require("react"));
-var import_react_native40 = require("react-native");
+var React31 = __toESM(require("react"));
+var import_react_native42 = require("react-native");
 var import_lucide_react_native9 = require("lucide-react-native");
 
 // src/components/merge-requests/MergeRequestStatusCard.tsx
-var React25 = __toESM(require("react"));
-var import_react_native36 = require("react-native");
+var React27 = __toESM(require("react"));
+var import_react_native38 = require("react-native");
 var import_lucide_react_native7 = require("lucide-react-native");
 
 // src/components/primitives/MarkdownText.tsx
-var import_react_native35 = require("react-native");
+var import_react_native37 = require("react-native");
 var import_react_native_markdown_display = __toESM(require("react-native-markdown-display"));
-var import_jsx_runtime37 = require("react/jsx-runtime");
+var import_jsx_runtime39 = require("react/jsx-runtime");
 function MarkdownText({ markdown, variant = "chat", bodyColor, style }) {
   const theme = useTheme();
   const isDark = theme.scheme === "dark";
@@ -4460,7 +4596,7 @@ function MarkdownText({ markdown, variant = "chat", bodyColor, style }) {
   const codeTextColor = isDark ? "#FFFFFF" : theme.colors.text;
   const paragraphBottom = variant === "mergeRequest" ? 8 : 6;
   const baseLineHeight = variant === "mergeRequest" ? 22 : 20;
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_react_native35.View, { style, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_react_native37.View, { style, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
     import_react_native_markdown_display.default,
     {
       style: {
@@ -4473,7 +4609,7 @@ function MarkdownText({ markdown, variant = "chat", bodyColor, style }) {
           paddingHorizontal: variant === "mergeRequest" ? 6 : 4,
           paddingVertical: variant === "mergeRequest" ? 2 : 0,
           borderRadius: variant === "mergeRequest" ? 6 : 4,
-          fontFamily: import_react_native35.Platform.OS === "ios" ? "Menlo" : "monospace",
+          fontFamily: import_react_native37.Platform.OS === "ios" ? "Menlo" : "monospace",
           fontSize: 13
         },
         code_block: {
@@ -4524,11 +4660,11 @@ function toIsoString(input) {
 }
 
 // src/components/merge-requests/useControlledExpansion.ts
-var React24 = __toESM(require("react"));
+var React26 = __toESM(require("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);
@@ -4540,7 +4676,7 @@ function useControlledExpansion(props) {
 }
 
 // src/components/merge-requests/MergeRequestStatusCard.tsx
-var import_jsx_runtime38 = require("react/jsx-runtime");
+var import_jsx_runtime40 = require("react/jsx-runtime");
 function MergeRequestStatusCard({
   mergeRequest,
   expanded: expandedProp,
@@ -4553,8 +4689,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":
@@ -4585,15 +4721,15 @@ function MergeRequestStatusCard({
   const createdIso = toIsoString(mergeRequest.createdAt ?? null);
   const headerTimeAgo = updatedIso ? formatTimeAgo(updatedIso) : "";
   const createdTimeAgo = createdIso ? formatTimeAgo(createdIso) : "";
-  const rotate = React25.useRef(new import_react_native36.Animated.Value(expanded ? 1 : 0)).current;
-  React25.useEffect(() => {
-    import_react_native36.Animated.timing(rotate, {
+  const rotate = React27.useRef(new import_react_native38.Animated.Value(expanded ? 1 : 0)).current;
+  React27.useEffect(() => {
+    import_react_native38.Animated.timing(rotate, {
       toValue: expanded ? 1 : 0,
       duration: 200,
       useNativeDriver: true
     }).start();
   }, [expanded, rotate]);
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_react_native36.Pressable, { onPress: () => setExpanded(!expanded), style: ({ pressed }) => [{ opacity: pressed ? 0.95 : 1 }], children: /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_react_native38.Pressable, { onPress: () => setExpanded(!expanded), style: ({ pressed }) => [{ opacity: pressed ? 0.95 : 1 }], children: /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
     Card,
     {
       padded: false,
@@ -4606,11 +4742,11 @@ function MergeRequestStatusCard({
         style
       ],
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_react_native36.View, { style: { flexDirection: "row", alignItems: "center", gap: theme.spacing.lg }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_react_native36.View, { style: { width: 40, height: 40, borderRadius: 999, alignItems: "center", justifyContent: "center", backgroundColor: bgColor }, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(StatusIcon, { size: 20, color: iconColor }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_react_native36.View, { style: { flex: 1, minWidth: 0 }, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_react_native36.View, { style: { flexDirection: "row", alignItems: "center", justifyContent: "space-between" }, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_react_native38.View, { style: { flexDirection: "row", alignItems: "center", gap: theme.spacing.lg }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_react_native38.View, { style: { width: 40, height: 40, borderRadius: 999, alignItems: "center", justifyContent: "center", backgroundColor: bgColor }, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(StatusIcon, { size: 20, color: iconColor }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_react_native38.View, { style: { flex: 1, minWidth: 0 }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_react_native38.View, { style: { flexDirection: "row", alignItems: "center", justifyContent: "space-between" }, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
                 Text,
                 {
                   style: {
@@ -4624,12 +4760,12 @@ function MergeRequestStatusCard({
                   children: statusText
                 }
               ),
-              headerTimeAgo ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Text, { style: { fontSize: 10, lineHeight: 14, marginLeft: theme.spacing.sm, color: withAlpha(theme.colors.textMuted, 0.6) }, children: headerTimeAgo }) : null
+              headerTimeAgo ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Text, { style: { fontSize: 10, lineHeight: 14, marginLeft: theme.spacing.sm, color: withAlpha(theme.colors.textMuted, 0.6) }, children: headerTimeAgo }) : null
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Text, { style: { fontSize: 12, lineHeight: 16, color: theme.colors.textMuted }, numberOfLines: 1, children: mergeRequest.title ?? "Untitled merge request" })
+            /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Text, { style: { fontSize: 12, lineHeight: 16, color: theme.colors.textMuted }, numberOfLines: 1, children: mergeRequest.title ?? "Untitled merge request" })
           ] }),
-          headerRight ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_react_native36.View, { children: headerRight }) : /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
-            import_react_native36.Animated.View,
+          headerRight ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_react_native38.View, { children: headerRight }) : /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+            import_react_native38.Animated.View,
             {
               style: {
                 transform: [
@@ -4638,12 +4774,12 @@ function MergeRequestStatusCard({
                   }
                 ]
               },
-              children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_lucide_react_native7.ChevronDown, { size: 20, color: withAlpha(theme.colors.textMuted, 0.4) })
+              children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_lucide_react_native7.ChevronDown, { size: 20, color: withAlpha(theme.colors.textMuted, 0.4) })
             }
           )
         ] }),
-        expanded ? /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_react_native36.View, { style: { marginTop: 16, marginLeft: 56 }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+        expanded ? /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_react_native38.View, { style: { marginTop: 16, marginLeft: 56 }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
             Text,
             {
               style: {
@@ -4657,7 +4793,7 @@ function MergeRequestStatusCard({
               children: status.text
             }
           ),
-          createdTimeAgo ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+          createdTimeAgo ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
             Text,
             {
               style: {
@@ -4668,8 +4804,8 @@ function MergeRequestStatusCard({
               children: createdTimeAgo
             }
           ) : null,
-          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Text, { style: { fontSize: 16, fontWeight: "600", color: textColor, marginBottom: 8 }, children: mergeRequest.title ?? "Untitled merge request" }),
-          mergeRequest.description ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(MarkdownText, { markdown: mergeRequest.description, variant: "mergeRequest" }) : null
+          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Text, { style: { fontSize: 16, fontWeight: "600", color: textColor, marginBottom: 8 }, children: mergeRequest.title ?? "Untitled merge request" }),
+          mergeRequest.description ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(MarkdownText, { markdown: mergeRequest.description, variant: "mergeRequest" }) : null
         ] }) : null
       ]
     }
@@ -4677,18 +4813,18 @@ function MergeRequestStatusCard({
 }
 
 // src/components/merge-requests/ReviewMergeRequestCarousel.tsx
-var React28 = __toESM(require("react"));
-var import_react_native39 = require("react-native");
+var React30 = __toESM(require("react"));
+var import_react_native41 = require("react-native");
 
 // src/components/merge-requests/ReviewMergeRequestCard.tsx
-var React27 = __toESM(require("react"));
-var import_react_native38 = require("react-native");
+var React29 = __toESM(require("react"));
+var import_react_native40 = require("react-native");
 var import_lucide_react_native8 = require("lucide-react-native");
 
 // src/components/merge-requests/ReviewMergeRequestActionButton.tsx
-var React26 = __toESM(require("react"));
-var import_react_native37 = require("react-native");
-var import_jsx_runtime39 = require("react/jsx-runtime");
+var React28 = __toESM(require("react"));
+var import_react_native39 = require("react-native");
+var import_jsx_runtime41 = require("react/jsx-runtime");
 function ReviewMergeRequestActionButton({
   accessibilityLabel,
   backgroundColor,
@@ -4697,14 +4833,14 @@ 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__ */ (0, import_jsx_runtime39.jsx)(
-    import_react_native37.View,
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+    import_react_native39.View,
     {
       style: {
         width,
@@ -4718,8 +4854,8 @@ function ReviewMergeRequestActionButton({
         paddingVertical,
         justifyContent: "center"
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
-        import_react_native37.Pressable,
+      children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+        import_react_native39.Pressable,
         {
           accessibilityRole: "button",
           accessibilityLabel,
@@ -4742,7 +4878,7 @@ function ReviewMergeRequestActionButton({
 }
 
 // src/components/merge-requests/ReviewMergeRequestCard.tsx
-var import_jsx_runtime40 = require("react/jsx-runtime");
+var import_jsx_runtime42 = require("react/jsx-runtime");
 function ReviewMergeRequestCard({
   mr,
   index,
@@ -4759,14 +4895,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 import_react_native38.Animated.Value(isExpanded ? 1 : 0)).current;
-  React27.useEffect(() => {
-    import_react_native38.Animated.timing(rotate, { toValue: isExpanded ? 1 : 0, duration: 200, useNativeDriver: true }).start();
+  const rotate = React29.useRef(new import_react_native40.Animated.Value(isExpanded ? 1 : 0)).current;
+  React29.useEffect(() => {
+    import_react_native40.Animated.timing(rotate, { toValue: isExpanded ? 1 : 0, duration: 200, useNativeDriver: true }).start();
   }, [isExpanded, rotate]);
   const position = total > 1 ? `${index + 1}/${total}` : "Merge request";
-  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_react_native38.Pressable, { onPress: onToggle, style: ({ pressed }) => ({ opacity: pressed ? 0.95 : 1 }), children: /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_react_native40.Pressable, { onPress: onToggle, style: ({ pressed }) => ({ opacity: pressed ? 0.95 : 1 }), children: /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
     Card,
     {
       padded: false,
@@ -4779,10 +4915,10 @@ function ReviewMergeRequestCard({
         }
       ],
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_react_native38.View, { style: { flexDirection: "row", alignItems: "center", gap: 12 }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Avatar, { size: 40, uri: (creator == null ? void 0 : creator.avatar) ?? null, name: (creator == null ? void 0 : creator.name) ?? void 0 }),
-          /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_react_native38.View, { style: { flex: 1, minWidth: 0 }, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(import_react_native40.View, { style: { flexDirection: "row", alignItems: "center", gap: 12 }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Avatar, { size: 40, uri: (creator == null ? void 0 : creator.avatar) ?? null, name: (creator == null ? void 0 : creator.name) ?? void 0 }),
+          /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(import_react_native40.View, { style: { flex: 1, minWidth: 0 }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
               Text,
               {
                 style: { fontWeight: theme.typography.fontWeight.semibold, color: theme.colors.text, fontSize: 16, lineHeight: 20 },
@@ -4790,24 +4926,24 @@ function ReviewMergeRequestCard({
                 children: mr.title ?? "Untitled merge request"
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(Text, { style: { color: theme.colors.textMuted, fontSize: 12, lineHeight: 16 }, numberOfLines: 1, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(Text, { style: { color: theme.colors.textMuted, fontSize: 12, lineHeight: 16 }, numberOfLines: 1, children: [
               (creator == null ? void 0 : creator.name) ?? "Loading...",
               " \xB7 ",
               position
             ] })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
-            import_react_native38.Animated.View,
+          /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+            import_react_native40.Animated.View,
             {
               style: {
                 transform: [{ rotate: rotate.interpolate({ inputRange: [0, 1], outputRange: ["0deg", "180deg"] }) }]
               },
-              children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_lucide_react_native8.ChevronDown, { size: 20, color: withAlpha(theme.colors.textMuted, 0.4) })
+              children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_lucide_react_native8.ChevronDown, { size: 20, color: withAlpha(theme.colors.textMuted, 0.4) })
             }
           )
         ] }),
-        isExpanded ? /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_react_native38.View, { style: { marginTop: 16 }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+        isExpanded ? /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(import_react_native40.View, { style: { marginTop: 16 }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
             Text,
             {
               style: {
@@ -4821,13 +4957,13 @@ function ReviewMergeRequestCard({
               children: status.text
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Text, { style: { color: theme.colors.textMuted, fontSize: 12, lineHeight: 16, marginBottom: 12 }, children: creator ? `${creator.approvedOpenedMergeRequests} approved merge${creator.approvedOpenedMergeRequests !== 1 ? "s" : ""}` : "Loading stats..." }),
-          mr.description ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(MarkdownText, { markdown: mr.description, variant: "mergeRequest" }) : null
+          /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Text, { style: { color: theme.colors.textMuted, fontSize: 12, lineHeight: 16, marginBottom: 12 }, children: creator ? `${creator.approvedOpenedMergeRequests} approved merge${creator.approvedOpenedMergeRequests !== 1 ? "s" : ""}` : "Loading stats..." }),
+          mr.description ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(MarkdownText, { markdown: mr.description, variant: "mergeRequest" }) : null
         ] }) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_react_native38.View, { style: { height: 1, backgroundColor: withAlpha(theme.colors.borderStrong, 0.5), marginTop: 12, marginBottom: 12 } }),
-        /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_react_native38.View, { style: { flexDirection: "row", alignItems: "center", justifyContent: "space-between" }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_react_native38.View, { style: { flexDirection: "row", gap: 8 }, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_react_native40.View, { style: { height: 1, backgroundColor: withAlpha(theme.colors.borderStrong, 0.5), marginTop: 12, marginBottom: 12 } }),
+        /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(import_react_native40.View, { style: { flexDirection: "row", alignItems: "center", justifyContent: "space-between" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(import_react_native40.View, { style: { flexDirection: "row", gap: 8 }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
               ReviewMergeRequestActionButton,
               {
                 accessibilityLabel: "Reject",
@@ -4835,13 +4971,13 @@ function ReviewMergeRequestCard({
                 disabled: !canAct || isAnyProcessing,
                 onPress: onReject,
                 iconOnly: !isExpanded,
-                children: /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_react_native38.View, { style: { flexDirection: "row", alignItems: "center", gap: isExpanded ? 4 : 0 }, children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_lucide_react_native8.X, { size: 18, color: "#FFFFFF" }),
-                  isExpanded ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Text, { style: { fontSize: 13, color: "#FFFFFF", fontWeight: theme.typography.fontWeight.semibold }, children: "Reject" }) : null
+                children: /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(import_react_native40.View, { style: { flexDirection: "row", alignItems: "center", gap: isExpanded ? 4 : 0 }, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_lucide_react_native8.X, { size: 18, color: "#FFFFFF" }),
+                  isExpanded ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Text, { style: { fontSize: 13, color: "#FFFFFF", fontWeight: theme.typography.fontWeight.semibold }, children: "Reject" }) : null
                 ] })
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
               ReviewMergeRequestActionButton,
               {
                 accessibilityLabel: !canAct ? "Not actionable" : isProcessing ? "Processing" : "Approve",
@@ -4849,17 +4985,17 @@ function ReviewMergeRequestCard({
                 disabled: !canAct || isAnyProcessing,
                 onPress: onApprove,
                 iconOnly: !isExpanded,
-                children: isProcessing ? /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_react_native38.View, { style: { flexDirection: "row", alignItems: "center", gap: isExpanded ? 4 : 0 }, children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_react_native38.ActivityIndicator, { size: "small", color: "#FFFFFF" }),
-                  isExpanded ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Text, { style: { fontSize: 13, color: "#FFFFFF", fontWeight: theme.typography.fontWeight.semibold }, children: "Processing" }) : null
-                ] }) : /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_react_native38.View, { style: { flexDirection: "row", alignItems: "center", gap: isExpanded ? 4 : 0 }, children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_lucide_react_native8.Check, { size: 18, color: "#FFFFFF" }),
-                  isExpanded ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Text, { style: { fontSize: 13, color: "#FFFFFF", fontWeight: theme.typography.fontWeight.semibold }, children: "Approve" }) : null
+                children: isProcessing ? /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(import_react_native40.View, { style: { flexDirection: "row", alignItems: "center", gap: isExpanded ? 4 : 0 }, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_react_native40.ActivityIndicator, { size: "small", color: "#FFFFFF" }),
+                  isExpanded ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Text, { style: { fontSize: 13, color: "#FFFFFF", fontWeight: theme.typography.fontWeight.semibold }, children: "Processing" }) : null
+                ] }) : /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(import_react_native40.View, { style: { flexDirection: "row", alignItems: "center", gap: isExpanded ? 4 : 0 }, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_lucide_react_native8.Check, { size: 18, color: "#FFFFFF" }),
+                  isExpanded ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Text, { style: { fontSize: 13, color: "#FFFFFF", fontWeight: theme.typography.fontWeight.semibold }, children: "Approve" }) : null
                 ] })
               }
             )
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
             ReviewMergeRequestActionButton,
             {
               accessibilityLabel: "Test",
@@ -4867,9 +5003,9 @@ function ReviewMergeRequestCard({
               disabled: isBuilding || isTestingThis,
               onPress: onTest,
               iconOnly: !isExpanded,
-              children: isTestingThis ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_react_native38.ActivityIndicator, { size: "small", color: "#888" }) : /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_react_native38.View, { style: { flexDirection: "row", alignItems: "center", gap: isExpanded ? 4 : 0 }, children: [
-                /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_lucide_react_native8.Play, { size: 14, color: theme.colors.text }),
-                isExpanded ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Text, { style: { fontSize: 13, color: theme.colors.text, fontWeight: theme.typography.fontWeight.semibold }, children: "Test" }) : null
+              children: isTestingThis ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_react_native40.ActivityIndicator, { size: "small", color: "#888" }) : /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(import_react_native40.View, { style: { flexDirection: "row", alignItems: "center", gap: isExpanded ? 4 : 0 }, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_lucide_react_native8.Play, { size: 14, color: theme.colors.text }),
+                isExpanded ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Text, { style: { fontSize: 13, color: theme.colors.text, fontWeight: theme.typography.fontWeight.semibold }, children: "Test" }) : null
               ] })
             }
           )
@@ -4880,7 +5016,7 @@ function ReviewMergeRequestCard({
 }
 
 // src/components/merge-requests/ReviewMergeRequestCarousel.tsx
-var import_jsx_runtime41 = require("react/jsx-runtime");
+var import_jsx_runtime43 = require("react/jsx-runtime");
 function ReviewMergeRequestCarousel({
   mergeRequests,
   creatorStatsById,
@@ -4893,32 +5029,32 @@ function ReviewMergeRequestCarousel({
   style
 }) {
   const theme = useTheme();
-  const { width } = (0, import_react_native39.useWindowDimensions)();
-  const [expanded, setExpanded] = React28.useState({});
-  const carouselScrollX = React28.useRef(new import_react_native39.Animated.Value(0)).current;
+  const { width } = (0, import_react_native41.useWindowDimensions)();
+  const [expanded, setExpanded] = React30.useState({});
+  const carouselScrollX = React30.useRef(new import_react_native41.Animated.Value(0)).current;
   const peekAmount = 24;
   const gap = 16;
-  const cardWidth = React28.useMemo(() => Math.max(1, width - theme.spacing.lg * 2 - peekAmount), [peekAmount, theme.spacing.lg, width]);
+  const 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__ */ (0, import_jsx_runtime41.jsxs)(import_react_native39.View, { style: [{ marginHorizontal: -theme.spacing.lg }, style], children: [
-    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
-      import_react_native39.FlatList,
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_react_native41.View, { style: [{ marginHorizontal: -theme.spacing.lg }, style], children: [
+    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+      import_react_native41.FlatList,
       {
         horizontal: true,
         data: mergeRequests,
         keyExtractor: (mr) => mr.id,
         showsHorizontalScrollIndicator: false,
         contentContainerStyle: { paddingHorizontal: theme.spacing.lg, paddingVertical: theme.spacing.sm },
-        ItemSeparatorComponent: () => /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_react_native39.View, { style: { width: gap } }),
+        ItemSeparatorComponent: () => /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_react_native41.View, { style: { width: gap } }),
         snapToAlignment: "start",
         decelerationRate: "fast",
         snapToInterval: snapInterval,
         disableIntervalMomentum: true,
         style: { paddingRight: peekAmount },
-        ListFooterComponent: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_react_native39.View, { style: { width: peekAmount } }),
-        onScroll: import_react_native39.Animated.event([{ nativeEvent: { contentOffset: { x: carouselScrollX } } }], {
+        ListFooterComponent: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_react_native41.View, { style: { width: peekAmount } }),
+        onScroll: import_react_native41.Animated.event([{ nativeEvent: { contentOffset: { x: carouselScrollX } } }], {
           useNativeDriver: false
         }),
         scrollEventThrottle: 16,
@@ -4929,7 +5065,7 @@ function ReviewMergeRequestCarousel({
           const isProcessing = Boolean(processingMrId && processingMrId === item.id);
           const isAnyProcessing = Boolean(processingMrId);
           const isTestingThis = Boolean(testingMrId && testingMrId === item.id);
-          return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_react_native39.View, { style: { width: cardWidth }, children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+          return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_react_native41.View, { style: { width: cardWidth }, children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
             ReviewMergeRequestCard,
             {
               mr: item,
@@ -4950,7 +5086,7 @@ function ReviewMergeRequestCarousel({
         }
       }
     ),
-    mergeRequests.length >= 1 ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_react_native39.View, { style: { flexDirection: "row", justifyContent: "center", columnGap: 8, marginTop: theme.spacing.md }, children: mergeRequests.map((mr, index) => {
+    mergeRequests.length >= 1 ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_react_native41.View, { style: { flexDirection: "row", justifyContent: "center", columnGap: 8, marginTop: theme.spacing.md }, children: mergeRequests.map((mr, index) => {
       const inputRange = [(index - 1) * snapInterval, index * snapInterval, (index + 1) * snapInterval];
       const scale = carouselScrollX.interpolate({
         inputRange,
@@ -4962,8 +5098,8 @@ function ReviewMergeRequestCarousel({
         outputRange: [0.4, 1, 0.4],
         extrapolate: "clamp"
       });
-      return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
-        import_react_native39.Animated.View,
+      return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+        import_react_native41.Animated.View,
         {
           style: {
             width: 8,
@@ -4981,7 +5117,7 @@ function ReviewMergeRequestCarousel({
 }
 
 // src/studio/ui/preview-panel/PreviewCollaborateSection.tsx
-var import_jsx_runtime42 = require("react/jsx-runtime");
+var import_jsx_runtime44 = require("react/jsx-runtime");
 function PreviewCollaborateSection({
   canSubmitMergeRequest,
   incomingMergeRequests,
@@ -4997,13 +5133,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__ */ (0, import_jsx_runtime42.jsxs)(import_jsx_runtime42.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(SectionTitle, { marginTop: theme.spacing.xl, children: "Collaborate" }),
-    showActionsSubtitle ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_jsx_runtime44.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(SectionTitle, { marginTop: theme.spacing.xl, children: "Collaborate" }),
+    showActionsSubtitle ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
       Text,
       {
         style: {
@@ -5018,13 +5154,13 @@ function PreviewCollaborateSection({
         children: "Actions"
       }
     ) : null,
-    canSubmitMergeRequest && onSubmitMergeRequest ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+    canSubmitMergeRequest && onSubmitMergeRequest ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
       PressableCardRow,
       {
         accessibilityLabel: "Submit merge request",
         disabled: submittingMr,
         onPress: () => {
-          import_react_native40.Alert.alert(
+          import_react_native42.Alert.alert(
             "Submit Merge Request",
             "Are you sure you want to submit your changes to the original app?",
             [
@@ -5049,8 +5185,8 @@ function PreviewCollaborateSection({
           borderColor: withAlpha("#03DAC6", 0.2),
           marginBottom: theme.spacing.sm
         },
-        left: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
-          import_react_native40.View,
+        left: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+          import_react_native42.View,
           {
             style: {
               width: 40,
@@ -5061,15 +5197,15 @@ function PreviewCollaborateSection({
               backgroundColor: withAlpha("#03DAC6", 0.1),
               marginRight: theme.spacing.lg
             },
-            children: submittingMr ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_react_native40.ActivityIndicator, { color: "#03DAC6", size: "small" }) : /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(MergeIcon, { width: 20, height: 20, color: "#03DAC6" })
+            children: submittingMr ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_react_native42.ActivityIndicator, { color: "#03DAC6", size: "small" }) : /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(MergeIcon, { width: 20, height: 20, color: "#03DAC6" })
           }
         ),
-        title: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Text, { style: { color: theme.colors.text, fontSize: 16, lineHeight: 20, fontWeight: theme.typography.fontWeight.semibold }, children: "Submit your new changes" }),
-        subtitle: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Text, { style: { color: theme.colors.textMuted, fontSize: 12, lineHeight: 16, marginTop: 2 }, children: "Ask to merge this remix to the original app" }),
-        right: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_lucide_react_native9.Send, { size: 16, color: "#03DAC6" })
+        title: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Text, { style: { color: theme.colors.text, fontSize: 16, lineHeight: 20, fontWeight: theme.typography.fontWeight.semibold }, children: "Submit your new changes" }),
+        subtitle: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Text, { style: { color: theme.colors.textMuted, fontSize: 12, lineHeight: 16, marginTop: 2 }, children: "Ask to merge this remix to the original app" }),
+        right: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_lucide_react_native9.Send, { size: 16, color: "#03DAC6" })
       }
     ) : null,
-    onTestMr && incomingMergeRequests.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+    onTestMr && incomingMergeRequests.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
       ReviewMergeRequestCarousel,
       {
         mergeRequests: incomingMergeRequests,
@@ -5082,8 +5218,8 @@ function PreviewCollaborateSection({
         onTest: (mr) => onTestMr ? onTestMr(mr) : void 0
       }
     ) : null,
-    outgoingMergeRequests.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(import_jsx_runtime42.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+    outgoingMergeRequests.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_jsx_runtime44.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
         Text,
         {
           style: {
@@ -5099,13 +5235,13 @@ function PreviewCollaborateSection({
           children: "History"
         }
       ),
-      outgoingMergeRequests.map((mr) => /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_react_native40.View, { style: { marginBottom: theme.spacing.sm }, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(MergeRequestStatusCard, { mergeRequest: toMergeRequestSummary(mr) }) }, mr.id))
+      outgoingMergeRequests.map((mr) => /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_react_native42.View, { style: { marginBottom: theme.spacing.sm }, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(MergeRequestStatusCard, { mergeRequest: toMergeRequestSummary(mr) }) }, mr.id))
     ] }) : null
   ] });
 }
 
 // src/studio/ui/preview-panel/usePreviewPanelData.ts
-var React31 = __toESM(require("react"));
+var React33 = __toESM(require("react"));
 
 // src/data/apps/images/remote.ts
 var AppImagesRemoteDataSourceImpl = class extends BaseRemote {
@@ -5156,7 +5292,7 @@ var AppImagesRepositoryImpl = class extends BaseRepository {
 var appImagesRepository = new AppImagesRepositoryImpl(appImagesRemoteDataSource);
 
 // src/studio/hooks/useAppStats.ts
-var React30 = __toESM(require("react"));
+var React32 = __toESM(require("react"));
 var Haptics2 = __toESM(require("expo-haptics"));
 
 // src/data/likes/remote.ts
@@ -5225,34 +5361,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;
@@ -5276,7 +5412,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);
@@ -5291,11 +5427,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 () => {
@@ -5310,7 +5446,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 () => {
@@ -5326,10 +5462,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 () => {
@@ -5354,7 +5490,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)}`
@@ -5368,7 +5504,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;
@@ -5390,7 +5526,7 @@ function usePreviewPanelData(params) {
 }
 
 // src/studio/ui/PreviewPanel.tsx
-var import_jsx_runtime43 = require("react/jsx-runtime");
+var import_jsx_runtime45 = require("react/jsx-runtime");
 function PreviewPanel({
   app,
   loading,
@@ -5421,16 +5557,16 @@ function PreviewPanel({
     onOpenComments,
     commentCountOverride
   });
-  const header = /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(PreviewPanelHeader, { isOwner, onClose, onNavigateHome, onGoToChat });
+  const header = /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(PreviewPanelHeader, { isOwner, onClose, onNavigateHome, onGoToChat });
   if (loading || !app) {
-    return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(PreviewPage, { header, children: /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_react_native41.View, { style: { flex: 1, justifyContent: "center", alignItems: "center", padding: 24 }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_react_native41.ActivityIndicator, {}),
-      /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_react_native41.View, { style: { height: 12 } }),
-      /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Text, { variant: "bodyMuted", children: "Loading app\u2026" })
+    return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(PreviewPage, { header, children: /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_react_native43.View, { style: { flex: 1, justifyContent: "center", alignItems: "center", padding: 24 }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_react_native43.ActivityIndicator, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_react_native43.View, { style: { height: 12 } }),
+      /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Text, { variant: "bodyMuted", children: "Loading app\u2026" })
     ] }) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(PreviewPage, { header, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(PreviewPage, { header, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
       PreviewHeroSection,
       {
         appStatus: app.status,
@@ -5448,8 +5584,8 @@ function PreviewPanel({
         }
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(PreviewMetaSection, { app, isOwner, creator, downloadsCount: insights.downloads }),
-    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(PreviewMetaSection, { app, isOwner, creator, downloadsCount: insights.downloads }),
+    /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
       PreviewCustomizeSection,
       {
         app,
@@ -5460,7 +5596,7 @@ function PreviewPanel({
         onStartDraw
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
       PreviewCollaborateSection,
       {
         canSubmitMergeRequest,
@@ -5481,23 +5617,23 @@ function PreviewPanel({
 }
 
 // src/studio/ui/ChatPanel.tsx
-var React36 = __toESM(require("react"));
-var import_react_native49 = require("react-native");
+var React38 = __toESM(require("react"));
+var import_react_native51 = require("react-native");
 
 // src/components/chat/ChatPage.tsx
-var React34 = __toESM(require("react"));
-var import_react_native45 = require("react-native");
+var React36 = __toESM(require("react"));
+var import_react_native47 = require("react-native");
 var import_react_native_safe_area_context4 = require("react-native-safe-area-context");
 
 // src/components/chat/ChatMessageList.tsx
-var React33 = __toESM(require("react"));
-var import_react_native44 = require("react-native");
+var React35 = __toESM(require("react"));
+var import_react_native46 = require("react-native");
 var import_bottom_sheet5 = require("@gorhom/bottom-sheet");
 
 // src/components/chat/ChatMessageBubble.tsx
-var import_react_native42 = require("react-native");
+var import_react_native44 = require("react-native");
 var import_lucide_react_native10 = require("lucide-react-native");
-var import_jsx_runtime44 = require("react/jsx-runtime");
+var import_jsx_runtime46 = require("react/jsx-runtime");
 function ChatMessageBubble({ message, renderContent, style }) {
   var _a, _b;
   const theme = useTheme();
@@ -5511,7 +5647,7 @@ function ChatMessageBubble({ message, renderContent, style }) {
   const bubbleVariant = isHuman ? "surface" : "surfaceRaised";
   const cornerStyle = isHuman ? { borderTopRightRadius: 0 } : { borderTopLeftRadius: 0 };
   const bodyColor = metaStatus === "success" ? theme.colors.success : metaStatus === "error" ? theme.colors.danger : void 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_react_native42.View, { style: [align, style], children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_react_native44.View, { style: [align, style], children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
     Surface,
     {
       variant: bubbleVariant,
@@ -5526,34 +5662,34 @@ function ChatMessageBubble({ message, renderContent, style }) {
         },
         cornerStyle
       ],
-      children: /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_react_native42.View, { style: { flexDirection: "row", alignItems: "center" }, children: [
-        isMergeCompleted ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_lucide_react_native10.CheckCheck, { size: 16, color: theme.colors.success, style: { marginRight: theme.spacing.sm } }) : null,
-        isMergeApproved ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_lucide_react_native10.GitMerge, { size: 16, color: theme.colors.text, style: { marginRight: theme.spacing.sm } }) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_react_native42.View, { style: { flexShrink: 1, minWidth: 0 }, children: renderContent ? renderContent(message) : /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(MarkdownText, { markdown: message.content, variant: "chat", bodyColor }) })
+      children: /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(import_react_native44.View, { style: { flexDirection: "row", alignItems: "center" }, children: [
+        isMergeCompleted ? /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_lucide_react_native10.CheckCheck, { size: 16, color: theme.colors.success, style: { marginRight: theme.spacing.sm } }) : null,
+        isMergeApproved ? /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_lucide_react_native10.GitMerge, { size: 16, color: theme.colors.text, style: { marginRight: theme.spacing.sm } }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_react_native44.View, { style: { flexShrink: 1, minWidth: 0 }, children: renderContent ? renderContent(message) : /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(MarkdownText, { markdown: message.content, variant: "chat", bodyColor }) })
       ] })
     }
   ) });
 }
 
 // src/components/chat/TypingIndicator.tsx
-var React32 = __toESM(require("react"));
-var import_react_native43 = require("react-native");
-var import_jsx_runtime45 = require("react/jsx-runtime");
+var React34 = __toESM(require("react"));
+var import_react_native45 = require("react-native");
+var import_jsx_runtime47 = require("react/jsx-runtime");
 function TypingIndicator({ style }) {
   const theme = useTheme();
   const dotColor = theme.colors.textSubtle;
-  const anims = React32.useMemo(
-    () => [new import_react_native43.Animated.Value(0.3), new import_react_native43.Animated.Value(0.3), new import_react_native43.Animated.Value(0.3)],
+  const anims = React34.useMemo(
+    () => [new import_react_native45.Animated.Value(0.3), new import_react_native45.Animated.Value(0.3), new import_react_native45.Animated.Value(0.3)],
     []
   );
-  React32.useEffect(() => {
+  React34.useEffect(() => {
     const loops = [];
     anims.forEach((a, idx) => {
-      const seq = import_react_native43.Animated.sequence([
-        import_react_native43.Animated.timing(a, { toValue: 1, duration: 420, useNativeDriver: true, delay: idx * 140 }),
-        import_react_native43.Animated.timing(a, { toValue: 0.3, duration: 420, useNativeDriver: true })
+      const seq = import_react_native45.Animated.sequence([
+        import_react_native45.Animated.timing(a, { toValue: 1, duration: 420, useNativeDriver: true, delay: idx * 140 }),
+        import_react_native45.Animated.timing(a, { toValue: 0.3, duration: 420, useNativeDriver: true })
       ]);
-      const loop = import_react_native43.Animated.loop(seq);
+      const loop = import_react_native45.Animated.loop(seq);
       loops.push(loop);
       loop.start();
     });
@@ -5561,8 +5697,8 @@ function TypingIndicator({ style }) {
       loops.forEach((l) => l.stop());
     };
   }, [anims]);
-  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_react_native43.View, { style: [{ flexDirection: "row", alignItems: "center" }, style], children: anims.map((a, i) => /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
-    import_react_native43.Animated.View,
+  return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_react_native45.View, { style: [{ flexDirection: "row", alignItems: "center" }, style], children: anims.map((a, i) => /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+    import_react_native45.Animated.View,
     {
       style: {
         width: 8,
@@ -5571,7 +5707,7 @@ function TypingIndicator({ style }) {
         marginHorizontal: 3,
         backgroundColor: dotColor,
         opacity: a,
-        transform: [{ translateY: import_react_native43.Animated.multiply(import_react_native43.Animated.subtract(a, 0.3), 2) }]
+        transform: [{ translateY: import_react_native45.Animated.multiply(import_react_native45.Animated.subtract(a, 0.3), 2) }]
       }
     },
     i
@@ -5579,8 +5715,8 @@ function TypingIndicator({ style }) {
 }
 
 // src/components/chat/ChatMessageList.tsx
-var import_jsx_runtime46 = require("react/jsx-runtime");
-var ChatMessageList = React33.forwardRef(
+var import_jsx_runtime48 = require("react/jsx-runtime");
+var ChatMessageList = React35.forwardRef(
   ({
     messages,
     showTypingIndicator = false,
@@ -5591,23 +5727,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;
@@ -5616,16 +5752,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;
@@ -5635,42 +5762,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__ */ (0, import_jsx_runtime46.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
       import_bottom_sheet5.BottomSheetFlatList,
       {
         ref: listRef,
-        data: messages,
+        inverted: true,
+        data,
         keyExtractor: (m) => m.id,
-        keyboardDismissMode: import_react_native44.Platform.OS === "ios" ? "interactive" : "on-drag",
         keyboardShouldPersistTaps: "handled",
         onScroll: handleScroll,
         scrollEventThrottle: 16,
         showsVerticalScrollIndicator: false,
+        onContentSizeChange: () => {
+          if (initialScrollDoneRef.current) return;
+          initialScrollDoneRef.current = true;
+          lastMessageIdRef.current = messages.length > 0 ? messages[messages.length - 1].id : null;
+          nearBottomRef.current = true;
+          onNearBottomChange == null ? void 0 : onNearBottomChange(true);
+          requestAnimationFrame(() => scrollToBottom({ animated: false }));
+        },
         contentContainerStyle: [
           {
             paddingHorizontal: theme.spacing.lg,
-            paddingTop: theme.spacing.sm,
-            paddingBottom: theme.spacing.sm
+            paddingVertical: theme.spacing.sm
           },
           contentStyle
         ],
-        renderItem: ({ item, index }) => /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_react_native44.View, { style: { marginTop: index === 0 ? 0 : theme.spacing.sm }, children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(ChatMessageBubble, { message: item, renderContent: renderMessageContent }) }),
-        ListFooterComponent: /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(import_react_native44.View, { children: [
-          showTypingIndicator ? /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_react_native44.View, { style: { marginTop: theme.spacing.sm, alignSelf: "flex-start", paddingHorizontal: theme.spacing.lg }, children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(TypingIndicator, {}) }) : null,
-          bottomInset > 0 ? /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_react_native44.View, { style: { height: bottomInset } }) : null
+        ItemSeparatorComponent: () => /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_react_native46.View, { style: { height: theme.spacing.sm } }),
+        renderItem: ({ item }) => /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(ChatMessageBubble, { message: item, renderContent: renderMessageContent }),
+        ListHeaderComponent: /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(import_react_native46.View, { children: [
+          showTypingIndicator ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_react_native46.View, { style: { marginTop: theme.spacing.sm, alignSelf: "flex-start", paddingHorizontal: theme.spacing.lg }, children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(TypingIndicator, {}) }) : null,
+          bottomInset > 0 ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_react_native46.View, { style: { height: bottomInset } }) : null
         ] })
       }
     );
@@ -5679,7 +5808,7 @@ var ChatMessageList = React33.forwardRef(
 ChatMessageList.displayName = "ChatMessageList";
 
 // src/components/chat/ChatPage.tsx
-var import_jsx_runtime47 = require("react/jsx-runtime");
+var import_jsx_runtime49 = require("react/jsx-runtime");
 function ChatPage({
   header,
   messages,
@@ -5689,44 +5818,45 @@ function ChatPage({
   composer,
   overlay,
   style,
+  composerHorizontalPadding,
   onNearBottomChange,
   listRef
 }) {
   const theme = useTheme();
   const insets = (0, import_react_native_safe_area_context4.useSafeAreaInsets)();
-  const [composerHeight, setComposerHeight] = React34.useState(0);
-  const [keyboardVisible, setKeyboardVisible] = React34.useState(false);
-  React34.useEffect(() => {
-    if (import_react_native45.Platform.OS !== "ios") return;
-    const show = import_react_native45.Keyboard.addListener("keyboardWillShow", () => setKeyboardVisible(true));
-    const hide = import_react_native45.Keyboard.addListener("keyboardWillHide", () => setKeyboardVisible(false));
+  const [composerHeight, setComposerHeight] = React36.useState(0);
+  const [keyboardVisible, setKeyboardVisible] = React36.useState(false);
+  React36.useEffect(() => {
+    if (import_react_native47.Platform.OS !== "ios") return;
+    const show = import_react_native47.Keyboard.addListener("keyboardWillShow", () => setKeyboardVisible(true));
+    const hide = import_react_native47.Keyboard.addListener("keyboardWillHide", () => setKeyboardVisible(false));
     return () => {
       show.remove();
       hide.remove();
     };
   }, []);
-  const footerBottomPadding = import_react_native45.Platform.OS === "ios" ? keyboardVisible ? 0 : insets.bottom : insets.bottom + 10;
+  const footerBottomPadding = import_react_native47.Platform.OS === "ios" ? keyboardVisible ? 0 : insets.bottom : insets.bottom + 10;
   const overlayBottom = composerHeight + footerBottomPadding + theme.spacing.lg;
   const bottomInset = composerHeight + footerBottomPadding + theme.spacing.xl;
-  const resolvedOverlay = React34.useMemo(() => {
+  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__ */ (0, import_jsx_runtime47.jsxs)(import_react_native45.View, { style: [{ flex: 1 }, style], children: [
-    header ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_react_native45.View, { children: header }) : null,
-    topBanner ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_react_native45.View, { style: { paddingHorizontal: theme.spacing.lg, paddingTop: theme.spacing.sm }, children: topBanner }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(import_react_native45.View, { style: { flex: 1 }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
-        import_react_native45.View,
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_react_native47.View, { style: [{ flex: 1 }, style], children: [
+    header ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_react_native47.View, { children: header }) : null,
+    topBanner ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_react_native47.View, { style: { paddingHorizontal: theme.spacing.lg, paddingTop: theme.spacing.sm }, children: topBanner }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_react_native47.View, { style: { flex: 1 }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
+        import_react_native47.View,
         {
           style: { flex: 1 },
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
               ChatMessageList,
               {
                 ref: listRef,
@@ -5741,19 +5871,19 @@ function ChatPage({
           ]
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
-        import_react_native45.View,
+      /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+        import_react_native47.View,
         {
           style: {
             position: "absolute",
             left: 0,
             right: 0,
             bottom: 0,
-            paddingHorizontal: theme.spacing.lg,
+            paddingHorizontal: composerHorizontalPadding ?? theme.spacing.md,
             paddingTop: theme.spacing.sm,
             paddingBottom: footerBottomPadding
           },
-          children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
             ChatComposer,
             {
               ...composer,
@@ -5768,15 +5898,15 @@ function ChatPage({
 }
 
 // src/components/chat/ScrollToBottomButton.tsx
-var React35 = __toESM(require("react"));
-var import_react_native46 = require("react-native");
+var React37 = __toESM(require("react"));
+var import_react_native48 = require("react-native");
 var import_react_native_reanimated2 = __toESM(require("react-native-reanimated"));
-var import_jsx_runtime48 = require("react/jsx-runtime");
+var import_jsx_runtime50 = require("react/jsx-runtime");
 function ScrollToBottomButton({ visible, onPress, children, style }) {
   const theme = useTheme();
   const progress = (0, import_react_native_reanimated2.useSharedValue)(visible ? 1 : 0);
-  const [pressed, setPressed] = React35.useState(false);
-  React35.useEffect(() => {
+  const [pressed, setPressed] = React37.useState(false);
+  React37.useEffect(() => {
     progress.value = (0, import_react_native_reanimated2.withTiming)(visible ? 1 : 0, { duration: 200, easing: import_react_native_reanimated2.Easing.out(import_react_native_reanimated2.Easing.ease) });
   }, [progress, visible]);
   const animStyle = (0, import_react_native_reanimated2.useAnimatedStyle)(() => ({
@@ -5785,7 +5915,7 @@ function ScrollToBottomButton({ visible, onPress, children, style }) {
   }));
   const bg = theme.scheme === "dark" ? "rgba(39,39,42,0.9)" : "rgba(244,244,245,0.95)";
   const border = theme.scheme === "dark" ? withAlpha("#FFFFFF", 0.12) : withAlpha("#000000", 0.08);
-  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
     import_react_native_reanimated2.default.View,
     {
       pointerEvents: visible ? "auto" : "none",
@@ -5799,8 +5929,8 @@ function ScrollToBottomButton({ visible, onPress, children, style }) {
         style,
         animStyle
       ],
-      children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
-        import_react_native46.View,
+      children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+        import_react_native48.View,
         {
           style: {
             width: 44,
@@ -5818,8 +5948,8 @@ function ScrollToBottomButton({ visible, onPress, children, style }) {
             elevation: 5,
             opacity: pressed ? 0.85 : 1
           },
-          children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
-            import_react_native46.Pressable,
+          children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+            import_react_native48.Pressable,
             {
               onPress,
               onPressIn: () => setPressed(true),
@@ -5836,16 +5966,16 @@ function ScrollToBottomButton({ visible, onPress, children, style }) {
 }
 
 // src/components/chat/ChatHeader.tsx
-var import_react_native47 = require("react-native");
-var import_jsx_runtime49 = require("react/jsx-runtime");
+var import_react_native49 = require("react-native");
+var import_jsx_runtime51 = require("react/jsx-runtime");
 function ChatHeader({ left, right, center, style }) {
-  const flattenedStyle = import_react_native47.StyleSheet.flatten([
+  const flattenedStyle = import_react_native49.StyleSheet.flatten([
     {
       paddingTop: 0
     },
     style
   ]);
-  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
     StudioSheetHeader,
     {
       left,
@@ -5857,13 +5987,13 @@ function ChatHeader({ left, right, center, style }) {
 }
 
 // src/components/chat/ForkNoticeBanner.tsx
-var import_react_native48 = require("react-native");
-var import_jsx_runtime50 = require("react/jsx-runtime");
+var import_react_native50 = require("react-native");
+var import_jsx_runtime52 = require("react/jsx-runtime");
 function ForkNoticeBanner({ isOwner = true, title, description, style }) {
   const theme = useTheme();
   const resolvedTitle = title ?? (isOwner ? "Remixed app" : "Remix app");
   const resolvedDescription = description ?? (isOwner ? "Any changes you make will be a remix of the original app. You can view the edited version in the Remix tab in your apps page." : "Once you make edits, this remixed version will appear on your Remixed apps page.");
-  return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
     Card,
     {
       variant: "surfaceRaised",
@@ -5878,8 +6008,8 @@ function ForkNoticeBanner({ isOwner = true, title, description, style }) {
         },
         style
       ],
-      children: /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(import_react_native48.View, { style: { minWidth: 0 }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(import_react_native50.View, { style: { minWidth: 0 }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
           Text,
           {
             style: {
@@ -5893,7 +6023,7 @@ function ForkNoticeBanner({ isOwner = true, title, description, style }) {
             children: resolvedTitle
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
           Text,
           {
             style: {
@@ -5911,7 +6041,7 @@ function ForkNoticeBanner({ isOwner = true, title, description, style }) {
 }
 
 // src/studio/ui/ChatPanel.tsx
-var import_jsx_runtime51 = require("react/jsx-runtime");
+var import_jsx_runtime53 = require("react/jsx-runtime");
 function ChatPanel({
   title = "Chat",
   autoFocusComposer = false,
@@ -5931,9 +6061,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);
@@ -5947,25 +6077,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__ */ (0, import_jsx_runtime51.jsx)(
+  const header = /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
     ChatHeader,
     {
-      left: /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(import_react_native49.View, { style: { flexDirection: "row", alignItems: "center" }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(StudioSheetHeaderIconButton, { onPress: onBack, accessibilityLabel: "Back", style: { marginRight: 8 }, children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(IconBack, { size: 20, colorToken: "floatingContent" }) }),
-        onNavigateHome ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(StudioSheetHeaderIconButton, { onPress: onNavigateHome, accessibilityLabel: "Home", children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(IconHome, { size: 20, colorToken: "floatingContent" }) }) : null
+      left: /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(import_react_native51.View, { style: { flexDirection: "row", alignItems: "center" }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(StudioSheetHeaderIconButton, { onPress: onBack, accessibilityLabel: "Back", style: { marginRight: 8 }, children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(IconBack, { size: 20, colorToken: "floatingContent" }) }),
+        onNavigateHome ? /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(StudioSheetHeaderIconButton, { onPress: onNavigateHome, accessibilityLabel: "Home", children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(IconHome, { size: 20, colorToken: "floatingContent" }) }) : null
       ] }),
-      right: /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(import_react_native49.View, { style: { flexDirection: "row", alignItems: "center" }, children: [
-        onStartDraw ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(StudioSheetHeaderIconButton, { onPress: onStartDraw, accessibilityLabel: "Draw", intent: "danger", style: { marginRight: 8 }, children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(IconDraw, { size: 20, colorToken: "onDanger" }) }) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(StudioSheetHeaderIconButton, { onPress: onClose, accessibilityLabel: "Close", children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(IconClose, { size: 20, colorToken: "floatingContent" }) })
+      right: /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(import_react_native51.View, { style: { flexDirection: "row", alignItems: "center" }, children: [
+        onStartDraw ? /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(StudioSheetHeaderIconButton, { onPress: onStartDraw, accessibilityLabel: "Draw", intent: "danger", style: { marginRight: 8 }, children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(IconDraw, { size: 20, colorToken: "onDanger" }) }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(StudioSheetHeaderIconButton, { onPress: onClose, accessibilityLabel: "Close", children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(IconClose, { size: 20, colorToken: "floatingContent" }) })
       ] }),
       center: null
     }
   );
-  const topBanner = shouldForkOnEdit ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+  const topBanner = shouldForkOnEdit ? /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
     ForkNoticeBanner,
     {
       isOwner: !shouldForkOnEdit,
@@ -5974,32 +6104,33 @@ function ChatPanel({
   ) : null;
   const showMessagesLoading = Boolean(loading) && messages.length === 0 || forking;
   if (showMessagesLoading) {
-    return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(import_react_native49.View, { style: { flex: 1 }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_react_native49.View, { children: header }),
-      topBanner ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_react_native49.View, { style: { paddingHorizontal: 16, paddingTop: 8 }, children: topBanner }) : null,
-      /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(import_react_native49.View, { style: { flex: 1, alignItems: "center", justifyContent: "center", paddingHorizontal: 24, paddingVertical: 12 }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_react_native49.ActivityIndicator, {}),
-        /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_react_native49.View, { style: { height: 12 } }),
-        /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Text, { variant: "bodyMuted", children: forking ? "Creating your copy\u2026" : "Loading messages\u2026" })
+    return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(import_react_native51.View, { style: { flex: 1 }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_react_native51.View, { children: header }),
+      topBanner ? /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_react_native51.View, { style: { paddingHorizontal: 16, paddingTop: 8 }, children: topBanner }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(import_react_native51.View, { style: { flex: 1, alignItems: "center", justifyContent: "center", paddingHorizontal: 24, paddingVertical: 12 }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_react_native51.ActivityIndicator, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_react_native51.View, { style: { height: 12 } }),
+        /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Text, { variant: "bodyMuted", children: forking ? "Creating your copy\u2026" : "Loading messages\u2026" })
       ] })
     ] });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
     ChatPage,
     {
       header,
       messages,
       showTypingIndicator,
       topBanner,
+      composerHorizontalPadding: 0,
       listRef,
       onNearBottomChange: setNearBottom,
-      overlay: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+      overlay: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
         ScrollToBottomButton,
         {
           visible: !nearBottom,
           onPress: handleScrollToBottom,
           style: { bottom: 80 },
-          children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(IconArrowDown, { size: 20, colorToken: "floatingContent" })
+          children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(IconArrowDown, { size: 20, colorToken: "floatingContent" })
         }
       ),
       composer: {
@@ -6020,12 +6151,12 @@ function ChatPanel({
 }
 
 // src/components/dialogs/ConfirmMergeRequestDialog.tsx
-var React37 = __toESM(require("react"));
-var import_react_native51 = require("react-native");
+var React39 = __toESM(require("react"));
+var import_react_native53 = require("react-native");
 
 // src/components/primitives/Modal.tsx
-var import_react_native50 = require("react-native");
-var import_jsx_runtime52 = require("react/jsx-runtime");
+var import_react_native52 = require("react-native");
+var import_jsx_runtime54 = require("react/jsx-runtime");
 function Modal({
   visible,
   onRequestClose,
@@ -6034,30 +6165,30 @@ function Modal({
   contentStyle
 }) {
   const theme = useTheme();
-  return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
-    import_react_native50.Modal,
+  return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+    import_react_native52.Modal,
     {
       visible,
       transparent: true,
       animationType: "fade",
       onRequestClose,
-      children: /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(import_react_native50.View, { style: { flex: 1, backgroundColor: theme.colors.backdrop, justifyContent: "center", padding: theme.spacing.lg }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
-          import_react_native50.Pressable,
+      children: /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(import_react_native52.View, { style: { flex: 1, backgroundColor: theme.colors.backdrop, justifyContent: "center", padding: theme.spacing.lg }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+          import_react_native52.Pressable,
           {
             accessibilityRole: "button",
             onPress: dismissOnBackdropPress ? onRequestClose : void 0,
             style: { position: "absolute", inset: 0 }
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(Card, { variant: "surfaceRaised", padded: true, style: [{ borderRadius: theme.radii.xl }, contentStyle], children })
+        /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(Card, { variant: "surfaceRaised", padded: true, style: [{ borderRadius: theme.radii.xl }, contentStyle], children })
       ] })
     }
   );
 }
 
 // src/components/dialogs/ConfirmMergeRequestDialog.tsx
-var import_jsx_runtime53 = require("react/jsx-runtime");
+var import_jsx_runtime55 = require("react/jsx-runtime");
 function ConfirmMergeRequestDialog({
   visible,
   onOpenChange,
@@ -6068,14 +6199,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);
@@ -6087,7 +6218,7 @@ function ConfirmMergeRequestDialog({
     justifyContent: "center",
     alignSelf: "stretch"
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(
     Modal,
     {
       visible,
@@ -6098,7 +6229,7 @@ function ConfirmMergeRequestDialog({
         backgroundColor: theme.colors.background
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_react_native51.View, { children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_react_native53.View, { children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
           Text,
           {
             style: {
@@ -6110,9 +6241,9 @@ function ConfirmMergeRequestDialog({
             children: "Are you sure you want to approve this merge request?"
           }
         ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(import_react_native51.View, { style: { marginTop: 16 }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
-            import_react_native51.View,
+        /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(import_react_native53.View, { style: { marginTop: 16 }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+            import_react_native53.View,
             {
               style: [
                 fullWidthButtonBase,
@@ -6121,22 +6252,22 @@ function ConfirmMergeRequestDialog({
                   opacity: canConfirm ? 1 : 0.5
                 }
               ],
-              children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
-                import_react_native51.Pressable,
+              children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+                import_react_native53.Pressable,
                 {
                   accessibilityRole: "button",
                   accessibilityLabel: "Approve Merge",
                   disabled: !canConfirm,
                   onPress: handleConfirm,
                   style: [fullWidthButtonBase, { flex: 1 }],
-                  children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Text, { style: { textAlign: "center", color: theme.colors.onPrimary }, children: "Approve Merge" })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(Text, { style: { textAlign: "center", color: theme.colors.onPrimary }, children: "Approve Merge" })
                 }
               )
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_react_native51.View, { style: { height: 8 } }),
-          /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
-            import_react_native51.View,
+          /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_react_native53.View, { style: { height: 8 } }),
+          /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+            import_react_native53.View,
             {
               style: [
                 fullWidthButtonBase,
@@ -6147,22 +6278,22 @@ function ConfirmMergeRequestDialog({
                   opacity: isBuilding || !mergeRequest ? 0.5 : 1
                 }
               ],
-              children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
-                import_react_native51.Pressable,
+              children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+                import_react_native53.Pressable,
                 {
                   accessibilityRole: "button",
                   accessibilityLabel: isBuilding ? "Preparing\u2026" : "Test edits first",
                   disabled: isBuilding || !mergeRequest,
                   onPress: handleTestFirst,
                   style: [fullWidthButtonBase, { flex: 1 }],
-                  children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Text, { style: { textAlign: "center", color: theme.colors.text }, children: isBuilding ? "Preparing\u2026" : "Test edits first" })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(Text, { style: { textAlign: "center", color: theme.colors.text }, children: isBuilding ? "Preparing\u2026" : "Test edits first" })
                 }
               )
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_react_native51.View, { style: { height: 8 } }),
-          /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
-            import_react_native51.View,
+          /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_react_native53.View, { style: { height: 8 } }),
+          /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+            import_react_native53.View,
             {
               style: [
                 fullWidthButtonBase,
@@ -6172,14 +6303,14 @@ function ConfirmMergeRequestDialog({
                   borderColor: theme.colors.border
                 }
               ],
-              children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
-                import_react_native51.Pressable,
+              children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+                import_react_native53.Pressable,
                 {
                   accessibilityRole: "button",
                   accessibilityLabel: "Cancel",
                   onPress: close,
                   style: [fullWidthButtonBase, { flex: 1 }],
-                  children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Text, { style: { textAlign: "center", color: theme.colors.text }, children: "Cancel" })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(Text, { style: { textAlign: "center", color: theme.colors.text }, children: "Cancel" })
                 }
               )
             }
@@ -6191,7 +6322,7 @@ function ConfirmMergeRequestDialog({
 }
 
 // src/studio/ui/ConfirmMergeFlow.tsx
-var import_jsx_runtime54 = require("react/jsx-runtime");
+var import_jsx_runtime56 = require("react/jsx-runtime");
 function ConfirmMergeFlow({
   visible,
   onOpenChange,
@@ -6202,7 +6333,7 @@ function ConfirmMergeFlow({
   onConfirm,
   onTestFirst
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
     ConfirmMergeRequestDialog,
     {
       visible,
@@ -6223,8 +6354,94 @@ function ConfirmMergeFlow({
   );
 }
 
+// src/studio/hooks/useOptimisticChatMessages.ts
+var React40 = __toESM(require("react"));
+function makeOptimisticId() {
+  return `optimistic:${Date.now().toString(36)}:${Math.random().toString(36).slice(2, 10)}`;
+}
+function toEpochMs(createdAt) {
+  if (createdAt == null) return 0;
+  if (typeof createdAt === "number") return createdAt;
+  if (createdAt instanceof Date) return createdAt.getTime();
+  const t = Date.parse(String(createdAt));
+  return Number.isFinite(t) ? t : 0;
+}
+function isOptimisticResolvedByServer(chatMessages, o) {
+  if (o.failed) return false;
+  const normalize = (s) => s.trim();
+  let startIndex = -1;
+  if (o.baseServerLastId) {
+    startIndex = chatMessages.findIndex((m) => m.id === o.baseServerLastId);
+  }
+  const candidates = startIndex >= 0 ? chatMessages.slice(startIndex + 1) : chatMessages;
+  const target = normalize(o.content);
+  for (const m of candidates) {
+    if (m.author !== "human") continue;
+    if (normalize(m.content) !== target) continue;
+    const serverMs = toEpochMs(m.createdAt);
+    const optimisticMs = Date.parse(o.createdAtIso);
+    if (Number.isFinite(optimisticMs) && optimisticMs > 0 && serverMs > 0) {
+      if (serverMs + 12e4 < optimisticMs) continue;
+    }
+    return true;
+  }
+  return false;
+}
+function useOptimisticChatMessages({
+  threadId,
+  shouldForkOnEdit,
+  chatMessages,
+  onSendChat
+}) {
+  const [optimisticChat, setOptimisticChat] = 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
-var import_jsx_runtime55 = require("react/jsx-runtime");
+var import_jsx_runtime57 = require("react/jsx-runtime");
 function StudioOverlay({
   captureTargetRef,
   app,
@@ -6254,33 +6471,40 @@ function StudioOverlay({
   onNavigateHome
 }) {
   const theme = useTheme();
-  const { width } = (0, import_react_native52.useWindowDimensions)();
-  const [sheetOpen, setSheetOpen] = React38.useState(false);
-  const [activePage, setActivePage] = React38.useState("preview");
-  const [drawing, setDrawing] = React38.useState(false);
-  const [chatAttachments, setChatAttachments] = React38.useState([]);
-  const [commentsAppId, setCommentsAppId] = React38.useState(null);
-  const [commentsCount, setCommentsCount] = React38.useState(null);
-  const [confirmMrId, setConfirmMrId] = React38.useState(null);
-  const confirmMr = React38.useMemo(
+  const { width } = (0, import_react_native54.useWindowDimensions)();
+  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) import_react_native52.Keyboard.dismiss();
+    if (!open) import_react_native54.Keyboard.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 (import_react_native52.Platform.OS !== "ios") {
-      import_react_native52.Keyboard.dismiss();
+  const backToPreview = React41.useCallback(() => {
+    if (import_react_native54.Platform.OS !== "ios") {
+      import_react_native54.Keyboard.dismiss();
       setActivePage("preview");
       return;
     }
@@ -6292,15 +6516,15 @@ function StudioOverlay({
       clearTimeout(t);
       setActivePage("preview");
     };
-    const sub = import_react_native52.Keyboard.addListener("keyboardDidHide", finalize);
+    const sub = import_react_native54.Keyboard.addListener("keyboardDidHide", finalize);
     const t = setTimeout(finalize, 350);
-    import_react_native52.Keyboard.dismiss();
+    import_react_native54.Keyboard.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);
@@ -6309,7 +6533,7 @@ function StudioOverlay({
     },
     [openSheet]
   );
-  const toggleSheet = React38.useCallback(async () => {
+  const toggleSheet = React41.useCallback(async () => {
     if (!sheetOpen) {
       const shouldExitTest = Boolean(testingMrId) || isTesting;
       if (shouldExitTest) {
@@ -6321,7 +6545,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);
@@ -6329,14 +6553,14 @@ function StudioOverlay({
     },
     [closeSheet, onTestMr]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(import_jsx_runtime55.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(EdgeGlowFrame, { visible: isTesting, role: "accent", thickness: 40, intensity: 1 }),
-    /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(StudioBottomSheet, { open: sheetOpen, onOpenChange: handleSheetOpenChange, children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(import_jsx_runtime57.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(EdgeGlowFrame, { visible: isTesting, role: "accent", thickness: 40, intensity: 1 }),
+    /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(StudioBottomSheet, { open: sheetOpen, onOpenChange: handleSheetOpenChange, children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
       StudioSheetPager,
       {
         activePage,
         width,
-        preview: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+        preview: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
           PreviewPanel,
           {
             app,
@@ -6362,10 +6586,10 @@ function StudioOverlay({
             commentCountOverride: commentsCount ?? void 0
           }
         ),
-        chat: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+        chat: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
           ChatPanel,
           {
-            messages: chatMessages,
+            messages: optimistic.messages,
             showTypingIndicator: chatShowTypingIndicator,
             loading: chatLoading,
             sendDisabled: chatSendDisabled,
@@ -6380,12 +6604,12 @@ function StudioOverlay({
             onClose: closeSheet,
             onNavigateHome,
             onStartDraw: startDraw,
-            onSend: onSendChat
+            onSend: optimistic.onSend
           }
         )
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
       FloatingDraggableButton,
       {
         visible: !sheetOpen && !drawing,
@@ -6393,10 +6617,10 @@ function StudioOverlay({
         badgeCount: incomingMergeRequests.length,
         onPress: toggleSheet,
         isLoading: (app == null ? void 0 : app.status) === "editing",
-        children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_react_native52.View, { style: { width: 28, height: 28, alignItems: "center", justifyContent: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(MergeIcon, { width: 24, height: 24, color: theme.colors.floatingContent }) })
+        children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_react_native54.View, { style: { width: 28, height: 28, alignItems: "center", justifyContent: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(MergeIcon, { width: 24, height: 24, color: theme.colors.floatingContent }) })
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
       DrawModeOverlay,
       {
         visible: drawing,
@@ -6405,7 +6629,7 @@ function StudioOverlay({
         onCapture: handleDrawCapture
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
       ConfirmMergeFlow,
       {
         visible: Boolean(confirmMr),
@@ -6418,7 +6642,7 @@ function StudioOverlay({
         onTestFirst: handleTestMr
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
       AppCommentsSheet,
       {
         appId: commentsAppId,
@@ -6431,7 +6655,7 @@ function StudioOverlay({
 }
 
 // src/studio/ComergeStudio.tsx
-var import_jsx_runtime56 = require("react/jsx-runtime");
+var import_jsx_runtime58 = require("react/jsx-runtime");
 function ComergeStudio({
   appId,
   apiKey,
@@ -6439,17 +6663,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(() => import_react_native53.Platform.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(() => import_react_native55.Platform.OS === "ios" ? "ios" : "android", []);
+  React42.useEffect(() => {
     setActiveAppId(appId);
     setRuntimeAppId(appId);
     setPendingRuntimeTargetAppId(null);
   }, [appId]);
-  const captureTargetRef = React39.useRef(null);
-  return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(StudioBootstrap, { apiKey, children: ({ userId }) => /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_bottom_sheet6.BottomSheetModalProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+  const captureTargetRef = React42.useRef(null);
+  return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(StudioBootstrap, { apiKey, children: ({ userId }) => /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_bottom_sheet6.BottomSheetModalProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(LiquidGlassResetProvider, { resetTriggers: [appId, activeAppId, runtimeAppId], children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
     ComergeStudioInner,
     {
       userId,
@@ -6465,7 +6689,7 @@ function ComergeStudio({
       captureTargetRef,
       style
     }
-  ) }) });
+  ) }) }) });
 }
 function ComergeStudioInner({
   userId,
@@ -6484,11 +6708,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") {
@@ -6505,13 +6729,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]);
@@ -6533,18 +6782,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__ */ (0, import_jsx_runtime56.jsx)(import_react_native53.View, { style: [{ flex: 1 }, style], children: /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(import_react_native53.View, { ref: captureTargetRef, style: { flex: 1 }, collapsable: false, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(RuntimeRenderer, { appKey, bundlePath: bundle.bundlePath, renderToken: bundle.renderToken }),
-    /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_react_native55.View, { style: [{ flex: 1 }, style], children: /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(import_react_native55.View, { ref: captureTargetRef, style: { flex: 1 }, collapsable: false, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+      RuntimeRenderer,
+      {
+        appKey,
+        bundlePath: bundle.bundlePath,
+        forcePreparing: showPostEditPreparing,
+        renderToken: bundle.renderToken
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
       StudioOverlay,
       {
         captureTargetRef,