yeet

modules/collectibles/profile_frames/native/EditProfileFrameSection.tsx

@@ -0,0 +1,75 @@
+// Metro module 13728 (f13729).
+import { memo, useCallback } from "react";
+import { View } from "react-native";
+import { isProfileFrameRecord } from "../../records/ProfileFrameRecord";
+import { PROFILE_FRAME_ASPECT_RATIO } from "./ProfileFrameConstants";
+import Module712 from "../../../../_bundle/Module712";
+import { createStyles } from "../../../../design/components/Styles/native/createStyles";
+import { GUTTER_SIZE, ROW_SIZE } from "../../native/useCollectibleListLayout";
+import { NONE_ITEM, SHOP_ITEM } from "../hooks/useProfileFrameSections";
+import { EditCollectiblesListItemNone, EditCollectiblesListItemShop, EditCollectiblesListItemProduct } from "../../native/CollectiblesEditUserProfileListItems";
+import AnalyticsLocation from "../../../app_analytics/AnalyticsLocation";
+import ProfileFrameSamplePreview from "./previews/ProfileFrameSamplePreview";
+let Component;
+const PX_8 = Module712.space.PX_8;
+const useStyles = createStyles({
+  row: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    paddingHorizontal: GUTTER_SIZE
+  },
+  rowSpacer: {
+    height: GUTTER_SIZE
+  },
+  previewContainer: {
+    width: "100%",
+    height: "100%",
+    paddingVertical: PX_8,
+    overflow: "hidden",
+    alignItems: "center",
+    justifyContent: "center"
+  }
+});
+const r49 = memo(({ items, selectedSkuId, setSelectedProfileFrame, guildId, size }) => {
+  const styles = useStyles();
+  const callback = useCallback(() => {
+    setSelectedProfileFrame(null);
+  }, [setSelectedProfileFrame]);
+  return <>
+    <View style={styles.row}>
+      {[...items, null, null].slice(0, ROW_SIZE).map((item, index) => {
+        if (item === NONE_ITEM) {
+          return <EditCollectiblesListItemNone key="none" size={size} onPress={callback} isSelected={selectedSkuId == null} asDefault={guildId != null} />;
+        }
+        if (item === SHOP_ITEM) {
+          return <EditCollectiblesListItemShop key="shop" size={size} analyticsSource={AnalyticsLocation.EDIT_PROFILE_FRAME_SHEET} />;
+        }
+        if (isProfileFrameRecord(item)) {
+          return <Component key={item.skuId} profileFrame={item} isSelected={selectedSkuId === item.skuId} setSelectedProfileFrame={setSelectedProfileFrame} size={size} />;
+        }
+        return <View key={index} style={{
+          height: size,
+          width: size
+        }} />;
+      })}
+    </View>
+    <View style={styles.rowSpacer} />
+  </>;
+});
+r49.displayName = "EditProfileFrameRow";
+Component = memo(({ profileFrame, isSelected, setSelectedProfileFrame: setSelectedProfileFrame2, size: size2 }) => {
+  const styles = useStyles();
+  return <EditCollectiblesListItemProduct skuId={profileFrame.skuId} isSelected={isSelected} onPress={useCallback(() => {
+    setSelectedProfileFrame2({
+      skuId: profileFrame.skuId,
+      type: profileFrame.type
+    });
+  }, [setSelectedProfileFrame2, profileFrame])} size={size2} accessibilityLabel={profileFrame.label}>
+    <View style={styles.previewContainer}>
+      <ProfileFrameSamplePreview profileFrame={profileFrame} previewWidth={size2 * PROFILE_FRAME_ASPECT_RATIO} previewHeight={size2 - 2 * PX_8} profileBackgroundColor={Module712.colors.BACKGROUND_BASE_LOW} />
+    </View>
+  </EditCollectiblesListItemProduct>;
+});
+Component.displayName = "EditProfileFrameItem";
+export { r49 as EditProfileFrameRow };

modules/collectibles/profile_frames/native/ProfileFrame.tsx

