@wereform/pkgm-wire 1.0.3 → 1.0.5

package/dist/components/WireChannelMetadata.js

@@ -1 +1 @@
-Object.defineProperty(exports,"__esModule",{value:true});exports.WireChannelMetadata=WireChannelMetadata;var _reactNative=require("react-native");var _WireChannelMetadataStyles=require("../styles/WireChannelMetadataStyles");var _vectorIcons=require("@expo/vector-icons");var _jsxRuntime=require("react/jsx-runtime");var _jsxFileName="F:\\WeReform Corporation\\Products\\BEGENONE\\App\\mobile\\packages\\begenone-pkgm-wire\\src\\components\\WireChannelMetadata.jsx";function WireChannelMetadata(_ref){var channelLogo=_ref.channelLogo,userName=_ref.userName,subscribersCount=_ref.subscribersCount,timeAgo=_ref.timeAgo,viewsText=_ref.viewsText,containerStyles=_ref.containerStyles;return(0,_jsxRuntime.jsxs)(_reactNative.View,{style:_WireChannelMetadataStyles.WireChannelMetadataStyles.channelMetaContainer,children:[(0,_jsxRuntime.jsxs)(_reactNative.View,{style:_WireChannelMetadataStyles.WireChannelMetadataStyles.channelMetaContainer_ColumnOne,children:[(0,_jsxRuntime.jsx)(_reactNative.Image,{source:{uri:channelLogo||"https://begenone-images.s3.us-east-1.amazonaws.com/default-user-photo.jpg"},style:_WireChannelMetadataStyles.WireChannelMetadataStyles.userImage}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:_WireChannelMetadataStyles.WireChannelMetadataStyles.nameSubcountContainer,children:[(0,_jsxRuntime.jsx)(_reactNative.Text,{style:_WireChannelMetadataStyles.WireChannelMetadataStyles.userName,children:userName||"Default Username"}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:_WireChannelMetadataStyles.WireChannelMetadataStyles.subCountContainer,children:[(0,_jsxRuntime.jsx)(_reactNative.Text,{style:_WireChannelMetadataStyles.WireChannelMetadataStyles.subCount,children:subscribersCount||"0"}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:_WireChannelMetadataStyles.WireChannelMetadataStyles.subText,children:"Subscribers"})]})]})]}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:[_WireChannelMetadataStyles.WireChannelMetadataStyles.dateViewsContainer,containerStyles],children:[(0,_jsxRuntime.jsxs)(_reactNative.View,{style:_WireChannelMetadataStyles.WireChannelMetadataStyles.dateContainer,children:[(0,_jsxRuntime.jsx)(_reactNative.Text,{style:_WireChannelMetadataStyles.WireChannelMetadataStyles.dateText,children:timeAgo||"14 Hours Ago"}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:_WireChannelMetadataStyles.WireChannelMetadataStyles.dateIcon,children:(0,_jsxRuntime.jsx)(_vectorIcons.Ionicons,{name:"calendar",size:16,color:"white"})})]}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:_WireChannelMetadataStyles.WireChannelMetadataStyles.viewsContainer,children:[(0,_jsxRuntime.jsx)(_reactNative.Text,{style:_WireChannelMetadataStyles.WireChannelMetadataStyles.viewsText,children:viewsText||"0"}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:_WireChannelMetadataStyles.WireChannelMetadataStyles.eyeIcon,children:(0,_jsxRuntime.jsx)(_vectorIcons.Ionicons,{name:"eye-outline",size:16,color:"white"})})]})]})]});}
+Object.defineProperty(exports,"__esModule",{value:true});exports.WireChannelMetadata=WireChannelMetadata;var _reactNative=require("react-native");var _WireChannelMetadataStyles=require("../styles/WireChannelMetadataStyles");var _vectorIcons=require("@expo/vector-icons");var _jsxRuntime=require("react/jsx-runtime");var _jsxFileName="F:\\WeReform Corporation\\Products\\BEGENONE\\App\\Mobile\\packages\\begenone-pkgm-wire\\src\\components\\WireChannelMetadata.jsx";function WireChannelMetadata(_ref){var channelLogo=_ref.channelLogo,userName=_ref.userName,subscribersCount=_ref.subscribersCount,timeAgo=_ref.timeAgo,viewsText=_ref.viewsText,containerStyles=_ref.containerStyles;return(0,_jsxRuntime.jsxs)(_reactNative.View,{style:_WireChannelMetadataStyles.WireChannelMetadataStyles.channelMetaContainer,children:[(0,_jsxRuntime.jsxs)(_reactNative.View,{style:_WireChannelMetadataStyles.WireChannelMetadataStyles.channelMetaContainer_ColumnOne,children:[(0,_jsxRuntime.jsx)(_reactNative.Image,{source:{uri:channelLogo||"https://begenone-images.s3.us-east-1.amazonaws.com/default-user-photo.jpg"},style:_WireChannelMetadataStyles.WireChannelMetadataStyles.userImage}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:_WireChannelMetadataStyles.WireChannelMetadataStyles.nameSubcountContainer,children:[(0,_jsxRuntime.jsx)(_reactNative.Text,{style:_WireChannelMetadataStyles.WireChannelMetadataStyles.userName,children:userName||"Default Username"}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:_WireChannelMetadataStyles.WireChannelMetadataStyles.subCountContainer,children:subscribersCount>0&&(0,_jsxRuntime.jsxs)(_jsxRuntime.Fragment,{children:[(0,_jsxRuntime.jsx)(_reactNative.Text,{style:_WireChannelMetadataStyles.WireChannelMetadataStyles.subCount,children:subscribersCount||"0"}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:_WireChannelMetadataStyles.WireChannelMetadataStyles.subText,children:"Subscribers"})]})})]})]}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:[_WireChannelMetadataStyles.WireChannelMetadataStyles.dateViewsContainer,containerStyles],children:[(0,_jsxRuntime.jsxs)(_reactNative.View,{style:_WireChannelMetadataStyles.WireChannelMetadataStyles.dateContainer,children:[(0,_jsxRuntime.jsx)(_reactNative.Text,{style:_WireChannelMetadataStyles.WireChannelMetadataStyles.dateText,children:timeAgo||"14 Hours Ago"}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:_WireChannelMetadataStyles.WireChannelMetadataStyles.dateIcon,children:(0,_jsxRuntime.jsx)(_vectorIcons.Ionicons,{name:"calendar",size:16,color:"white"})})]}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:_WireChannelMetadataStyles.WireChannelMetadataStyles.viewsContainer,children:viewsText>0&&(0,_jsxRuntime.jsxs)(_jsxRuntime.Fragment,{children:[(0,_jsxRuntime.jsx)(_reactNative.Text,{style:_WireChannelMetadataStyles.WireChannelMetadataStyles.viewsText,children:viewsText||"0"}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:_WireChannelMetadataStyles.WireChannelMetadataStyles.eyeIcon,children:(0,_jsxRuntime.jsx)(_vectorIcons.Ionicons,{name:"eye-outline",size:16,color:"white"})})]})})]})]});}

package/dist/layout/WireCardLayout.js