@@ -0,0 +1,110 @@
+// Metro module 8097 (f8098).
+import { useMemo } from "react";
+import { View, StyleSheet } from "react-native";
+import { useFramePreviewOverrideStore } from "./tooling/FramePreviewOverrideStore";
+import { PROFILE_FRAME_RESPONSIVE_RAIL_MIN_ASPECT_RATIO, PROFILE_FRAME_Z_INDEX } from "./ProfileFrameConstants";
+import { UserProfileThemeTypes } from "../../../user_profile/native/Constants";
+import { createStyles } from "../../../../design/components/Styles/native/createStyles";
+import useProfileFrameLayerAsset from "./useProfileFrameLayerAsset";
+import FastImage from "../../../../components_native/common/FastImage";
+import scaleProfileFrame from "../scaleProfileFrame";
+import FramePreviewOverrideFrame from "./tooling/FramePreviewOverrideFrame";
+let useStyles, LiveProfileFrame;
+const ProfileFrameLayer = function ProfileFrameLayer(props) {
+  const { skuId, layer, overflowTop, overflowBottom, overflowHorizontal, containerWidth: containerWidth2, containerHeight: containerHeight2 } = props;
+  const styles = useStyles();
+  const width = containerWidth2 + 2 * overflowHorizontal;
+  const profileFrameLayerAsset = useProfileFrameLayerAsset({
+    skuId,
+    layer,
+    width
+  });
+  const { assetUrl, imageHeight } = profileFrameLayerAsset;
+  const memo = useMemo(() => {
+    const r1 = {
+      left: -overflowHorizontal,
+      right: -overflowHorizontal,
+      zIndex: PROFILE_FRAME_Z_INDEX[layer.order]
+    };
+    const type = layer.type;
+    if (type === "staple") {
+      return {
+        ...r1,
+        top: layer.anchor === "top" ? -overflowTop : void 0,
+        bottom: layer.anchor === "bottom" ? -overflowBottom : void 0
+      };
+    }
+    if (type === "rail") {
+      return {
+        ...r1,
+        justifyContent: layer.anchor !== "center" ? layer.anchor === "top" ? "flex-start" : "flex-end" : "center"
+      };
+    }
+    return {
+      ...r1,
+      left: -overflowHorizontal
+    };
+  }, [layer.anchor, layer.type, layer.order, overflowTop, overflowBottom, overflowHorizontal]);
+  const r1 = layer.responsive === true && layer.type === "rail" && containerHeight2 != null && containerWidth2 / containerHeight2 >= PROFILE_FRAME_RESPONSIVE_RAIL_MIN_ASPECT_RATIO;
+  if (imageHeight !== 0 && assetUrl != null && !r1) {
+    if (layer.type === "border") {
+      if (containerHeight2 != null && containerHeight2 !== 0) {
+        return <View style={[styles.layer, memo]}>
+          {Array.from({
+            length: Math.ceil(containerHeight2 / imageHeight)
+          }, (a0, a1) => <FastImage key={a1} source={{
+            uri: assetUrl
+          }} resizeMode="cover" width={width} height={imageHeight} />)}
+        </View>;
+      }
+      return null;
+    }
+    return <View style={[styles.layer, memo]}>
+      <FastImage source={{
+        uri: assetUrl
+      }} resizeMode="cover" width={width} height={imageHeight} />
+    </View>;
+  }
+  return null;
+};
+LiveProfileFrame = function LiveProfileFrame(props) {
+  let overflowTop2, overflowBottom2, overflowHorizontal2;
+  const { frame, containerWidth, containerHeight, profileThemeType, frameOrder, filterLayer } = props;
+  overflowTop2 = void 0;
+  overflowBottom2 = void 0;
+  overflowHorizontal2 = void 0;
+  const styles = useStyles();
+  const memo = useMemo(() => frame.layers.filter((layer) => {
+    let r1 = frameOrder == null || frameOrder === layer.order;
+    if (r1) {
+      const r0 = filterLayer != null && !filterLayer(layer);
+      r1 = r0 ? !r0 : profileThemeType === UserProfileThemeTypes.PREVIEW || layer.anchor === "top" && layer.type === "staple";
+    }
+    return r1;
+  }), [frame.layers, frameOrder, profileThemeType, filterLayer]);
+  if (memo.length !== 0 && containerWidth !== 0) {
+    const r24 = scaleProfileFrame(frame, containerWidth);
+    overflowTop2 = r24.overflowTop;
+    overflowBottom2 = r24.overflowBottom;
+    overflowHorizontal2 = r24.overflowHorizontal;
+    return <View style={styles.container}>
+      {memo.map((item) => <ProfileFrameLayer key={item.id} skuId={frame.skuId} layer={item} overflowTop={overflowTop2} overflowBottom={overflowBottom2} overflowHorizontal={overflowHorizontal2} containerWidth={containerWidth} containerHeight={containerHeight} />)}
+    </View>;
+  }
+  return null;
+};
+useStyles = createStyles({
+  container: {
+    ...StyleSheet.absoluteFillObject,
+    pointerEvents: "none"
+  },
+  layer: {
+    ...StyleSheet.absoluteFillObject,
+    alignItems: "center",
+    overflow: "hidden"
+  }
+});
+export default function ProfileFrame(props) {
+  const framePreviewOverrideStore = useFramePreviewOverrideStore((a0) => a0.override);
+  return framePreviewOverrideStore != null ? <FramePreviewOverrideFrame override={framePreviewOverrideStore} {...props} /> : <LiveProfileFrame {...props} />;
+};