@@ -1,8 +1,8 @@
-Object.defineProperty(exports,"__esModule",{value:true});exports.WireCardLayout=WireCardLayout;var _reactNative=require("react-native");var _pkgmShared=require("@wereform/pkgm-shared");var _vectorIcons=require("@expo/vector-icons");var _WireChannelMetadata=require("../components/WireChannelMetadata");var _WireCardLayoutStyles=require("../styles/WireCardLayoutStyles");var _jsxRuntime=require("react/jsx-runtime");var _jsxFileName="F:\\WeReform Corporation\\Products\\BEGENONE\\App\\mobile\\packages\\begenone-pkgm-wire\\src\\layout\\WireCardLayout.jsx";function WireCardLayout(_ref){var _this=this;var content=_ref.content,channelLogo=_ref.channelLogo,userName=_ref.userName,subscribersCount=_ref.subscribersCount,timeAgo=_ref.timeAgo,viewsText=_ref.viewsText,onPress=_ref.onPress;var limit=8;var contentText=content!=null?content:`Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero quidem
+Object.defineProperty(exports,"__esModule",{value:true});exports.WireCardLayout=WireCardLayout;var _reactNative=require("react-native");var _pkgmShared=require("@wereform/pkgm-shared");var _vectorIcons=require("@expo/vector-icons");var _WireChannelMetadata=require("../components/WireChannelMetadata");var _WireCardLayoutStyles=require("../styles/WireCardLayoutStyles");var _jsxRuntime=require("react/jsx-runtime");var _jsxFileName="F:\\WeReform Corporation\\Products\\BEGENONE\\App\\Mobile\\packages\\begenone-pkgm-wire\\src\\layout\\WireCardLayout.jsx";function WireCardLayout(_ref){var _this=this;var content=_ref.content,channelLogo=_ref.channelLogo,userName=_ref.userName,subscribersCount=_ref.subscribersCount,timeAgo=_ref.timeAgo,viewsText=_ref.viewsText,onPress=_ref.onPress;var limit=8;var contentText=content!=null?content:`Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero quidem
             distinctio porro qui minus totam eius. Sed laudantium nisi expedita
             distinctio dignissimos dicta praesentium nihil iste velit cumque!
             Assumenda illum veritatis, ipsam sint
             
             vero corporis distinctio rem
             quisquam natus iste. Unde esse consequuntur maiores repellendus, cum
-            voluptatem vero incidunt temporibus.`;var finalText=contentText?contentText.replace(/\r\n/g,"\n").split("\n"):[];return(0,_jsxRuntime.jsxs)(_reactNative.TouchableOpacity,{style:_WireCardLayoutStyles.WireCardLayoutStyles.container,onPress:onPress,children:[(0,_jsxRuntime.jsxs)(_reactNative.View,{children:[(0,_jsxRuntime.jsx)(_WireChannelMetadata.WireChannelMetadata,{channelLogo:channelLogo||"https://begenone-images.s3.us-east-1.amazonaws.com/default-user-photo.jpg",userName:userName,subscribersCount:subscribersCount,timeAgo:timeAgo,viewsText:viewsText}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:_WireCardLayoutStyles.WireCardLayoutStyles.mainTextContainer,children:[finalText.length>0&&(0,_jsxRuntime.jsx)(_reactNative.Text,{numberOfLines:limit,style:_WireCardLayoutStyles.WireCardLayoutStyles.mainText,children:finalText.map(function(text,index){return(0,_jsxRuntime.jsxs)(_reactNative.Text,{children:[text.trim().replace(/\s+/g," "),index<finalText.length-1?"\n":""]},index);})}),(0,_jsxRuntime.jsx)(_reactNative.Text,{children:" "}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:_WireCardLayoutStyles.WireCardLayoutStyles.seeMore,children:"See more \u2192"})]})]}),(0,_jsxRuntime.jsx)(_pkgmShared.MenuInteraction,{containerStyles:{marginBottom:12}})]});}
+            voluptatem vero incidunt temporibus.`;var finalText=contentText?contentText.replace(/\r\n/g,"\n").split("\n"):[];return(0,_jsxRuntime.jsx)(_reactNative.TouchableOpacity,{style:_WireCardLayoutStyles.WireCardLayoutStyles.container,onPress:onPress,children:(0,_jsxRuntime.jsxs)(_reactNative.View,{children:[(0,_jsxRuntime.jsx)(_WireChannelMetadata.WireChannelMetadata,{channelLogo:channelLogo||"https://begenone-images.s3.us-east-1.amazonaws.com/default-user-photo.jpg",userName:userName,subscribersCount:subscribersCount,timeAgo:timeAgo,viewsText:viewsText}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:_WireCardLayoutStyles.WireCardLayoutStyles.mainTextContainer,children:[finalText.length>0&&(0,_jsxRuntime.jsx)(_reactNative.Text,{numberOfLines:limit,style:_WireCardLayoutStyles.WireCardLayoutStyles.mainText,children:finalText.map(function(text,index){return(0,_jsxRuntime.jsxs)(_reactNative.Text,{children:[text.trim().replace(/\s+/g," "),index<finalText.length-1?"\n":""]},index);})}),(0,_jsxRuntime.jsx)(_reactNative.Text,{children:" "}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:_WireCardLayoutStyles.WireCardLayoutStyles.seeMore,children:"See more \u2192"})]})]})});}

package/dist/layout/WireUploadLayout.js