modules/collectibles/profile_frames/native/ProfileFrameConstants.tsx

@@ -0,0 +1,8 @@
+// Metro module 8098 (f8099).
+import { ProfileFrameLayerOrder } from "../../../../_bundle/Module8088";
+const r11 = {};
+r11[ProfileFrameLayerOrder.FRONT] = 3;
+r11[ProfileFrameLayerOrder.BACK] = 2;
+export const PROFILE_FRAME_RESPONSIVE_RAIL_MIN_ASPECT_RATIO = 0.625;
+export const PROFILE_FRAME_ASPECT_RATIO = 0.66;
+export { r11 as PROFILE_FRAME_Z_INDEX };

modules/collectibles/profile_frames/native/previews/ProfileFrameSamplePreview.tsx

@@ -0,0 +1,146 @@
+// Metro module 8694 (f8695).
+import { StyleSheet, View } from "react-native";
+import { SAMPLE_PROFILE_ASPECT_RATIO } from "../../../native/CollectiblesPreviewConstants";
+import { UserProfileThemeTypes } from "../../../../user_profile/native/Constants";
+import { createStyles } from "../../../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../../../_bundle/Module712";
+import scaleProfileFrame from "../../scaleProfileFrame";
+import { useToken } from "../../../../../design/tokens/native/useToken";
+import ProfileFrame from "../ProfileFrame";
+import { ProfileFrameLayerOrder } from "../../../../../_bundle/Module8088";
+import Module5165 from "../../../../../_bundle/Module5165";
+import FastImage from "../../../../../components_native/common/FastImage";
+import Module8695 from "../../../../../_bundle/Module8695";
+let useStyles;
+const filterLayer = function filterLayer(a0) {
+  return a0.responsive !== true;
+};
+useStyles = createStyles({
+  profileFrameContainer: {
+    flex: 1
+  },
+  profileContainer: {
+    flex: 1,
+    overflow: "hidden",
+    borderWidth: 1,
+    borderColor: Module712.colors.BORDER_NORMAL,
+    borderRadius: Module712.radii.xs
+  },
+  sampleProfile: {
+    width: "100%",
+    aspectRatio: SAMPLE_PROFILE_ASPECT_RATIO
+  }
+});
+export default function ProfileFrameSamplePreview(props) {
+  const { profileFrame, previewWidth, previewHeight, profileBackgroundColor } = props;
+  const styles = useStyles();
+  const innerWidth = profileFrame.innerWidth;
+  const containerWidth = previewWidth * innerWidth / (innerWidth + 2 * profileFrame.overflowHorizontal);
+  const r37 = scaleProfileFrame(profileFrame, containerWidth);
+  const { overflowTop, overflowBottom, overflowHorizontal } = r37;
+  const token = useToken(profileBackgroundColor);
+  let r9 = <ProfileFrame frame={profileFrame} filterLayer={filterLayer} profileThemeType={UserProfileThemeTypes.PREVIEW} frameOrder={ProfileFrameLayerOrder.BACK} containerWidth={containerWidth} containerHeight={previewHeight} />;
+  const xs = Module712.radii.xs;
+  const r104 = <Module5165 style={{
+    position: "absolute",
+    top: -overflowTop,
+    bottom: -overflowBottom,
+    left: -overflowHorizontal,
+    right: -overflowHorizontal
+  }} maskElement={<View style={StyleSheet.absoluteFill}>
+    <View style={{
+      position: "absolute",
+      top: 0,
+      left: 0,
+      right: 0,
+      height: overflowTop,
+      backgroundColor: "black"
+    }} />
+    <View style={{
+      position: "absolute",
+      bottom: 0,
+      left: 0,
+      right: 0,
+      height: overflowBottom,
+      backgroundColor: "black"
+    }} />
+    <View style={{
+      position: "absolute",
+      top: overflowTop,
+      bottom: overflowBottom,
+      left: 0,
+      width: overflowHorizontal,
+      backgroundColor: "black"
+    }} />
+    <View style={{
+      position: "absolute",
+      top: overflowTop,
+      bottom: overflowBottom,
+      right: 0,
+      width: overflowHorizontal,
+      backgroundColor: "black"
+    }} />
+    <View style={{
+      position: "absolute",
+      top: overflowTop - xs,
+      left: overflowHorizontal - xs,
+      width: 2 * xs,
+      height: 2 * xs,
+      borderRadius: xs,
+      backgroundColor: "black"
+    }} />
+    <View style={{
+      position: "absolute",
+      top: overflowTop - xs,
+      right: overflowHorizontal - xs,
+      width: 2 * xs,
+      height: 2 * xs,
+      borderRadius: xs,
+      backgroundColor: "black"
+    }} />
+    <View style={{
+      position: "absolute",
+      bottom: overflowBottom - xs,
+      left: overflowHorizontal - xs,
+      width: 2 * xs,
+      height: 2 * xs,
+      borderRadius: xs,
+      backgroundColor: "black"
+    }} />
+    <View style={{
+      position: "absolute",
+      bottom: overflowBottom - xs,
+      right: overflowHorizontal - xs,
+      width: 2 * xs,
+      height: 2 * xs,
+      borderRadius: xs,
+      backgroundColor: "black"
+    }} />
+  </View>}>
+    <View style={{
+      marginTop: overflowTop,
+      marginBottom: overflowBottom,
+      marginHorizontal: overflowHorizontal,
+      flex: 1
+    }}>{r9}</View>
+  </Module5165>;
+  if (profileBackgroundColor == null) {
+    r9 = r104;
+  }
+  return <View style={[styles.profileFrameContainer, {
+    width: containerWidth,
+    marginTop: overflowTop,
+    marginBottom: overflowBottom,
+    marginHorizontal: overflowHorizontal
+  }]}>
+    {r9}
+    <View style={[styles.profileContainer, token != null && {
+      backgroundColor: token
+    }]}>
+      <FastImage source={{
+        uri: Module8695
+      }} style={styles.sampleProfile} resizeMode="cover" />
+    </View>
+    <ProfileFrame frame={profileFrame} filterLayer={filterLayer} profileThemeType={UserProfileThemeTypes.PREVIEW} frameOrder={ProfileFrameLayerOrder.FRONT} containerWidth={containerWidth} containerHeight={previewHeight - overflowTop - overflowBottom} />
+  </View>;
+};

modules/collectibles/profile_frames/native/previews/ProfileFrameUserPreview.tsx

@@ -0,0 +1,9 @@
+// Metro module 8745 (f8746).
+import UserProfilePreview from "../../../../user_profile/native/UserProfilePreview";
+import { intl, t } from "../../../../../intl/index.native";
+export default function ProfileFrameUserPreview(props) {
+  const { profileFrame, ...props2 } = props;
+  return <UserProfilePreview profileFrameOverride={profileFrame} accessibilityLabel={profileFrame != null ? intl.formatToPlainString(t["DT/PwH"], {
+    a11y_text: profileFrame.label
+  }) : intl.string(t.vQx51z)} {...props2} />;
+};

modules/collectibles/profile_frames/native/tooling/FrameOverrideConstants.tsx

@@ -0,0 +1,3 @@
+// Metro module 8085 (f8086).
+export const OVERRIDE_DIR = "frame_override";
+export const MANIFEST_NAME = "manifest.json";

modules/collectibles/profile_frames/native/tooling/FramePreviewOverrideFrame.tsx

@@ -0,0 +1,108 @@
+// Metro module 8100 (f8101).
+import { useMemo } from "react";
+import { View, StyleSheet } from "react-native";
+import { PROFILE_FRAME_RESPONSIVE_RAIL_MIN_ASPECT_RATIO, PROFILE_FRAME_Z_INDEX } from "../ProfileFrameConstants";
+import { UserProfileThemeTypes } from "../../../../user_profile/native/Constants";
+import { createStyles } from "../../../../../design/components/Styles/native/createStyles";
+import FastImage from "../../../../../components_native/common/FastImage";
+let useStyles;
+const OverrideProfileFrameLayer = function OverrideProfileFrameLayer(props) {
+  const { layer, uri, ratio, overflowTop, overflowBottom, overflowHorizontal, containerWidth: containerWidth2, containerHeight: containerHeight2 } = props;
+  const styles = useStyles();
+  const width = containerWidth2 + 2 * overflowHorizontal;
+  const height = ratio * width;
+  const memo = useMemo(() => {
+    const r1 = {
+      left: -overflowHorizontal,
+      right: -overflowHorizontal,
+      zIndex: PROFILE_FRAME_Z_INDEX[layer.order]
+    };
+    const type = layer.type;
+    if (type === "staple") {
+      return {
+        ...r1,
+        top: layer.anchor === "top" ? -overflowTop : void 0,
+        bottom: layer.anchor === "bottom" ? -overflowBottom : void 0
+      };
+    }
+    if (type === "rail") {
+      return {
+        ...r1,
+        justifyContent: layer.anchor !== "center" ? layer.anchor === "top" ? "flex-start" : "flex-end" : "center"
+      };
+    }
+    return {
+      ...r1,
+      left: -overflowHorizontal
+    };
+  }, [layer.anchor, layer.type, layer.order, overflowTop, overflowBottom, overflowHorizontal]);
+  const r2 = layer.responsive === true && layer.type === "rail" && containerHeight2 != null && containerWidth2 / containerHeight2 >= PROFILE_FRAME_RESPONSIVE_RAIL_MIN_ASPECT_RATIO;
+  if (height !== 0 && uri != null && !r2) {
+    if (layer.type === "border") {
+      if (containerHeight2 != null && containerHeight2 !== 0) {
+        return <View style={[styles.layer, memo]}>
+          {Array.from({
+            length: Math.ceil(containerHeight2 / height)
+          }, (a0, a1) => <FastImage key={a1} source={{
+            uri
+          }} resizeMode="cover" width={width} height={height} />)}
+        </View>;
+      }
+      return null;
+    }
+    return <View style={[styles.layer, memo]}>
+      <FastImage source={{
+        uri
+      }} resizeMode="cover" width={width} height={height} />
+    </View>;
+  }
+  return null;
+};
+useStyles = createStyles({
+  container: {
+    ...StyleSheet.absoluteFillObject,
+    pointerEvents: "none"
+  },
+  layer: {
+    ...StyleSheet.absoluteFillObject,
+    alignItems: "center",
+    overflow: "hidden"
+  }
+});
+export default function FramePreviewOverrideFrame(props) {
+  let overflowTop2, overflowBottom2, overflowHorizontal2;
+  const { override, containerWidth, containerHeight, profileThemeType, frameOrder, filterLayer } = props;
+  overflowTop2 = void 0;
+  overflowBottom2 = void 0;
+  overflowHorizontal2 = void 0;
+  const styles = useStyles();
+  const memo = useMemo(() => override.layers.filter((layer) => {
+    let r1 = frameOrder == null || frameOrder === layer.order;
+    if (r1) {
+      const r0 = filterLayer != null && !filterLayer(layer);
+      r1 = r0 ? !r0 : profileThemeType === UserProfileThemeTypes.PREVIEW || layer.anchor === "top" && layer.type === "staple";
+    }
+    return r1;
+  }), [override.layers, frameOrder, profileThemeType, filterLayer]);
+  if (memo.length !== 0 && containerWidth !== 0) {
+    const r21 = containerWidth / override.innerWidth;
+    overflowTop2 = override.overflowTop * r21;
+    overflowBottom2 = override.overflowBottom * r21;
+    overflowHorizontal2 = override.overflowHorizontal * r21;
+    return <View style={styles.container}>
+      {memo.map((item) => {
+        const r10 = override.layerAssetById[item.id];
+        let uri2 = r10?.uri;
+        if (uri2 == null) {
+          uri2 = null;
+        }
+        let ratio = r10?.ratio;
+        if (ratio == null) {
+          ratio = 0;
+        }
+        return <OverrideProfileFrameLayer key={item.id} layer={item} uri={uri2} ratio={ratio} overflowTop={overflowTop2} overflowBottom={overflowBottom2} overflowHorizontal={overflowHorizontal2} containerWidth={containerWidth} containerHeight={containerHeight} />;
+      })}
+    </View>;
+  }
+  return null;
+};