@@ -1 +1 @@
-var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.WireUploadLayout=WireUploadLayout;var _asyncToGenerator2=_interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));var _slicedToArray2=_interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));var _react=require("react");var _reactNative=require("react-native");var ImagePicker=_interopRequireWildcard(require("expo-image-picker"));var VideoThumbnails=_interopRequireWildcard(require("expo-video-thumbnails"));var _vectorIcons=require("@expo/vector-icons");var _WireUploadStyles=require("../styles/WireUploadStyles");var _pkgmShared=require("@wereform/pkgm-shared");var _jsxRuntime=require("react/jsx-runtime");var _jsxFileName="F:\\WeReform Corporation\\Products\\BEGENONE\\App\\mobile\\packages\\begenone-pkgm-wire\\src\\layout\\WireUploadLayout.jsx";function _interopRequireWildcard(e,t){if("function"==typeof WeakMap)var r=new WeakMap(),n=new WeakMap();return(_interopRequireWildcard=function _interopRequireWildcard(e,t){if(!t&&e&&e.__esModule)return e;var o,i,f={__proto__:null,default:e};if(null===e||"object"!=typeof e&&"function"!=typeof e)return f;if(o=t?n:r){if(o.has(e))return o.get(e);o.set(e,f);}for(var _t in e)"default"!==_t&&{}.hasOwnProperty.call(e,_t)&&((i=(o=Object.defineProperty)&&Object.getOwnPropertyDescriptor(e,_t))&&(i.get||i.set)?o(f,_t,i):f[_t]=e[_t]);return f;})(e,t);}function WireUploadLayout(_ref){var _this=this;var profilePic=_ref.profilePic,userName=_ref.userName,onPressVideoUploadScreen=_ref.onPressVideoUploadScreen,onPressWireUpload=_ref.onPressWireUpload;var _useState=(0,_react.useState)(``),_useState2=(0,_slicedToArray2.default)(_useState,2),wireText=_useState2[0],setWireText=_useState2[1];var _useState3=(0,_react.useState)(null),_useState4=(0,_slicedToArray2.default)(_useState3,2),media=_useState4[0],setMedia=_useState4[1];var _useState5=(0,_react.useState)([]),_useState6=(0,_slicedToArray2.default)(_useState5,2),thumbnails=_useState6[0],setThumbnails=_useState6[1];var _useState7=(0,_react.useState)("Default Heading!"),_useState8=(0,_slicedToArray2.default)(_useState7,2),heading=_useState8[0],setHeading=_useState8[1];var pickMedia=function(){var _ref2=(0,_asyncToGenerator2.default)(function*(){var result=yield ImagePicker.launchImageLibraryAsync({mediaTypes:["images","videos"],allowsMultipleSelection:true,selectionLimit:4,quality:1});if(result.canceled)return;var assets=result.assets;setMedia(assets);var finalThumbs=yield Promise.all(assets.map(function(){var _ref3=(0,_asyncToGenerator2.default)(function*(asset){var _asset$mimeType;var isVideo=asset.type==="video"||((_asset$mimeType=asset.mimeType)==null?void 0:_asset$mimeType.startsWith("video"));if(isVideo){try{var _yield$VideoThumbnail=yield VideoThumbnails.getThumbnailAsync(asset.uri,{time:1000}),uri=_yield$VideoThumbnail.uri;return uri;}catch(err){console.log("Video thumbnail error:",err);return null;}}return asset.uri;});return function(_x){return _ref3.apply(this,arguments);};}()));console.log(finalThumbs);setThumbnails(finalThumbs);});return function pickMedia(){return _ref2.apply(this,arguments);};}();console.log(wireText);return(0,_jsxRuntime.jsx)(_reactNative.ScrollView,{children:(0,_jsxRuntime.jsxs)(_reactNative.View,{style:_WireUploadStyles.WireUploadStyles.container,children:[(0,_jsxRuntime.jsxs)(_reactNative.View,{style:_WireUploadStyles.WireUploadStyles.profileSection,children:[(0,_jsxRuntime.jsx)(_reactNative.Image,{source:{uri:profilePic||"https://begenone-images.s3.us-east-1.amazonaws.com/default-user-photo.jpg"},style:_WireUploadStyles.WireUploadStyles.userImage}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:_WireUploadStyles.WireUploadStyles.userInfo,children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:_WireUploadStyles.WireUploadStyles.userName,children:userName||"Default Username"})})]}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:_WireUploadStyles.WireUploadStyles.wireInputContainer,children:[(0,_jsxRuntime.jsxs)(_reactNative.View,{style:{flexDirection:"row",justifyContent:"space-between",alignItems:"center"},children:[(0,_jsxRuntime.jsxs)(_reactNative.Text,{style:{color:"#fff",fontWeight:"900",fontSize:24,paddingBottom:12,flexGrow:1,justifyContent:"flex-start"},children:["Create ",(0,_jsxRuntime.jsx)(_reactNative.Text,{style:{color:"#ff6000"},children:"Wire"})]}),(0,_jsxRuntime.jsx)(_reactNative.TouchableOpacity,{onPress:onPressVideoUploadScreen,children:(0,_jsxRuntime.jsxs)(_reactNative.Text,{style:{color:"#fff",fontWeight:"500",fontSize:14,paddingBottom:12,alignSelf:"center"},children:["Upload ",(0,_jsxRuntime.jsx)(_reactNative.Text,{style:{color:"#ff6000"},children:"Video"})]})})]}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:_WireUploadStyles.WireUploadStyles.wireInputTextContainer,children:[(0,_jsxRuntime.jsx)(_pkgmShared.InputField,{multiline:true,placeholder:"Write your Wire...",inputWrapper:_WireUploadStyles.WireUploadStyles.inputWrapper,inputStyle:_WireUploadStyles.WireUploadStyles.aboutTextArea,value:wireText,onChangeText:setWireText}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:_WireUploadStyles.WireUploadStyles.mediaContainer,children:thumbnails.map(function(uri,index){return(0,_jsxRuntime.jsx)(_reactNative.TouchableOpacity,{onPress:pickMedia,children:(0,_jsxRuntime.jsx)(_reactNative.Image,{source:{uri:uri},style:_WireUploadStyles.WireUploadStyles.mediaThumb,resizeMode:"cover"})},index);})}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:_WireUploadStyles.WireUploadStyles.uploadButtonContainer,children:[(0,_jsxRuntime.jsx)(_reactNative.TouchableOpacity,{style:_WireUploadStyles.WireUploadStyles.AIGenerateButton,children:(0,_jsxRuntime.jsx)(_vectorIcons.Ionicons,{name:"sparkles-outline",size:24,color:"#fff"})}),(0,_jsxRuntime.jsx)(_reactNative.TouchableOpacity,{onPress:pickMedia,style:_WireUploadStyles.WireUploadStyles.uploadImageButton,children:(0,_jsxRuntime.jsx)(_vectorIcons.Ionicons,{name:"image",size:24,color:"#fff"})})]})]}),(0,_jsxRuntime.jsx)(_pkgmShared.DropDown,{styles:{marginLeft:0,marginRight:0,marginTop:18},iconStyles:{paddingRight:16},selectText:"Select Age Group",data:[{key:1,label:"Under 14 of age"},{key:2,label:"Above 14 of age"}]}),(0,_jsxRuntime.jsx)(_pkgmShared.DropDown,{styles:{marginLeft:0,marginRight:0,marginTop:18},selectText:"Comments",iconStyles:{paddingRight:16},data:[{key:1,label:"Turn — ON"},{key:2,label:"Turn — OFF"}]})]}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:{flexDirection:"row",width:"auto",justifyContent:"space-between",marginTop:60,marginLeft:24,marginRight:24},children:(0,_jsxRuntime.jsx)(_pkgmShared.CustomizedButton,{label:"Post Wire",style:{backgroundColor:"#ff6000",marginRight:6},fontWeight:"900",textColor:"#fff",onPress:function onPress(){return onPressWireUpload(wireText,heading);}})})]})});}var styles=_reactNative.StyleSheet.create({});
+var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.WireUploadLayout=WireUploadLayout;var _asyncToGenerator2=_interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));var _slicedToArray2=_interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));var _react=require("react");var _reactNative=require("react-native");var ImagePicker=_interopRequireWildcard(require("expo-image-picker"));var VideoThumbnails=_interopRequireWildcard(require("expo-video-thumbnails"));var _vectorIcons=require("@expo/vector-icons");var _WireUploadStyles=require("../styles/WireUploadStyles");var _pkgmShared=require("@wereform/pkgm-shared");var _jsxRuntime=require("react/jsx-runtime");var _jsxFileName="F:\\WeReform Corporation\\Products\\BEGENONE\\App\\Mobile\\packages\\begenone-pkgm-wire\\src\\layout\\WireUploadLayout.jsx";function _interopRequireWildcard(e,t){if("function"==typeof WeakMap)var r=new WeakMap(),n=new WeakMap();return(_interopRequireWildcard=function _interopRequireWildcard(e,t){if(!t&&e&&e.__esModule)return e;var o,i,f={__proto__:null,default:e};if(null===e||"object"!=typeof e&&"function"!=typeof e)return f;if(o=t?n:r){if(o.has(e))return o.get(e);o.set(e,f);}for(var _t in e)"default"!==_t&&{}.hasOwnProperty.call(e,_t)&&((i=(o=Object.defineProperty)&&Object.getOwnPropertyDescriptor(e,_t))&&(i.get||i.set)?o(f,_t,i):f[_t]=e[_t]);return f;})(e,t);}function WireUploadLayout(_ref){var _this=this;var profilePic=_ref.profilePic,userName=_ref.userName,onPressVideoUploadScreen=_ref.onPressVideoUploadScreen,onPressWireUpload=_ref.onPressWireUpload,_ref$showUploadContai=_ref.showUploadContainers,showUploadContainers=_ref$showUploadContai===void 0?false:_ref$showUploadContai,_ref$showDropDowns=_ref.showDropDowns,showDropDowns=_ref$showDropDowns===void 0?false:_ref$showDropDowns;var _useState=(0,_react.useState)(``),_useState2=(0,_slicedToArray2.default)(_useState,2),wireText=_useState2[0],setWireText=_useState2[1];var _useState3=(0,_react.useState)(null),_useState4=(0,_slicedToArray2.default)(_useState3,2),media=_useState4[0],setMedia=_useState4[1];var _useState5=(0,_react.useState)([]),_useState6=(0,_slicedToArray2.default)(_useState5,2),thumbnails=_useState6[0],setThumbnails=_useState6[1];var _useState7=(0,_react.useState)("Default Heading!"),_useState8=(0,_slicedToArray2.default)(_useState7,2),heading=_useState8[0],setHeading=_useState8[1];var pickMedia=function(){var _ref2=(0,_asyncToGenerator2.default)(function*(){var result=yield ImagePicker.launchImageLibraryAsync({mediaTypes:["images","videos"],allowsMultipleSelection:true,selectionLimit:4,quality:1});if(result.canceled)return;var assets=result.assets;setMedia(assets);var finalThumbs=yield Promise.all(assets.map(function(){var _ref3=(0,_asyncToGenerator2.default)(function*(asset){var _asset$mimeType;var isVideo=asset.type==="video"||((_asset$mimeType=asset.mimeType)==null?void 0:_asset$mimeType.startsWith("video"));if(isVideo){try{var _yield$VideoThumbnail=yield VideoThumbnails.getThumbnailAsync(asset.uri,{time:1000}),uri=_yield$VideoThumbnail.uri;return uri;}catch(err){console.log("Video thumbnail error:",err);return null;}}return asset.uri;});return function(_x){return _ref3.apply(this,arguments);};}()));console.log(finalThumbs);setThumbnails(finalThumbs);});return function pickMedia(){return _ref2.apply(this,arguments);};}();console.log(wireText);return(0,_jsxRuntime.jsx)(_reactNative.ScrollView,{children:(0,_jsxRuntime.jsxs)(_reactNative.View,{style:_WireUploadStyles.WireUploadStyles.container,children:[(0,_jsxRuntime.jsxs)(_reactNative.View,{style:_WireUploadStyles.WireUploadStyles.profileSection,children:[(0,_jsxRuntime.jsx)(_reactNative.Image,{source:{uri:profilePic||"https://begenone-images.s3.us-east-1.amazonaws.com/default-user-photo.jpg"},style:_WireUploadStyles.WireUploadStyles.userImage}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:_WireUploadStyles.WireUploadStyles.userInfo,children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:_WireUploadStyles.WireUploadStyles.userName,children:userName||"Default Username"})})]}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:_WireUploadStyles.WireUploadStyles.wireInputContainer,children:[(0,_jsxRuntime.jsxs)(_reactNative.View,{style:{flexDirection:"row",justifyContent:"space-between",alignItems:"center"},children:[(0,_jsxRuntime.jsxs)(_reactNative.Text,{style:{color:"#fff",fontWeight:"900",fontSize:24,paddingBottom:12,flexGrow:1,justifyContent:"flex-start"},children:["Create ",(0,_jsxRuntime.jsx)(_reactNative.Text,{style:{color:"#ff6000"},children:"Wire"})]}),(0,_jsxRuntime.jsx)(_reactNative.TouchableOpacity,{onPress:onPressVideoUploadScreen,children:(0,_jsxRuntime.jsxs)(_reactNative.Text,{style:{color:"#fff",fontWeight:"500",fontSize:14,paddingBottom:12,alignSelf:"center"},children:["Upload ",(0,_jsxRuntime.jsx)(_reactNative.Text,{style:{color:"#ff6000"},children:"Video"})]})})]}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:_WireUploadStyles.WireUploadStyles.wireInputTextContainer,children:[(0,_jsxRuntime.jsx)(_pkgmShared.InputField,{multiline:true,placeholder:"Write your Wire...",inputWrapper:_WireUploadStyles.WireUploadStyles.inputWrapper,inputStyle:_WireUploadStyles.WireUploadStyles.aboutTextArea,value:wireText,onChangeText:setWireText}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:_WireUploadStyles.WireUploadStyles.mediaContainer,children:thumbnails.map(function(uri,index){return(0,_jsxRuntime.jsx)(_reactNative.TouchableOpacity,{onPress:pickMedia,children:(0,_jsxRuntime.jsx)(_reactNative.Image,{source:{uri:uri},style:_WireUploadStyles.WireUploadStyles.mediaThumb,resizeMode:"cover"})},index);})}),showUploadContainers&&(0,_jsxRuntime.jsxs)(_reactNative.View,{style:_WireUploadStyles.WireUploadStyles.uploadButtonContainer,children:[(0,_jsxRuntime.jsx)(_reactNative.TouchableOpacity,{style:_WireUploadStyles.WireUploadStyles.AIGenerateButton,children:(0,_jsxRuntime.jsx)(_vectorIcons.Ionicons,{name:"sparkles-outline",size:24,color:"#fff"})}),(0,_jsxRuntime.jsx)(_reactNative.TouchableOpacity,{onPress:pickMedia,style:_WireUploadStyles.WireUploadStyles.uploadImageButton,children:(0,_jsxRuntime.jsx)(_vectorIcons.Ionicons,{name:"image",size:24,color:"#fff"})})]})]}),showDropDowns&&(0,_jsxRuntime.jsxs)(_jsxRuntime.Fragment,{children:[(0,_jsxRuntime.jsx)(_pkgmShared.DropDown,{styles:{marginLeft:0,marginRight:0,marginTop:18},iconStyles:{paddingRight:16},selectText:"Select Age Group",data:[{key:1,label:"Under 14 of age"},{key:2,label:"Above 14 of age"}]}),(0,_jsxRuntime.jsx)(_pkgmShared.DropDown,{styles:{marginLeft:0,marginRight:0,marginTop:18},selectText:"Comments",iconStyles:{paddingRight:16},data:[{key:1,label:"Turn — ON"},{key:2,label:"Turn — OFF"}]})]})]}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:{flexDirection:"row",width:"auto",justifyContent:"space-between",marginTop:60,marginLeft:24,marginRight:24},children:(0,_jsxRuntime.jsx)(_pkgmShared.CustomizedButton,{label:"Post Wire",style:{backgroundColor:"#ff6000",marginRight:6},fontWeight:"900",textColor:"#fff",onPress:function onPress(){return onPressWireUpload(wireText,heading);}})})]})});}var styles=_reactNative.StyleSheet.create({});