modules/collectibles/profile_frames/native/tooling/FramePreviewOverrideStore.tsx

@@ -0,0 +1,321 @@
+// Metro module 8084 (f8085).
+import { Image } from "react-native";
+import { OVERRIDE_DIR, MANIFEST_NAME } from "./FrameOverrideConstants";
+import Logger from "../../../../debug/Logger";
+import { readFile } from "../../../../../utils/FileManagerUtils.android";
+import Module1271 from "../../../../../_bundle/Module1271";
+import { compareLayerFiles, parseLayerFilename, PARSE_ERROR_LABELS, FOLDER_ORDER_MAP } from "../../tooling/ProfileFrameLayerParser";
+import { computeProfileFrameDimensions } from "../../tooling/computeProfileFrameDimensions";
+import { create } from "../../../../../_bundle/Module644";
+function $mk115102($env) {
+  return function buildOverride() {
+    return $env[11].apply(this, arguments);
+  };
+}
+let c5129_7;
+let env5129 = {};
+const measure = function measure(c16241_0) {
+  return new Promise((c26101_0, c26101_1) => {
+    Image.getSize(c16241_0, (a0, a1) => c26101_0({
+      width: a0,
+      height: a1
+    }), (a0) => c26101_1(a0 instanceof Error ? a0 : new Error(String(a0))));
+  });
+};
+env5129[10] = function _readManifest() {
+  const r8 = async () => {
+    let c29886_0 = await readFile("documents", `${OVERRIDE_DIR}/${MANIFEST_NAME}`, "utf8");
+    return c29886_0 != null ? JSON.parse(c29886_0) : null;
+  };
+  env5129[10] = r8;
+  return r8.apply(this, arguments);
+};
+env5129[11] = function _buildOverride() {
+  const r8 = async (c26103_0) => {
+    let r44, r331, r400;
+    let c26103_1, layers, c26103_3, c26103_4, c26103_5;
+    let c26103_6 = 0;
+    const r10 = "Malformed manifest (no layers). Re-push the frame.";
+    const r9 = env5129;
+    L37: {
+      try {
+        let env29887;
+        c26103_4 = r9;
+        const r26 = env29887 = {};
+        c26103_3 = r26;
+        env29887[0] = c26103_0;
+        env29887[1] = void 0;
+        env29887[2] = void 0;
+        env29887[3] = void 0;
+        env29887[4] = void 0;
+        env29887[5] = void 0;
+        env29887[6] = void 0;
+        env29887[7] = void 0;
+        env29887[8] = void 0;
+        env29887[9] = void 0;
+        env29887[10] = void 0;
+        env29887[11] = void 0;
+        env29887[12] = void 0;
+        env29887[13] = void 0;
+        env29887[14] = void 0;
+        env29887[15] = void 0;
+        env29887[16] = void 0;
+        env29887[17] = void 0;
+        if (!Array.isArray(c26103_0.layers)) {
+          throw new Error(r10);
+        }
+        env29887[1] = `file://${Module1271.getConstants().DocumentsDirPath}/${OVERRIDE_DIR}`;
+        env29887[2] = [];
+        env29887[3] = {};
+        env29887[4] = [];
+        layers = c26103_0.layers;
+        const r72 = layers[Symbol.iterator]();
+        layers = r72.next;
+        c26103_1 = r72;
+        let r79 = c26103_1;
+        const r80 = r79 === void 0 ? void 0 : (r44 = layers.call(r79)).done ? r79 = void 0 : r44.value;
+        c26103_1 = r79;
+        if (r79 === void 0) {
+          if (env29887[2].length === 0) {
+            throw new Error("Frame has no valid layers.");
+          }
+          env29887[2].sort(compareLayerFiles);
+          env29887[17] = computeProfileFrameDimensions(env29887[4]);
+          r400 = {
+            frameKey: env29887[0].frameKey,
+            previewUri: env29887[0].preview != null ? `${env29887[1]}/${env29887[0].preview}` : null,
+            layers: env29887[2].map((item) => item.layer),
+            layerAssetById: env29887[3],
+            ...env29887[17]
+          };
+          break L37;
+        }
+        c26103_6 = 1;
+        env29887[5] = r80;
+        env29887[6] = env29887[5].folder;
+        env29887[7] = env29887[5].filename;
+        env29887[8] = parseLayerFilename(env29887[7]);
+        env29887[9] = env29887[8].parsed;
+        env29887[10] = env29887[8].errorType;
+        if (env29887[9] == null) {
+          env29887[11] = env29887[10] != null ? PARSE_ERROR_LABELS[env29887[10]] : "invalid";
+          throw new Error(`Bad layer file "${env29887[6]}/${env29887[7]}": ${env29887[11]}`);
+        }
+        env29887[12] = FOLDER_ORDER_MAP[env29887[6]];
+        env29887[13] = `override-${env29887[12]}-${env29887[9].index}`;
+        env29887[14] = `${env29887[1]}/${env29887[6]}/${env29887[7]}`;
+        env29887[15] = {
+          id: env29887[13],
+          type: env29887[9].type,
+          order: env29887[12],
+          anchor: env29887[9].anchor,
+          responsive: env29887[9].responsive
+        };
+        let r143 = await (0, measure)(env29887[14]);
+        while (true) {
+          env29887[16] = r143;
+          env29887[2].push({
+            layer: env29887[15],
+            order: env29887[12],
+            index: env29887[9].index
+          });
+          env29887[3][env29887[13]] = {
+            uri: env29887[14],
+            ratio: env29887[16].width > 0 ? env29887[16].height / env29887[16].width : 0
+          };
+          env29887[4].push({
+            layer: env29887[15],
+            dims: env29887[16]
+          });
+          c26103_6 = 0;
+          let r194 = c26103_1;
+          const r195 = r194 === void 0 ? void 0 : (r44 = layers.call(r194)).done ? r194 = void 0 : r44.value;
+          c26103_1 = r194;
+          if (r194 === void 0) {
+            if (env29887[2].length === 0) {
+              throw new Error("Frame has no valid layers.");
+            }
+            env29887[2].sort(compareLayerFiles);
+            env29887[17] = computeProfileFrameDimensions(env29887[4]);
+            r331 = {
+              frameKey: env29887[0].frameKey,
+              previewUri: env29887[0].preview != null ? `${env29887[1]}/${env29887[0].preview}` : null,
+              layers: env29887[2].map((item) => item.layer),
+              layerAssetById: env29887[3],
+              ...env29887[17]
+            };
+            break;
+          }
+          c26103_6 = 1;
+          env29887[5] = r195;
+          env29887[6] = env29887[5].folder;
+          env29887[7] = env29887[5].filename;
+          env29887[8] = parseLayerFilename(env29887[7]);
+          env29887[9] = env29887[8].parsed;
+          env29887[10] = env29887[8].errorType;
+          if (env29887[9] == null) {
+            env29887[11] = env29887[10] != null ? PARSE_ERROR_LABELS[env29887[10]] : "invalid";
+            throw new Error(`Bad layer file "${env29887[6]}/${env29887[7]}": ${env29887[11]}`);
+          }
+          env29887[12] = FOLDER_ORDER_MAP[env29887[6]];
+          env29887[13] = `override-${env29887[12]}-${env29887[9].index}`;
+          env29887[14] = `${env29887[1]}/${env29887[6]}/${env29887[7]}`;
+          env29887[15] = {
+            id: env29887[13],
+            type: env29887[9].type,
+            order: env29887[12],
+            anchor: env29887[9].anchor,
+            responsive: env29887[9].responsive
+          };
+          r143 = await (0, measure)(env29887[14]);
+        }
+      } catch ($e) {
+        const r52 = $e;
+        let r7 = r52;
+        c26103_5 = r52;
+        if (c26103_6 !== 0) {
+          while (true) {
+            try {
+              const r426 = c26103_5;
+              c26103_6 = 0;
+              const r428 = c26103_1;
+              if (r428 !== void 0 && typeof r428.return === "function") {
+                try {
+                  r428.return();
+                } catch {}
+              }
+              throw r426;
+            } catch (r424) {
+              r7 = r424;
+              c26103_5 = r424;
+              if (c26103_6 === 0) {
+                break;
+              }
+            }
+          }
+        }
+        throw r7;
+      }
+      return r331;
+    }
+    return r400;
+  };
+  env5129[11] = r8;
+  return r8.apply(this, arguments);
+};
+c5129_7 = new Logger("FramePreviewOverrideStore");
+env5129[8] = 0;
+const r38 = create((c16242_0) => {
+  let c16242_1 = async () => {
+    let c26104_0, c26104_1, c26104_2;
+    let c26104_3 = 0;
+    const r14 = void 0;
+    const r13 = env5129;
+    L21: {
+      L18: {
+        L20: {
+          try {
+            let env29888;
+            c26104_1 = r14;
+            const r17 = env29888 = {
+              $parent: r13
+            };
+            c26104_0 = r17;
+            env29888[2] = void 0;
+            env29888[3] = void 0;
+            env29888[4] = void 0;
+            env29888[1] = function isStale() {
+              return env29888[0] !== env5129[8];
+            };
+            const r34 = env5129[8] + 1;
+            env5129[8] = r34;
+            env29888[0] = r34;
+            c16242_0({
+              status: "loading",
+              error: null
+            });
+            c26104_3 = 1;
+            env29888[2] = await (function readManifest() {
+              return env5129[10].apply(this, arguments);
+            })();
+            if ((0, env29888[1])()) {
+              c26104_3 = 0;
+              break L21;
+            }
+            if (env29888[2] == null) {
+              (0, c16242_0)({
+                status: "error",
+                error: "No frame on device. Ask Cap to push one (or run pushFrameOverride.mjs)."
+              });
+              c26104_3 = 0;
+              break L20;
+            }
+            const r71 = env29888[2];
+            env29888[3] = await $mk115102(env5129)(r71);
+            if (!(0, env29888[1])()) {
+              (0, c16242_0)({
+                override: env29888[3],
+                status: "idle",
+                error: null
+              });
+              c26104_3 = 0;
+              break L18;
+            }
+            c26104_3 = 0;
+          } catch ($e) {
+            const r30 = $e;
+            let r7 = r30;
+            c26104_2 = r30;
+            if (c26104_3 !== 0) {
+              while (true) {
+                try {
+                  const r111 = c26104_2;
+                  c26104_3 = 0;
+                  env29888[5] = r111;
+                  if (!(0, env29888[1])()) {
+                    env29888[4] = env29888[5] instanceof Error ? env29888[5].message : String(env29888[5]);
+                    c5129_7.error("Failed to load frame override", env29888[5]);
+                    (0, c16242_0)({
+                      status: "error",
+                      error: env29888[4]
+                    });
+                    break L18;
+                  }
+                } catch (r108) {
+                  r7 = r108;
+                  c26104_2 = r108;
+                  if (c26104_3 === 0) {
+                    break;
+                  }
+                  continue;
+                }
+                return void 0;
+              }
+            }
+            throw r7;
+          }
+          return void 0;
+        }
+        return void 0;
+      }
+      return void 0;
+    }
+  };
+  return {
+    override: null,
+    status: "idle",
+    error: null,
+    loadFromDevice: function() {
+      return c16242_1.apply(this, arguments);
+    },
+    clear: () => {
+      env5129[8] = env5129[8] + 1;
+      c16242_0({
+        override: null,
+        status: "idle",
+        error: null
+      });
+    }
+  };
+});
+export { r38 as useFramePreviewOverrideStore };

modules/collectibles/profile_frames/native/useProfileFrameLayerAsset.tsx

@@ -0,0 +1,39 @@
+// Metro module 8099 (f8100).
+import { useReducer, useEffect } from "react";
+import { Image as Image2, PixelRatio } from "react-native";
+import { getCollectiblesItemAssetUrl, CollectiblesItemAssetFormat } from "../../utils/CollectiblesAssetUtils";
+let c5137_6 = new Map();
+export default function useProfileFrameLayerAsset({ skuId, layer, width }) {
+  const collectiblesItemAssetUrl = getCollectiblesItemAssetUrl({
+    skuId,
+    assetFormat: CollectiblesItemAssetFormat.STATIC,
+    assetId: layer.id
+  });
+  const [, dispatch] = useReducer((a0) => a0 + 1, 0);
+  useEffect(() => {
+    if (!(collectiblesItemAssetUrl == null || collectiblesItemAssetUrl === "" || c5137_6.has(collectiblesItemAssetUrl))) {
+      Image2.getSize(collectiblesItemAssetUrl, (a0, a1) => {
+        if (a0 > 0) {
+          c5137_6.set(collectiblesItemAssetUrl, a1 / a0);
+          dispatch();
+        }
+      }, () => {});
+    }
+  }, [collectiblesItemAssetUrl]);
+  const r40 = collectiblesItemAssetUrl != null ? c5137_6.get(collectiblesItemAssetUrl) : void 0;
+  const imageHeight = r40 != null ? r40 * width : 0;
+  const r45 = collectiblesItemAssetUrl != null;
+  let assetUrl = null;
+  if (r45) {
+    const r47 = r40 != null;
+    assetUrl = null;
+    if (r47) {
+      const r55 = Math.round(width * PixelRatio.get());
+      assetUrl = `${collectiblesItemAssetUrl}?width=${r55}&height=${Math.round(r55 * r40)}`;
+    }
+  }
+  return {
+    assetUrl,
+    imageHeight
+  };
+};