package/dist/layout/WireViewLayout.js

@@ -1,4 +1,4 @@
-var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.WireViewLayout=WireViewLayout;var _slicedToArray2=_interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));var _reactNative=require("react-native");var _WireChannelMetadata=require("../components/WireChannelMetadata");var _WireCardLayoutStyles=require("../styles/WireCardLayoutStyles");var _pkgmShared=require("@wereform/pkgm-shared");var _WireViewLayoutStyles=require("../styles/WireViewLayoutStyles");var _react=require("react");var _jsxRuntime=require("react/jsx-runtime");var _jsxFileName="F:\\WeReform Corporation\\Products\\BEGENONE\\App\\mobile\\packages\\begenone-pkgm-wire\\src\\layout\\WireViewLayout.jsx";function WireViewLayout(_ref){var _this=this;var content=_ref.content,channelLogo=_ref.channelLogo,userName=_ref.userName,subscribersCount=_ref.subscribersCount,timeAgo=_ref.timeAgo,viewsText=_ref.viewsText,isItMe=_ref.isItMe,onPressDeleteButton=_ref.onPressDeleteButton;var _useState=(0,_react.useState)(false),_useState2=(0,_slicedToArray2.default)(_useState,2),isPressed=_useState2[0],setPressed=_useState2[1];var contentText=content!=null?content:`Curiosity is the real engine of progress. You don’t need certainty — you need movement. Every experiment, every failure, every weird idea you chase sharpens your understanding of reality. 
+var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.WireViewLayout=WireViewLayout;var _slicedToArray2=_interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));var _reactNative=require("react-native");var _WireChannelMetadata=require("../components/WireChannelMetadata");var _WireCardLayoutStyles=require("../styles/WireCardLayoutStyles");var _pkgmShared=require("@wereform/pkgm-shared");var _WireViewLayoutStyles=require("../styles/WireViewLayoutStyles");var _react=require("react");var _jsxRuntime=require("react/jsx-runtime");var _jsxFileName="F:\\WeReform Corporation\\Products\\BEGENONE\\App\\Mobile\\packages\\begenone-pkgm-wire\\src\\layout\\WireViewLayout.jsx";function WireViewLayout(_ref){var _this=this;var content=_ref.content,channelLogo=_ref.channelLogo,userName=_ref.userName,subscribersCount=_ref.subscribersCount,timeAgo=_ref.timeAgo,viewsText=_ref.viewsText,isItMe=_ref.isItMe,onPressDeleteButton=_ref.onPressDeleteButton;var _useState=(0,_react.useState)(false),_useState2=(0,_slicedToArray2.default)(_useState,2),isPressed=_useState2[0],setPressed=_useState2[1];var contentText=content!=null?content:`Curiosity is the real engine of progress. You don’t need certainty — you need movement. Every experiment, every failure, every weird idea you chase sharpens your understanding of reality. 
 
 Stop waiting to “figure it out” first. Dive in, break things, rebuild smarter. The mind grows through friction, not comfort. 
 

package/dist/styles/WireUploadStyles.js

@@ -1 +1 @@
-Object.defineProperty(exports,"__esModule",{value:true});exports.WireUploadStyles=void 0;var _reactNative=require("react-native");var _globalStyles=require("./globalStyles");var WireUploadStyles=exports.WireUploadStyles=_reactNative.StyleSheet.create({container:{flex:1,backgroundColor:"#141414",marginBottom:120},profileSection:{flexDirection:"row",alignItems:"center",borderBottomWidth:1,paddingTop:18,paddingBottom:18,marginLeft:36,marginRight:36,borderColor:_globalStyles.globalStyles.colors.colorPrimary450},userImage:{width:60,height:60,borderRadius:12,marginRight:16},userInfo:{flexDirection:"column",justifyContent:"center"},userName:{color:"white",fontSize:18,fontWeight:"600"},channelSettingsText:{color:"#ff6600",marginTop:4},wireInputContainer:{marginRight:24,marginLeft:24,marginTop:24},wireInputTextContainer:{backgroundColor:"#202020",borderRadius:12},inputWrapper:{backgroundColor:"#202020",width:"auto",borderBottomRightRadius:0,borderBottomLeftRadius:0},aboutTextArea:{textAlignVertical:"top",whiteSpace:"pre",height:"auto",minHeight:200,color:"white",paddingTop:16,marginTop:0,lineHeight:24,fontWeight:400,fontSize:18,paddingBottom:36},media:{width:"auto",height:200,borderRadius:14,backgroundColor:"#000"},uploadButtonContainer:{flexDirection:"row",alignItems:"center",justifyContent:"flex-end"},AIGenerateButton:{paddingRight:24},uploadImageButton:{paddingRight:24,paddingVertical:24,borderRadius:12},uploadButtonText:{color:"#fff",fontSize:14,fontWeight:"600",marginLeft:8},mediaContainer:{flexDirection:"row",flexWrap:"wrap",gap:10,width:"auto",marginBottom:16,paddingLeft:6,paddingRight:6,justifyContent:"space-evenly"},mediaThumb:{width:120,height:120,borderRadius:12,backgroundColor:"#000"}});
+Object.defineProperty(exports,"__esModule",{value:true});exports.WireUploadStyles=void 0;var _reactNative=require("react-native");var _globalStyles=require("./globalStyles");var WireUploadStyles=exports.WireUploadStyles=_reactNative.StyleSheet.create({container:{flex:1,backgroundColor:"#141414",marginBottom:120},profileSection:{flexDirection:"row",alignItems:"center",borderBottomWidth:1,paddingTop:18,paddingBottom:18,marginLeft:36,marginRight:36,borderColor:_globalStyles.globalStyles.colors.colorPrimary450},userImage:{width:60,height:60,borderRadius:12,marginRight:16},userInfo:{flexDirection:"column",justifyContent:"center"},userName:{color:"white",fontSize:18,fontWeight:"600"},channelSettingsText:{color:"#ff6600",marginTop:4},wireInputContainer:{marginRight:24,marginLeft:24,marginTop:24},wireInputTextContainer:{backgroundColor:"#202020",borderRadius:12},inputWrapper:{backgroundColor:"#202020",width:"auto",borderBottomRightRadius:0,borderBottomLeftRadius:0},aboutTextArea:{textAlignVertical:"top",whiteSpace:"pre",height:"auto",minHeight:200,color:"white",paddingTop:16,lineHeight:24,fontWeight:400,fontSize:18,paddingBottom:36},media:{width:"auto",height:200,borderRadius:14,backgroundColor:"#000"},uploadButtonContainer:{flexDirection:"row",alignItems:"center",justifyContent:"flex-end"},AIGenerateButton:{paddingRight:24},uploadImageButton:{paddingRight:24,paddingVertical:24,borderRadius:12},uploadButtonText:{color:"#fff",fontSize:14,fontWeight:"600",marginLeft:8},mediaContainer:{flexDirection:"row",flexWrap:"wrap",gap:10,width:"auto",marginBottom:16,paddingLeft:6,paddingRight:6,justifyContent:"space-evenly"},mediaThumb:{width:120,height:120,borderRadius:12,backgroundColor:"#000"}});

package/package.json

@@ -1,37 +1,38 @@
-{
-  "name": "@wereform/pkgm-wire",
-  "version": "1.0.3",
-  "source": "src/index.js",
-  "main": "dist/index.js",
-  "react-native": "src/index.js",
-  "files": [
-    "dist",
-    "src",
-    "README.md"
-  ],
-  "publishConfig": {
-    "access": "public"
-  },
-  "peerDependencies": {
-    "@expo/vector-icons": "*",
-    "react": "*",
-    "react-native": "*"
-  },
-  "dependencies": {
-    "@wereform/pkgm-channel": "^1.0.3",
-    "@wereform/pkgm-settings": "^1.0.2",
-    "@wereform/pkgm-shared": "^1.0.2",
-    "@wereform/pkgm-video": "^1.0.2",
-    "expo-image-picker": "^17.0.8",
-    "expo-video-thumbnails": "^10.0.7"
-  },
-  "devDependencies": {
-    "@babel/cli": "^7.28.3",
-    "@babel/core": "^7.28.5",
-    "@babel/preset-env": "^7.28.5",
-    "metro-react-native-babel-preset": "^0.77.0"
-  },
-  "scripts": {
-    "build": "babel src --out-dir dist --extensions .js,.jsx"
-  }
-}
+{
+  "name": "@wereform/pkgm-wire",
+  "version": "1.0.5",
+  "source": "dist/index.js",
+  "main": "dist/index.js",
+  "react-native": "dist/index.js",
+  "files": [
+    "dist",
+    "src",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "babel src --out-dir dist --extensions .js,.jsx",
+    "prepublishOnly": "pnpm run build"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "@expo/vector-icons": "*",
+    "react": "*",
+    "react-native": "*"
+  },
+  "dependencies": {
+    "@wereform/pkgm-channel": "^1.0.5",
+    "@wereform/pkgm-settings": "^1.0.6",
+    "@wereform/pkgm-shared": "^1.0.4",
+    "@wereform/pkgm-video": "^1.0.4",
+    "expo-image-picker": "^17.0.8",
+    "expo-video-thumbnails": "^10.0.7"
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.28.3",
+    "@babel/core": "^7.28.5",
+    "@babel/preset-env": "^7.28.5",
+    "metro-react-native-babel-preset": "^0.77.0"
+  }
+}

package/src/components/WireChannelMetadata.jsx

@@ -2,6 +2,42 @@ import { Image, Pressable, Text, View } from "react-native";
 import { WireChannelMetadataStyles } from "../styles/WireChannelMetadataStyles";
 import { Ionicons } from "@expo/vector-icons";
 
+/**
+ * WireChannelMetadata
+ *
+ * Displays channel-level metadata for a Wire post.
+ * Designed for compact, inline presentation under wire content.
+ *
+ * Props:
+ * - channelLogo: string (URL)
+ *   URL of the channel or user profile image.
+ *   Falls back to a default placeholder image if not provided.
+ *
+ * - userName: string
+ *   Display name of the channel or user.
+ *
+ * - subscribersCount: string | number
+ *   Total number of subscribers for the channel.
+ *
+ * - timeAgo: string
+ *   Human-readable timestamp (e.g. "14 Hours Ago").
+ *
+ * - viewsText: string | number
+ *   View count displayed alongside the eye icon.
+ *
+ * - containerStyles: object (optional)
+ *   Style overrides for the date/views container.
+ *
+ * Behavior:
+ * - Renders channel identity (logo, name, subscriber count)
+ * - Displays publish time and views with icons
+ * - Uses sensible defaults when props are missing
+ *
+ * Usage:
+ * - Intended for Wire feeds, post headers, or lightweight metadata rows
+ * - Optimized for mobile layouts
+ */
+
 export function WireChannelMetadata({
   channelLogo,
   userName,
@@ -26,10 +62,16 @@ export function WireChannelMetadata({
             {userName || "Default Username"}
           </Text>
           <View style={WireChannelMetadataStyles.subCountContainer}>
-            <Text style={WireChannelMetadataStyles.subCount}>
-              {subscribersCount || "0"}
-            </Text>
-            <Text style={WireChannelMetadataStyles.subText}>Subscribers</Text>
+            {subscribersCount > 0 && (
+              <>
+                <Text style={WireChannelMetadataStyles.subCount}>
+                  {subscribersCount || "0"}
+                </Text>
+                <Text style={WireChannelMetadataStyles.subText}>
+                  Subscribers
+                </Text>
+              </>
+            )}
           </View>
         </View>
       </View>
@@ -45,12 +87,16 @@ export function WireChannelMetadata({
           </View>
         </View>
         <View style={WireChannelMetadataStyles.viewsContainer}>
-          <Text style={WireChannelMetadataStyles.viewsText}>
-            {viewsText || "0"}
-          </Text>
-          <View style={WireChannelMetadataStyles.eyeIcon}>
-            <Ionicons name="eye-outline" size={16} color="white" />
-          </View>
+          {viewsText > 0 && (
+            <>
+              <Text style={WireChannelMetadataStyles.viewsText}>
+                {viewsText || "0"}
+              </Text>
+              <View style={WireChannelMetadataStyles.eyeIcon}>
+                <Ionicons name="eye-outline" size={16} color="white" />
+              </View>
+            </>
+          )}
         </View>
       </View>
     </View>

package/src/layout/WireCardLayout.jsx

@@ -4,6 +4,45 @@ import { Ionicons } from "@expo/vector-icons";
 import { WireChannelMetadata } from "../components/WireChannelMetadata";
 import { WireCardLayoutStyles } from "../styles/WireCardLayoutStyles";
 
+/**
+ * WireCardLayout
+ *
+ * Compact, tappable preview card for rendering a Wire in feeds or lists.
+ *
+ * Responsibilities:
+ * - Displays channel metadata (via WireChannelMetadata)
+ * - Renders multi-line wire content with a soft line limit
+ * - Provides interaction actions via MenuInteraction
+ * - Acts as a navigation trigger when pressed
+ *
+ * Props:
+ * - content: string
+ *   Full wire text content.
+ *
+ * - channelLogo: string (URL)
+ *   Channel or user avatar image.
+ *
+ * - userName: string
+ *   Channel or author display name.
+ *
+ * - subscribersCount: string | number
+ *   Subscriber count shown in metadata.
+ *
+ * - timeAgo: string
+ *   Relative publish time (e.g. "2h ago").
+ *
+ * - viewsText: string | number
+ *   View count for the wire.
+ *
+ * - onPress: function
+ *   Triggered when the card is tapped.
+ *
+ * Behavior:
+ * - Normalizes line breaks and whitespace
+ * - Limits visible lines for feed readability
+ * - Shows "See more" affordance for full view
+ */
+
 export function WireCardLayout({
   content,
   channelLogo,
@@ -60,7 +99,7 @@ export function WireCardLayout({
           <Text style={WireCardLayoutStyles.seeMore}>See more →</Text>
         </View>
       </View>
-      <MenuInteraction containerStyles={{ marginBottom: 12 }} />
+      {/* <MenuInteraction containerStyles={{ marginBottom: 12 }} /> */}
     </TouchableOpacity>
   );
 }

package/src/layout/WireUploadLayout.jsx

@@ -15,11 +15,54 @@ import { Ionicons } from "@expo/vector-icons";
 import { WireUploadStyles } from "../styles/WireUploadStyles";
 import { CustomizedButton, DropDown, InputField } from "@wereform/pkgm-shared";
 
+/**
+ * WireUploadLayout
+ *
+ * Full wire composer layout with optional media, AI hooks, and settings.
+ *
+ * Responsibilities:
+ * - Wire text composition
+ * - Image/video selection with thumbnail previews
+ * - Optional dropdowns for moderation & audience controls
+ * - Entry point to video upload flow
+ *
+ * Props:
+ * - profilePic: string (URL)
+ *   Current user profile image.
+ *
+ * - userName: string
+ *   Display name of the posting user.
+ *
+ * - onPressVideoUploadScreen: function
+ *   Navigates to video upload flow.
+ *
+ * - onPressWireUpload: function
+ *   Called with (wireText, heading) when posting.
+ *
+ * - showUploadContainers: boolean
+ *   Toggles AI/media action buttons.
+ *
+ * - showDropDowns: boolean
+ *   Toggles age-group and comment settings dropdowns.
+ *
+ * Internal State:
+ * - wireText: string
+ * - media: selected assets
+ * - thumbnails: preview URIs for selected media
+ *
+ * Behavior:
+ * - Supports mixed image/video selection
+ * - Auto-generates video thumbnails
+ * - Keeps UI vertically structured for mobile ergonomics
+ */
+
 export function WireUploadLayout({
   profilePic,
   userName,
   onPressVideoUploadScreen,
   onPressWireUpload,
+  showUploadContainers = false,
+  showDropDowns = false,
 }) {
   const [wireText, setWireText] = useState(``);
   const [media, setMedia] = useState(null); // image/video URI
@@ -160,43 +203,49 @@ export function WireUploadLayout({
             </View>
 
             {/* 3 — Upload Button */}
-            <View style={WireUploadStyles.uploadButtonContainer}>
-              <TouchableOpacity style={WireUploadStyles.AIGenerateButton}>
-                <Ionicons name="sparkles-outline" size={24} color="#fff" />
-              </TouchableOpacity>
-              <TouchableOpacity
-                onPress={pickMedia}
-                style={WireUploadStyles.uploadImageButton}
-              >
-                <Ionicons name="image" size={24} color="#fff" />
-              </TouchableOpacity>
-            </View>
+            {showUploadContainers && (
+              <View style={WireUploadStyles.uploadButtonContainer}>
+                <TouchableOpacity style={WireUploadStyles.AIGenerateButton}>
+                  <Ionicons name="sparkles-outline" size={24} color="#fff" />
+                </TouchableOpacity>
+                <TouchableOpacity
+                  onPress={pickMedia}
+                  style={WireUploadStyles.uploadImageButton}
+                >
+                  <Ionicons name="image" size={24} color="#fff" />
+                </TouchableOpacity>
+              </View>
+            )}
           </View>
 
-          <DropDown
-            styles={{
-              marginLeft: 0,
-              marginRight: 0,
-              marginTop: 18,
-              // paddingRight: 24,
-            }}
-            iconStyles={{ paddingRight: 16 }}
-            selectText={"Select Age Group"}
-            data={[
-              { key: 1, label: "Under 14 of age" },
-              { key: 2, label: "Above 14 of age" },
-            ]}
-          />
+          {showDropDowns && (
+            <>
+              <DropDown
+                styles={{
+                  marginLeft: 0,
+                  marginRight: 0,
+                  marginTop: 18,
+                  // paddingRight: 24,
+                }}
+                iconStyles={{ paddingRight: 16 }}
+                selectText={"Select Age Group"}
+                data={[
+                  { key: 1, label: "Under 14 of age" },
+                  { key: 2, label: "Above 14 of age" },
+                ]}
+              />
 
-          <DropDown
-            styles={{ marginLeft: 0, marginRight: 0, marginTop: 18 }}
-            selectText={"Comments"}
-            iconStyles={{ paddingRight: 16 }}
-            data={[
-              { key: 1, label: "Turn — ON" },
-              { key: 2, label: "Turn — OFF" },
-            ]}
-          />
+              <DropDown
+                styles={{ marginLeft: 0, marginRight: 0, marginTop: 18 }}
+                selectText={"Comments"}
+                iconStyles={{ paddingRight: 16 }}
+                data={[
+                  { key: 1, label: "Turn — ON" },
+                  { key: 2, label: "Turn — OFF" },
+                ]}
+              />
+            </>
+          )}
         </View>
 
         <View

package/src/layout/WireViewLayout.jsx

@@ -9,6 +9,38 @@ import {
 import { WireViewLayoutStyles } from "../styles/WireViewLayoutStyles";
 import { useState } from "react";
 
+/**
+ * WireViewLayout
+ *
+ * Full-screen wire reader view.
+ *
+ * Responsibilities:
+ * - Displays complete wire content
+ * - Shows channel metadata and engagement actions
+ * - Conditionally exposes destructive actions for owner
+ *
+ * Props:
+ * - content: string
+ *   Full wire text.
+ *
+ * - channelLogo: string (URL)
+ * - userName: string
+ * - subscribersCount: string | number
+ * - timeAgo: string
+ * - viewsText: string | number
+ *
+ * - isItMe: boolean
+ *   Indicates ownership of the wire.
+ *
+ * - onPressDeleteButton: function
+ *   Triggered when delete is confirmed.
+ *
+ * Behavior:
+ * - Preserves original paragraph formatting
+ * - Uses MenuInteraction for engagement UI
+ * - Reveals delete action only when owned + explicitly triggered
+ */
+
 export function WireViewLayout({
   content,
   channelLogo,

package/src/styles/WireCardLayoutStyles.js

@@ -1,12 +1,35 @@
 import { StyleSheet } from "react-native";
 import { globalStyles } from "./globalStyles";
 
+/*
+  WireCardLayoutStyles
+
+  Purpose:
+  Styles for the Wire card container and text content used in
+  short-form, text-first Wire posts.
+
+  Design constraints:
+  - Card spacing and padding are tuned for feed readability.
+  - Background and border radius must remain consistent with
+    global design tokens to avoid visual drift across feeds.
+  - Height is flexible, but constrained to prevent runaway text
+    from breaking scroll performance.
+*/
+
 export const WireCardLayoutStyles = StyleSheet.create({
   container: {
+    /*
+      Core card container for a single Wire.
+
+      Intent:
+      - Flexible height to accommodate variable text length.
+      - Space-between ensures metadata and actions stay anchored.
+      - Margin creates separation between feed items.
+    */
     width: "auto",
     minHeight: 200,
     justifyContent: "space-between",
-    // aspectRatio: 1 / 1,
+    // aspectRatio intentionally disabled; text-driven cards must grow vertically
     margin: 12,
     padding: 12,
     backgroundColor: globalStyles.colors.colorPrimary350,
@@ -14,6 +37,14 @@ export const WireCardLayoutStyles = StyleSheet.create({
   },
 
   mainTextContainer: {
+    /*
+      Wrapper around the main Wire text.
+
+      Constraint:
+      - maxHeight prevents extremely long posts from dominating
+        the feed and degrading scroll performance.
+      - Rounded edges visually separate text from card background.
+    */
     borderRadius: 12,
     paddingVertical: 12,
     paddingHorizontal: 10,
@@ -22,6 +53,13 @@ export const WireCardLayoutStyles = StyleSheet.create({
   },
 
   mainText: {
+    /*
+      Primary Wire text styling.
+
+      Readability choices:
+      - Slightly increased lineHeight for dense text blocks.
+      - Subtle letterSpacing improves legibility on mobile screens.
+    */
     color: "#ddd",
     fontSize: 15,
     lineHeight: 22,
@@ -29,6 +67,13 @@ export const WireCardLayoutStyles = StyleSheet.create({
   },
 
   seeMore: {
+    /*
+      "See more" affordance for truncated text.
+
+      Intent:
+      - Visually distinct but not dominant.
+      - Must remain tappable and readable on small screens.
+    */
     color: "#fff",
     fontWeight: "600",
     marginTop: 4,

package/src/styles/WireChannelMetadataStyles.js

@@ -1,8 +1,29 @@
 import { Platform, StyleSheet } from "react-native";
 import { globalStyles } from "./globalStyles";
 
+/*
+  WireChannelMetadataStyles
+
+  Purpose:
+  Styles for rendering channel-level metadata on a Wire card,
+  including author info, subscription state, date, and view count.
+
+  Design constraints:
+  - Metadata must remain compact and right-aligned to avoid
+    competing with main Wire content.
+  - Font sizes are platform-tuned to maintain visual parity
+    between iOS and Android.
+*/
+
 export const WireChannelMetadataStyles = StyleSheet.create({
   dateViewsContainer: {
+    /*
+      Container for date and view count metadata.
+
+      Intent:
+      - Column layout keeps metadata vertically stacked.
+      - Right alignment ensures consistent edge anchoring in feeds.
+    */
     flexDirection: "column",
     width: "auto",
     justifyContent: "center",
@@ -10,63 +31,95 @@ export const WireChannelMetadataStyles = StyleSheet.create({
   },
 
   dateContainer: {
+    /*
+      Wrapper for date icon + text.
+      Row layout allows optional icon insertion without layout changes.
+    */
     flexDirection: "row",
     paddingBottom: 4,
-    // rowGap: 20,
   },
 
-  // dateIcon: {
-  //   marginRight: 8,
-  // },
-
   viewsContainer: {
+    /*
+      Wrapper for views icon + text.
+      Kept separate from date for independent spacing control.
+    */
     flexDirection: "row",
     justifyContent: "flex-end",
   },
 
-  // eyeIcon: {
-  //   marginRight: 8,
-  // },
-
   dateText: {
+    /*
+      Date text styling.
+
+      Platform note:
+      - iOS text renders visually smaller at the same fontSize,
+        so sizes are adjusted for parity.
+    */
     color: globalStyles.colors.colorPrimary600,
     marginRight: 8,
     fontSize: Platform.OS === "ios" ? 14 : 12,
   },
 
   viewsText: {
+    /*
+      Views count text styling.
+      Intentionally matches dateText for visual consistency.
+    */
     color: globalStyles.colors.colorPrimary600,
     marginRight: 8,
     fontSize: Platform.OS === "ios" ? 14 : 12,
   },
 
   channelMetaContainer: {
+    /*
+      Primary container for channel metadata row.
+
+      Intent:
+      - Separates channel identity from Wire content.
+      - Uses global tokens to remain consistent across surfaces.
+    */
     width: "auto",
     flexDirection: "row",
     backgroundColor: globalStyles.colors.colorPrimary200,
     justifyContent: "space-between",
-    // margin: 12,
     padding: 12,
     borderRadius: globalStyles.borders.borderPrimary100,
   },
 
   channelMetaContainer_ColumnOne: {
+    /*
+      Left column containing user avatar and identity.
+    */
     flexDirection: "row",
   },
 
   userImage: {
+    /*
+      Channel/user avatar.
+
+      Constraint:
+      - Fixed size ensures layout stability across feeds.
+    */
     width: 40,
     height: 40,
     borderRadius: globalStyles.borders.borderPrimary50,
   },
 
   nameSubcountContainer: {
+    /*
+      Wrapper for username and subscriber count.
+    */
     flexDirection: "column",
     justifyContent: "center",
     paddingLeft: 12,
   },
 
   userName: {
+    /*
+      Channel display name.
+      Strong visual weight to establish authorship.
+    */
     color: "#fff",
     fontSize: 16,
     paddingBottom: 4,
@@ -74,10 +127,17 @@ export const WireChannelMetadataStyles = StyleSheet.create({
   },
 
   subCountContainer: {
+    /*
+      Row container for subscriber count + label.
+    */
     flexDirection: "row",
   },
 
   subCount: {
+    /*
+      Numeric subscriber count.
+      Highlighted to draw attention without overpowering username.
+    */
     color: globalStyles.colors.colorPrimary600,
     paddingRight: 6,
     fontSize: 12,
@@ -85,11 +145,20 @@ export const WireChannelMetadataStyles = StyleSheet.create({
   },
 
   subText: {
+    /*
+      Subscriber label text.
+    */
     color: "#fff",
     fontSize: 12,
   },
 
   subscribeButtonContainer: {
+    /*
+      Subscribe / subscribed action button.
+
+      Constraint:
+      - Fixed width ensures consistent hit area.
+    */
     backgroundColor: globalStyles.colors.colorPrimary600,
     width: 100,
     borderRadius: globalStyles.borders.borderPrimary400,
@@ -98,6 +167,9 @@ export const WireChannelMetadataStyles = StyleSheet.create({
   },
 
   subscribeButtonText: {
+    /*
+      Subscribe button label.
+    */
     color: "#fff",
     fontWeight: "bold",
   },

package/src/styles/WireUploadStyles.js

@@ -1,20 +1,42 @@
 import { StyleSheet } from "react-native";
 import { globalStyles } from "./globalStyles";
 
+/*
+  WireUploadStyles
+
+  Purpose:
+  Styles for the Wire creation / upload screen, including
+  user identity, text input, media previews, and upload actions.
+
+  Design constraints:
+  - Screen must scroll comfortably on small devices.
+  - Text input must support long-form drafting without breaking layout.
+  - Media previews are constrained to predictable sizes.
+*/
+
 export const WireUploadStyles = StyleSheet.create({
   container: {
+    /*
+      Root container for the Wire upload screen.
+
+      Constraint:
+      - Bottom margin reserves space for fixed navigation / actions.
+    */
     flex: 1,
     backgroundColor: "#141414",
     marginBottom: 120,
-    // paddingHorizontal: 16,
-    // paddingTop: 20,
   },
 
   profileSection: {
+    /*
+      Top section displaying user identity and channel access.
+
+      Intent:
+      - Visually anchors authorship before content creation.
+      - Bottom border separates identity from input area.
+    */
     flexDirection: "row",
     alignItems: "center",
-    // paddingHorizontal: 36,
-
     borderBottomWidth: 1,
     paddingTop: 18,
     paddingBottom: 18,
@@ -22,40 +44,68 @@ export const WireUploadStyles = StyleSheet.create({
     marginRight: 36,
     borderColor: globalStyles.colors.colorPrimary450,
   },
+
   userImage: {
+    /*
+      User avatar in upload context.
+      Slightly larger than feed avatars to emphasize authorship.
+    */
     width: 60,
     height: 60,
     borderRadius: 12,
     marginRight: 16,
   },
+
   userInfo: {
+    /*
+      Wrapper for username and channel settings link.
+    */
     flexDirection: "column",
     justifyContent: "center",
   },
+
   userName: {
+    /*
+      Display name of the active channel/user.
+    */
     color: "white",
     fontSize: 18,
     fontWeight: "600",
   },
+
   channelSettingsText: {
+    /*
+      Link-style text for channel settings access.
+      Intentionally accent-colored to signal interactivity.
+    */
     color: "#ff6600",
     marginTop: 4,
   },
 
-  // /////////////////
-
   wireInputContainer: {
+    /*
+      Outer container for Wire text input and media.
+    */
     marginRight: 24,
     marginLeft: 24,
     marginTop: 24,
   },
 
   wireInputTextContainer: {
+    /*
+      Visual wrapper around the text input area.
+    */
     backgroundColor: "#202020",
     borderRadius: 12,
   },
 
   inputWrapper: {
+    /*
+      Inner wrapper for text input.
+
+      Constraint:
+      - Bottom corners remain square to visually attach media previews.
+    */
     backgroundColor: "#202020",
     width: "auto",
     borderBottomRightRadius: 0,
@@ -63,15 +113,19 @@ export const WireUploadStyles = StyleSheet.create({
   },
 
   aboutTextArea: {
+    /*
+      Main Wire text input.
+
+      Intent:
+      - Supports long-form drafting.
+      - Preserves whitespace for intentional line breaks.
+    */
     textAlignVertical: "top",
-    // whiteSpace: "pre-line",
     whiteSpace: "pre",
-
     height: "auto",
     minHeight: 200,
     color: "white",
     paddingTop: 16,
-    marginTop: 0,
     lineHeight: 24,
     fontWeight: 400,
     fontSize: 18,
@@ -79,33 +133,45 @@ export const WireUploadStyles = StyleSheet.create({
   },
 
   media: {
+    /*
+      Large media preview (single attachment).
+    */
     width: "auto",
     height: 200,
     borderRadius: 14,
-    // marginBottom: 16,
     backgroundColor: "#000",
   },
 
   uploadButtonContainer: {
+    /*
+      Container for upload-related action buttons.
+    */
     flexDirection: "row",
     alignItems: "center",
     justifyContent: "flex-end",
   },
 
   AIGenerateButton: {
+    /*
+      Optional AI-assisted content generation action.
+    */
     paddingRight: 24,
   },
 
   uploadImageButton: {
+    /*
+      Media upload action.
+      Padding increases tap target for accessibility.
+    */
     paddingRight: 24,
-    // backgroundColor: "#252525",
     paddingVertical: 24,
     borderRadius: 12,
-    // marginBottom: 20,
-    // marginTop: 20,
   },
 
   uploadButtonText: {
+    /*
+      Label for upload-related buttons.
+    */
     color: "#fff",
     fontSize: 14,
     fontWeight: "600",
@@ -113,6 +179,12 @@ export const WireUploadStyles = StyleSheet.create({
   },
 
   mediaContainer: {
+    /*
+      Grid container for multiple media thumbnails.
+
+      Constraint:
+      - Uses wrapping and even spacing to handle variable counts.
+    */
     flexDirection: "row",
     flexWrap: "wrap",
     gap: 10,
@@ -124,6 +196,9 @@ export const WireUploadStyles = StyleSheet.create({
   },
 
   mediaThumb: {
+    /*
+      Individual media thumbnail preview.
+    */
     width: 120,
     height: 120,
     borderRadius: 12,

package/src/styles/WireViewLayoutStyles.js

@@ -1,8 +1,29 @@
 import { StyleSheet } from "react-native";
 import { globalStyles } from "./globalStyles";
 
+/*
+  WireViewLayoutStyles
+
+  Purpose:
+  Styles for the full Wire view screen, where a single Wire
+  is read in isolation (expanded, focused context).
+
+  Design constraints:
+  - Prioritize long-form readability over feed density.
+  - Spacing is intentionally more generous than card layouts.
+  - Bottom margin reserves space for fixed actions or navigation.
+*/
+
 export const WireViewLayoutStyles = StyleSheet.create({
   container: {
+    /*
+      Primary container for an expanded Wire.
+
+      Intent:
+      - Acts as a reading surface, not a feed card.
+      - Increased horizontal padding improves text legibility.
+      - Bottom margin prevents overlap with persistent UI elements.
+    */
     width: "auto",
     margin: 12,
     paddingTop: 12,
@@ -15,11 +36,25 @@ export const WireViewLayoutStyles = StyleSheet.create({
   },
 
   secondaryContainer: {
+    /*
+      Inner vertical stack for content blocks
+      (text, metadata, media, actions).
+
+      Constraint:
+      - Column layout ensures predictable reading flow.
+    */
     flexDirection: "column",
     paddingBottom: 24,
   },
 
   mainText: {
+    /*
+      Primary Wire text in expanded view.
+
+      Readability choices:
+      - Larger fontSize and lineHeight than feed cards.
+      - Optimized for sustained reading, not scanning.
+    */
     color: "#fff",
     lineHeight: 28,
     fontSize: 18,